for in과 for of의 사용에 대해 헷갈리는 경우가 있어 짧게 정리해볼까 한다.

자바스크립트에서 for...in과 for...of은 둘 다 반복문(loop)을 사용하여 객체(object)의 프로퍼티(property)를 반복(iterate)하는 데 사용된다.
그러나 두 반복문의 작동 방식과 사용 용도에 차이가 있는데 다음과 같다.

for...in

for...in은 객체(object)의 모든 열거 가능한(enumerable) 속성들을 반복한다. 이때 반복 변수로는 객체의 속성 이름이 사용된다.

사용법

for (const variable in object) {
  statement

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

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
//"a: 1"
//"b: 2"
//"c: 3"

주의점

for...in은 특정 순서에 따라 인덱스를 반환하는 것을 보장하지 않기 때문에 만약 배열에 사용하게 되면 일관된 순서로 요소를 방문하지 못할 수도 있다. 그렇기 때문에 순서가 중요한 배열의 반복에는 for...of나 Array.prototype.forEach()를 사용하는 것을 추천한다.
따라서 for...in은 키-값 쌍을 가지고 있는 객체의 속성을 확인하는데 사용한다.

for...in은 순서가 중요한 Array에서 반복을 위해 사용할 수 없다!

for...of

for...of는 반복가능한(iterable) 객체의 요소(element)를 반복한다. 이때 반복 변수로는 객체의 요소 값이 사용된다.

사용법

for (variable of iterable) {
  statement
}

const arr = ['a', 'b', 'c'];

for (const element of arr) {
  console.log(element);
}

//"a"
//"b"
//"c"

let iterable = "str";

for (let value of iterable) {
  console.log(value);
}
//"s"
//"t"
//"r"

차이점

MDN의 예시에서 for...in과 for...of의 차이점을 쉽게 알 수 있는 코드가 있다.

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

여기서 for...in문의 결과는 foo, arrCustom, objCustom까지 출력되어 의아할 수 있는데 이는 for...in은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 모두 반복하기 때문이다.

쉽게 생각해서 for..in은 객체의 반복에 사용하고 for...of는 배열의 반복에 사용하면 된다!