ES6 이터레이터(iterator) for of, for in 차이점

데이터를 순회하는 역할을 하는 이터레이터(iterator)

for of와 for in은 어떤 차이점이 있는지 알아보자.

 

 

ES6 이전 for문을 아래와 같이 사용했을 것이다.

for (var i=0; i < data.length; i++) {
	console.log(data[i]);
}

 

 

ES5 이후엔 forEach문을을 사용할 수 있게 되었다.

myArr.forEach(function (value) {
  console.log(value);
});

forEach문의 단점은 break문을 사용해 루프를 중단하거나 return을 사용해 함수를 빠져나올 수 없다는 것이다.

 

 

웬만하면 for in 루프는 쓰지 말자.

for (var idx in myArr) {
  console.log(myArray[idx]);
}

사용하지 말아야 할 이유는

1. idx(인덱스)에 할당되는 값은 string(문자열)이다.
   인덱스 값이 숫자가 아니기 때문에 ("2" + 1 == "21")을 기대하지 않았을 것이다.
2. 배열 요소만 순회하는 것이 아니다.
   myArr.name이라는 속성을 가지고 있다면 배열 요소 말고 index == "name" 속성을 대상으로 한 번 더 실행될 것이다.
   또한 배열의 프로토타입 체인(prototype chain)도 순회하게 된다.
3. 순회 순서가 무작위이다.

 

ES6 for of 루프

for (let value of myArr) {
  console.log(value);
}

for of문은 forEach()문과 달리 break, continue, return 구문 모두 사용할 수 있다.

간결하고 직관적인 문법이다.

for in문의 모든 단점을 대체할 수 있다.

 

 

for in, for of 차이점?

for in문은 객체의 속성들을 순회하기 위한 구문이고

for of문은 배열의 요소. data를 순회하기 위한 구문이다.