for...of
문(statement)은 반복가능한 객체 (Array
, Map
, Set
, String
, TypedArray
, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.
구문
for (variable of iterable) { statement }
variable
- 각 반복에 서로 다른 속성값이 variable에 할당됩니다.
iterable
- 반복되는 열거가능(enumerable)한 속성이 있는 객체.
예
Array
에 대해 반복:
let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30
let
대신 const
도 사용할 수 있습니다, 블록 내부 변수를 수정하지 않는 경우.
let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30
String
에 대해 반복:
let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o"
TypedArray
에 대해 반복:
let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); } // 0 // 255
Map
에 대해 반복:
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let entry of iterable) { console.log(entry); } // [a, 1] // [b, 2] // [c, 3] for (let [key, value] of iterable) { console.log(value); } // 1 // 2 // 3
Set
에 대해 반복:
let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); } // 1 // 2 // 3
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] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); // 1000에서 수열을 자름 if (n >= 1000) { break; } }
다른 반복가능 객체에 대해 반복
iterable 프로토콜을 명시해서 구현하는 객체에 대해서도 반복할 수 있습니다:
var iterable = { [Symbol.iterator]() { return { i: 0, next() { if (this.i < 3) { return { value: this.i++, done: false }; } return { value: undefined, done: true }; } }; } }; for (var value of iterable) { console.log(value); } // 0 // 1 // 2
for...of
와 for...in
의 차이
for...in
루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.
for...of
구문은 컬렉션 전용입니다, 모든 객체보다는. [Symbol.iterator]
속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.
다음 예는 for...of
루프와 for...in
루프의 차이를 보입니다.
Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7]; iterable.foo = "hello"; for (let i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i of iterable) { console.log(i); // logs 3, 5, 7 }
스펙
브라우저 호환성
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | 38 [1] | 13.0 (13) [2] | ? | ? | 8 |
[1] Chrome 29에서 Chrome 37까지 이 기능은 환경설정 뒤에 이용할 수 있었습니다. chrome://flags/#enable-javascript-harmony에서, “실험용 자바스크립트” 항목을 활성화하세요.
[2] Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14)에서 Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)까지는 iterator
속성이 쓰였고(bug 907077) Gecko 27에서 Gecko 35까지는 "@@iterator"
placeholder가 사용됐습니다. Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33) 에서는, @@iterator
심볼이 구현됐습니다 (bug 918828).
[3] 객체의 반복에 대한 지원은 Chrome 51에서 추가되었습니다.
참조
- for each...in - 비슷한 문이지만, 속성 이름 자체보다는 객체의 속성값을 반복합니다 (사라짐).
Array.prototype.forEach()
- Map.prototype.forEach()