JavaScript for...of 루프

For… of 루프

for…of 루프는 이후 버전의 JavaScript ES6에서 도입되었습니다.

JavaScriptfor…of 루프는 반복 가능한 객체의 값을 반복하는 데 사용됩니다. 이러한 Iterable 객체에는 Array, String, TypedArray, Map, Set, NodeList(및 기타 DOM 컬렉션)와 같은 내장 인스턴스와 생성기 함수에 의해 생성된 인수 _object, _generators 및 사용자 정의 iterable이 포함됩니다.
for...of 루프는 iterable에서 가져온 값에 대해 순차적으로 하나씩 작동합니다. for…of 루프는 깔끔한 코드를 제공하고 JavaScriptfor 루프의 혼란을 최소화합니다.

for 루프

let colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

산출:

red
green
blue

for…of 루프

let colors = ['red', 'green', 'blue'];
for (let i of colors) {
    console.log(i);
}

산출:

red
green
blue

통사론

for(variable of iterable){
    // body of for…of loop
    statement(s)
}

variableconst , let 또는 var 로 선언된 JavaScript 변수는 각 반복의 시퀀스에서 값을 받습니다.
iterableIterable은 루프가 작동하는 반복 가능한 객체입니다. 값 시퀀스의 소스입니다.
statement모든 반복에서 실행되는 단일 명령문 또는 여러 명령문일 수 있습니다.

for…of 어레이 포함

for…of 루프를 사용하여 배열 값을 반복할 수 있습니다. 예를 들어:

// array
let colors = ['red', 'green', 'blue'];

// using for...of loop
for (let i of colors) {
    // display the values in console
    console.log(i);
}

산출:

red
green
blue

for…of 문자열 사용

for…of 루프를 사용하여 배열 값을 반복할 수 있습니다. 예를 들어:

// string
let myString = "Hello";

// using for...of loop
for (let i of myString) {
    // display the values in console
    console.log(i);
}

산출:

H
e
l
l
o

마무리!

for...of 루프는 객체를 반복하는 데 사용할 수 없으며 여기서 for…in 루프가 사용됩니다. for...of 루프는 ES6에서 도입되었습니다. 일부 브라우저는 사용을 지원하지 않을 수 있습니다.


💻 행복한 코딩

모아잠 알리 팔로우

Frontend Developer • Creative Web Developer • Opensource Dev