[JavaScript] 반복문 for...in, for...of의 차이 정리!

반복문

반복문 중에서 for 또는 forEach 말고 사용은 해봤지만 자주 사용하지 않아서 헷갈리는 for...in과 for...of를 정리하고 이 둘의 차이점을 알아보겠습니다.

for...in문

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)라고 MDN 사이트에 정리가 되어있습니다.
한마디로 for...in문은 객체의 속성들을 순환하면서 작업을 수행하는 것입니다.

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  console.log(`${key}: ${object[key]}`);
}

// output
// a: 1
// b: 2
// c: 3

for...of문

for...of문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하여 작업을 수행하는 것입니다. 즉 배열에서 반복 작업을 하는 것이 for...of문 입니다.
물론 배열에서 for...in문도 사용이 가능합니다.
하지만 for...of문을 사용하는 것을 권장합니다. 이유는 아래에서 확인해 보겠습니다.

// for...of문
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}
// output
// a
// b
// c

// for...in문
const array2 = ['a', 'b', 'c'];

for (const element in array2) {
  console.log(element);
}
// output
// 0
// 1
// 2

배열도 객체이기 때문에 for...in문 사용이 가능은 하지만 위의 보이는 대로 해당하는 key,
즉 배열에서는 인덱스에 접근하게 됩니다.
그렇기 때문에 얻고 싶은 결과와 생각지 못한 차이가 생길 수 있으며,
원하는 결과를 얻기 위해서는 수정이 필요합니다.

결론

마지막으로 결론을 정리해보자면
for...in문은 객체에서 사용
for...of문은 배열에서 사용
이렇게 정리 할 수 있습니다.

참고

for...in - MDN
for...of - MDN
for ...in, for ...of 차이
[Javascript] 반복문 for.. in 과 for.. of 의 차이