for ...in, for ...of 차이

자주 헷갈리는게 있어서 한번 포스팅해봅니다.
바로 반복문 중에 ES6 부터 추가 된

for ...in

for ...of

입니다.

둘다 반복문으로 사용 되는데요 하나는 객체를 탐색하고 나머지 하나는 배열 요소를 탐색합니다.

for ...in (객체 순환)

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

for (var item in obj) {
  console.log(item) // a, b, c
}

위처럼 객체의 프로퍼티가 나오는것을 확인해 볼 수 있습니다.
만약 for ...of 를 쓴다면?

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

for (var item of obj) {
  console.log(item) // Uncaught TypeError: obj is not iterable
}

에러가 나는군요.

for ...of (배열 순환)

var arr = [1, 2, 3];

for (var item of arr) {
  console.log(item); // 1, 2, 3
}

배열 순환이 아주 잘 되는군요.
그렇다면 for ...in 을 하게 되면 어떻게 될까요?

var arr = [1, 2, 3];

for (var item in arr) {
  console.log(item); // 0, 1, 2
}

사실 자바스크립트에서는 배열도 객체이기 때문에 그 객체의 키값에 해당하는게 나오는데요. 배열로 따지면 index라고 생각하면 되겠네요.

즉, 두가지로 요약할 수 있겠는데

for ...in // 객체 순환
for ...of // 배열 값 순환

이라고 정리할 수 있겠네요.