for...of

for...of 문은 반복 가능한 객체(Array, Map, Set, arguments 객체 등을 포함)에 반복을 수행하고, 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. 사용자 정의 반복 후크는 각 속성 값으로 호출되는 구문으로 구성됩니다.

구문

for (variable of object) {
  statement
}

variable

각 반복문에 따라 달라지는 속성의 값은 variable에 할당됩니다.

object

객체는 열거 가능한 속성에 대해 반복됩니다.

예시

for...of와 for...in의 차이점

다음 예제는for...of 루프와 for...in 루프의 차이점을 보여줍니다. for...in이 속성 이름을 반복하는데 반하여, for...of는 속성 값을 반복합니다:

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // "0", "1", "2", "foo" 출력
}

for (let i of arr) {
   console.log(i); // "3", "5", "7" 출력
}

Array.prototype.forEach() 사용

for...of 루프가 반환하는 값과 동일한 속성 값을 얻으려면, Array.prototype.forEach() 메소드를 이용합니다:

let arr = [3, 5, 7];
arr.foo = "hello";

arr.forEach(function (element, index) {
    console.log(element); // "3", "5", "7" 출력
    console.log(index);   // "0", "1", "2" 출력
});

// 혹은 Object.keys()를 이용하여

Object.keys(arr).forEach(function (element, index) {
    console.log(arr[element]); // "3", "5", "7", "hello" 출력
    console.log(arr[index]);   // "3", "5", "7" 출력 
});

DOM 컬렉션에 대한 반복

NodeList와 같은 DOM 컬렉션에 대한 반복: 다음 예제는 article의 직계 자손인 paragraph로 read 클래스를 추가합니다:

// 일러두기: NodeList.prototype[Symbol.iterator]를 구현해 온 플랫폼에서만 작동될 것입니다.
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

생성자에 대한 반복

생성자에 대해서도 반복이 가능합니다:

function* fibonacci() { // 생성자 함수
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // 1000 일 때, 반복 종료
    if (n > 1000)
        break;
    print(n);
}

명세

브라우저 호환성

[1] 이 기능은 기본 설정에서 선택할 수 있습니다. chrome://flags/#enable-javascript-harmony 에서 “Enable Experimental JavaScript” 항목을 활성화해주세요.

같이 보기

• for each...in - 유사한 문이지만, 속성 이름 자체가 아니라 객체의 속성 값을 반복합니다(사용되지 않음).
• Array.prototype.forEach()