[JavaScript] for ...in, for ...of의 차이

결론부터 말하면
for...of 는 배열의 반복에서 사용되고,
for...in은 객체의 반복에서 사용된다.

💫 for...of

var arr = [1, 2, 3];

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

for...of 는 배열을 순환할 때 사용된다.

배열이 아닌 객체에 사용한다면 어떤 결과가 나올까?

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

for (var item of obj) {
    console.log(item);
}

Uncaught TypeError: obj is not iterable

 

반복 불가능하다는 TypeError를 뱉어낸다.

💫 for...in

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

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

for...in 은 객체를 순환할 때 사용된다.

객체가 아닌 배열에 사용한다면 어떤 결과가 나올까?

var arr = [1, 2, 3];

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

JavaScript에선 배열도 Object 타입으로 인식하기 때문에 결과가 나오긴 나온다.
다만 일치하는 값은 아니고 해당 배열의 index가 출력되는 걸 확인할 수 있었다.