안녕하세요. 이번 시간에는 for ~ of 문에 대해서 살펴보겠습니다!
for ~ of 문은 for ~ in 문과는 다르게 동작하는 구문입니다. for ~ in 문은 객체의 열거가능한 모든 속성에 대해 반복했다면, for ~ of 문은 컬렉션의 요소를 반복합니다. 즉 for ~ in은 속성의 키를 반복하는 데 반해, for ~ of는 속성의 값을 반복합니다. 단, for ~ of가 반복하는 컬렉션은 [Symbol.iterator]라는 속성이 있어야합니다. Symbol이 뭔지는 굳이 알 필요없고요. [Symbol.iterator] 속성이 컬렉션을 반복할 수 있게 만들어준 다는 것만 알고 계시면 됩니다. 이 속성이 있는 컬렉션에는 Array, String, TypedArray, Map, Set, DOM, 생성기 등이 있습니다. Map과 Set에 대해서는 다음 시간에 알아보겠습니다! 아래 코드들은 for ~ in과 for ~ of의 차이를 보여줍니다.
for (var i in 'string') { alert(i); } // 0, 1, 2, 3, 4, 5
for (var i of 'string') { alert(i); } // s, t, r, i, n, g
let array = [3, 5, 7];
array.foo = 'bar';
for (let j in array) { alert(j); } // 0, 1, 2, foo
for (let j of array) { alert(j); } // 3, 5, 7위의 코드를 잘 보면 array.foo = 'bar';을 했지만, for ~ of 문에서는 bar이 뜨지 않습니다. for ~ of는 배열에서는 foo라는 임의의 속성을 자동으로 걸러주고, 정상적인 요소만 표시합니다.
for ~ of 문이 편리한 점 하나를 더 알려드리겠습니다! 아까 DOM을 반복할 수 있다고 했죠? 과거에는
var domArr = document.getElementsByTagName('div');
for (var k = 0; k < domArr.length; k++) { console.log(domArr[k]); }했다면, 이제는
for (var l of document.getElementsByTagName('div')) { console.log(l); }할 수 있습니다! 역시 코드의 길이를 줄여주는 ES2015답네요!
for ~ of 문에서 배열.forEach와 같이 값과 키 또는 인덱스 모두 받아오고 싶다면 다음과 같이 합니다.
for (const [idx, val] of Iterable.entries()) {
console.log(idx, val);
}이터러블(배열, 유사배열, 객체 등 반복 가능한 대상)에 들어있는 entries()를 활용하면 됩니다.
다음 시간에는 Map, Set, WeakMap, WeakSet에 대해 알아보겠습니다!
Jeongwon
ZeroCho