for in, for of, forEach(map) 의 차이

김정민·2022년 5월 9일

1. for in

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()를 사용하면 된다.

2. for of

for of는 이터러블한 객체의 순회를 도와주는 반복문이다. (객체에는 사용불가)

내부에 [Symbol.iterator]를 가진 객체라면 어떤 객체든 순회할 수 있다.
하지만 iterable하지 않은 일반 Object에는 사용할 수 없다.

3. forEach

forEach는 Array의 prototype을 상속받은 객체가 사용할 수 있는 함수이다.

반복문이 아니라 '함수'이다. 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다.

const arr = [1, 2, 3, 4, 5]; 
arr.forEach(item => { 
  console.log(item); 
});

// 1 2 3 4 5

3-1. Map,Set에서 forEach

Map과 Set은 자체적으로 내장 forEach()메서드를 지원한다.

Map, Set에서의 forEach( [Map or Set].prototype.forEach )는 Array의 forEach( Array.prototype.forEach )와 비슷하지만 조금 다르다.

Array의 forEach가 받는 콜백함수의 인수는 순서대로 값, 인덱스, 배열 순으로 들어옵니다.

하지만 Map, Set에서의 forEach가 받는 콜백함수의 인수는 순서대로 값, 키, 오브젝트(Map or Set) 로 들어옵니다.

Set의 콜백함수는 key 대신에 value2가 들어옵니다. value2는 value와 똑같습니다.

const map = new Map<string, string>();
const set = new Set<string>();
 
map.set('name', 'Mommoo');
map.set('age' , 'secret');
 
set.add('Mommoo');
set.add('secret');
 
map.forEach((value, key, mapObject) => console.log(key +' , ' +value));
// name , Mommoo
// age , secret
 
set.forEach((value1, value2, setObject) => console.log(value1 +' , '+ value2));
// Mommoo , Mommoo
// secret , secret