for-in과 for-of

for-in과 for-of가 자바스크립트에서 반복문을 돌릴 때 자주 쓰이는데, 헷갈리기 쉬운 부분이 있어 정리하게 되었다 🙌

for-in: 객체의 속성을 순회할 때 👀

for-in은 주로 객체의 속성들을 순회할 때 쓰인다. 다시 말해, 객체의 키값을 통해 반복문을 돌릴 때 사용한다!

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

for (const key in myObject) {
  console.log(key + ': ' + myObject[key]);
}

위 코드를 실행하면 아래와 같이 출력이 되는데,

a: 1
b: 2
c: 3

for-in은 객체의 속성을 문자열로 반환하며, 상속받은(프로토타입 체인의) 속성도 순회하므로 의도치 않은 결과를 초래할 수 있다.

for-of: 이터러블 객체를 순회할 때 ✨

for-of는 ES6(ECMAScript 2015)에서 도입된 문법인데, 이터러블 객체(배열이나 문자열 같은 것)를 순회하는 데 특화되어 있다.

for-of를 사용하면 요소의 값을 직접 받아올 수 있다.

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

for (const value of myArray) {
  console.log(value);
}

코드의 결과는 아래와 같다.

a
b
c

for-in과 달리 상속받은(프로토타입 체인의) 속성은 순회 대상에 포함되지 않고 객체 자신의 요소만 순회한다.

그래서 어떤 걸 써야 할까? 🤔

객체의 속성을 순회하고 싶다면 for-in을, 이터러블 객체의 요소를 순회하고 싶다면 for-of를 사용하는 게 좋다.

forEach, map, reduce 같은 배열 메서드를 사용하는 것도 좋은 선택이 될 수 있는데, 상황에 따라 가독성이나 성능 면에서 더 나은 선택지가 될 수 있기 때문이다.