게시글

강좌8 - ECMAScript - 4년 전 등록 / 3년 전 수정

ES2015(ES6) for ~ of 문

조회수:
0

 안녕하세요. 이번 시간에는 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, 생성기 등이 있습니다. MapSet에 대해서는 다음 시간에 알아보겠습니다! 아래 코드들은 for ~ infor ~ 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에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.

댓글

1개의 댓글이 있습니다.
2년 전
for ~ of는 배열에서는 foo라는 임의의 속성을 자동으로 걸러주고, 정상적인 요소만 표시합니다. <<< 이 문장에서 임의의 속성은 무엇을 의미하고 정상적인 요소는 어떤것을 의미하나요?
2년 전
배열의 0,1,2,3,4 이런 숫자 키들만 남기고 foo처럼 사용자가 추가한 건 걸러내는 겁니다
2년 전
배열의 원래 key인 숫자값들만 남긴다는거군요