자바스크립트 for in vs for of 반복문 정리

ES6 공부하면서 for in 과 for of 차이점이 뭔지 궁금해서 찾아보다가 정리해보았습니다.
잘못된 부분이 있으면 커멘트 부탁드려요~

http://itstory.tk/entry/Javascript-for-in-vs-for-of-반복문

foreach 반복문

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item, item2, item3

for …in 반복문

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다. for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있습니다. 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

for …of 반복문

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

for in 반복문과 for of 반복문의 차이점

  • for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
  • for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}
12개의 좋아요

좋은 글 감사합니다. 커뮤니티에 저말고 컨텐츠를 생산하는 분이 또 생겨서 기쁩니다 ㅎㅎ

모르는게 많아 공부중인데요 ㅠㅠ 해도해도 끝이 없네요 주륵

1개의 좋아요

잘 정리해 주셨네요.
최근에 http://mailchi.mp/webtoolsweekly/web-tools-230?e=b2c0f00eca 여기서도 소개되어 관심있던 내용이기도 하고요.
개인적으로는 ES6를 쓴다면 for…in을 사용할 일이 없지 않을까 싶네요. 성능상 forEach 대비 느리다고 하고, hasOwnProperty로 체크가 필요할 수도 있고요.

근래 인터뷰에서 reduce() 라는 powerful한 방법을 놔두고 forEach나 map을 왜쓰냐고 털린 경험이 있네요. 같이 익혀놓으시면 좋을거 같아요 저도 이젠 장 쓰고 있습니다 ㅋㅋ

성능차이가 많이나나요? 관련 글을 찾고 싶은데 안보이네요…

요기 테스트 케이스가 있네요 ㅎㅎ 크롬, 파폭 다 리듀스가 속도가 좋네요 ㅋㅋ

https://jsperf.com/native-map-reduce-vs-for/2

1개의 좋아요

plain javascript가 빠르다는거 아닌가요?

forEach는 반복문이 아니라 함수(혹은 메서드) 입니다. 글은 재미있게 잘 읽었습니다 ㅎㅎ

PS. 과거에는 for each (in) 이라는 문법이 실재로 존재하긴 했었습니다. 비표준이지만요.

1개의 좋아요

어떤 강의를 보다가 for in을 사용할 경우에 위 코드를 작성하고 for in을 사용하니 맨 뒤에 이상한게 딸려나오는데, 도대체 위 코드가 구체적으로 어떤 역할을 하는 코드길래 저런 문제가 발생하는것인가요?