[JS] forEach, for in, for of의 차이

forEach는 Array의 prototype을 상속받은 객체가 사용할 수 있는 함수이다. 반복문이 아니라 '함수'이다. 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다.

const arr = [1, 2, 3, 4, 5];

arr.forEach(item => {
  console.log(item);
});

// 1 2 3 4 5

 

for in은 Object에 있는 key에 차례로 접근하는 데 사용되는 반복문이다. Array에도 사용할 수도 있지만 일반적으로 Object를 제외한 객체에는 사용하지 않는 것이 좋다. 왜냐하면 for in으로 순회를 하게 되면 해당 요소뿐 아니라 prototype chain을 따라 확장 속성들도 함께 순회하기 때문이다. 아래 예시를 보자.

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

Object.prototype.foo = function() {
  return 0;
};

for (const key in object) {
  console.log(key, object[key]);
}

// a 1 b 2 c 3 foo function()...

object의 요소뿐 아니라 Object의 prototype으로 만들어 둔 foo 함수까지 함께 순회하는 모습을 볼 수 있다. 이러한 이유 때문에 for in은 Object의 key를 순회하기 위해 불가피하게 사용하는 것이 아니라면 사용하지 않는 것이 좋다. Object를 for in이 아닌 다른 방법으로 순회하고 싶다면, Object의 내장 메소드인 keys()를 사용하면 된다.

 

마지막으로 for of이다. for of는 이터러블한 객체의 순회를 도와주는 반복문이다. 때문에 Array만 반복할 수 있는 forEach와 다르게, 내부에 [Symbol.iterator]를 가진 객체라면 어떤 객체든 순회할 수 있다. 하지만 iterable하지 않은 일반 Object에는 사용할 수 없다.

const gen = function*() {
  yield 1;
  yield 2;
  yield 3;
};

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

// 1 2 3

 

* 요약

1. forEach는 Array를 순회하는 데 사용되는 Array의 메소드.

2. for in은 Object의 key를 순회하기 위해 사용되는 반복문. 단, 확장 속성까지 함께 순회한다는 점 고려.

3. for of는 이터러블한 객체를 모두 순회할 수 있는 강력한 반복문!

 

더 자세한 내용은 링크도 참고.

 

함수형 프로그래밍과 ES6+ / 유인동님