[ES6] for ... of

모던 자바스크립트 개발을 위한 ES6

이 포스팅은 인프런의 '모던 자바스크립트 개발을 위한 ES6 강좌'의 수강 내용을 바탕으로 정리한 내용입니다.

for ... of

for ... in 루프는 객체의 모든 열거가능한 속성에 대해 반복문을 수행하게 된다. 즉 Array의 prototype이나, 모든 객체의 원형이 되는 Object의 prototype에 추가한 값, 그리고 배열에 추가된 속성까지 탐색하게 된다. 반면 for ... of 구문은 컬렉션의 요소들에 대해서만 반복하게 된다.

let data = [1, 2, undefined, NaN, null, ""];
Object.prototype.hello = "Hello";
Array.prototype.func = function(){};
data.world = "World";

for(let idx in data) {
    //Array.prototype에 추가한 hello,
    //Object.prototype에 추가한 func,
    //data에 추가한 world까지 모두 출력하게 된다.
    console.log(data[idx]); 
}

위의 코드에서 for ... in 대신 for ... of를 사용하게되면, 컬랙션의 요소들인 []의 내용만 출력하게 된다.

let data = [1, 2, undefined, NaN, null, ""];
Array.prototype.getIndex = function(){};

for(let value in data) {
    //Array.prototype에 추가한 getIndex의 내용은 출력되지 않는다.
    console.log(value); 
}

for ... of는 컬렉션 전용의 함수로, 반복가능한 객체(Array, Set, Map, String, TypedArray, arguments...)에 사용이 가능하다. 다음은 String에 대해 for ... of를 사용하여 탐색하는 코드이다.

for(let value of "Hello World") {
    //Hello World의 각 문자를 한글자씩 콘솔에 출력하게 된다.
    console.log(value);
}

[참고]:
MDN web docs, for...of