이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌8 - ECMAScript - 2년 전 등록 / 6달 전 수정

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인 숫자값들만 남긴다는거군요