Javascript for in과 for of 차이

Javascript에서 객체 순환시 

 

for(const item in obj) 또는 for(const item of arr)처럼 for문을 사용하는데 이때 두가지의 차이점은 아래와 같다.

 

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

배열에 대한 value를 얻을 수 있게 된다.

이때 for in 을 사용하게 되면 아래와 같은 결과를 얻는다.

var arr = [1, 2, 3];

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

0, 1, 2

 

이때 알 수 있는 것은 자바스크립트에서 배열도 객체이기 때문에 그 객체의 키값에 해당하는게 나오게 되는 것이며

객체를 순회할때 우리가 늘 보던 index가 나오게 되는 것이다.