for in과 for of 차이점

'for...of문'은 ES6부터, 즉 2015년에 들어와서야 생긴 기능이다. 대신 그 전부터 'for...in문'이라는 게 있었다.

for...in문과 for...of문의 차이

var arr =  ['Americano', 'Latte', 'Tea'];

// for...of
for (var v of arr) {
  console.log(v);
}

console.log('---');

// for...in
for (var k in arr) {
  console.log(k);
}

결과 
Americano
Latte
Tea
---
0
1
2

배열은 여러 개의 index-value 쌍으로 이루어졌다고 볼 수 있는데, 위 코드의 arr배열의 경우에 index는 0, 1, 2이고, value는 'Americano', 'Latte', 'Tea'이다.

출력된 결과를 보시면 알 수 있듯 for...of문은 배열의 value에 직접 접근하는 반면, for...in문은 index에 접근한다,.

for...in문으로 value에 접근하기 위해서는 이렇게 바뀌어야한다,

// for...in
for (var k in arr) {
  console.log(arr[k]);
}

결과: 
Americano
Latte
Tea

for...in문에 대한 비판들

원래 있던 for...in문보다 for...of문을 먼저 소개한 이유는 for...in문에 대한 여러 비판들이 존재하기 때문이다.

'IE8(Internet Explorer 8)'에서 오류가 난다는 문제도 있으며, 실행 환경에 따라 배열에 저장된 값들의 순서가 보장되지 않고 무작위로 나타날 수 있다.

실제로 ES6 버전에서는 for...in문 자체를 제거하려고 했었지만, for...in문을 이미 사용하고 있는 코드가 많아서 제거하지 못했다.

이미 작성된 코드가 아니라면 사용하지 않는 것이 바람직 하다고 본다.

ES6 지원 브라우저

참고로 for...of문은 ES6에 새롭게 추가된 기능이다. 만약 for...of문이 제대로 동작하지 않는다면, 웹브라우저의 버전을 확인해야한다. 우리가 사용하고 있는 최신 버전의 구글 크롬을 포함해서 대부분의 최신 브라우저는 ES6를 지원하지만, 오래된 브라우저에서는 동작하지 않을 수도 있다.

여기에서 'for..of loops' 항목을 보시면 어느 브라우저가 for...of문을 지원하는지 알 수 있다.

출처: codeit