forEach, for in, for of, map 비교

프론트엔드는 iterable(반복 가능한) 데이터를 받아 처리하기 때문에 for문을 가장 많이 쓴다고해도 과언이 아니다.

※이터러블 데이터: 배열, 문자열, 맵 등

이터러블 데이터를 펼치는 방법은 forEach, for in, for of, map 등으로 다양하다. 주로 forEach vs map 그리고 for in vs for of 비교대상이다.

forEach와 map 비교

공통점:
01. 모든 배열을 순회하며, 루프를 중단할 수 없다.
02. 인자로 콜백함수를 받는다.
03. 원본 배열을 변경하지 않는다. (이터러블 데이터의 프로토타입이기 때문)

array.forEach((value, index) => { ... })

콜백함수 인자로 index번째의 value데이터를 얻을 수 있다. 리턴 값 없이 단순히 순회하는 목적으로 사용된다.

["apple", "banana", "cherry"].forEach((value, idx) => {
  console.log(idx, value);
});

// 0 apple
// 1 banana
// 2 cherry

array.map((value, index) => { return })

배열을 가공하여 새로운 배열을 생성하고 싶을 때 사용하며, 새롭게 생성되는 배열은 기존 배열과 length가 동일하다. 리턴 값이 존재하기 때문에 JSX 등에 유용하게 사용된다.

const arrayMap = [1, 2, 3].map(
  (element) => element * 2
);
console.log(arrayMap);

// [2, 4, 6]

for in과 for of 비교

공통점:
01. 모든 배열을 순회하며, 루프를 중단할 수 있다.
02. 기초 문법 for문 사용법과 비슷하다.

for of

이터러블 데이터(배열, 문자열 등)를 순회할 때 적합하다.

const array = ['apple', 'banana', 'cherry'];

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

//apple
//banana
//cherry

forEach처럼 사용하고 싶은 경우:

const array = ['apple', 'banana', 'cherry'];

for (const [index, element] of array.entries()) {
  console.log(index, element);
}

//0 apple
//1 banana
//2 cherry

for in

주로 객체를 순회할 때 사용하는 것이 적합하다. 배열에서도 사용이 가능하지만 큰 특징으로 비표준 속성(프로토타입 등)도 같이 순회되기 때문에 배열에서 사용하면 예상치 못한 동작이 생길 수 있다.

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

for (const key in obj) {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
}

//Key: a, Value: 1
//Key: b, Value: 2
//Key: c, Value: 3

배열에 비표준 속성이 존재하는 경우:

Array.prototype.customMethod = () => 'custom';
const array = ['apple', 'banana', 'cherry'];

for (const index in array) {
  console.log(`Index: ${index}, Element: ${array[index]}`);
}

//Index: 0, Element: apple
//Index: 1, Element: banana
//Index: 2, Element: cherry
//Index: customMethod, Element: () => 'custom'

비교 요약

특징	for...of	forEach	for...in	map
제어문 사용	가능 (break, continue)	불가능	가능 (break, continue)	불가능
비동기 처리	가능 (await 사용 가능)	제한적 (콜백 내부에서만 await 사용 가능)	가능 (await 사용 가능)	제한적 (콜백 내부에서만 await 사용 가능)
사용 대상	이터러블 객체	배열	객체 (열거 가능한 속성)	배열
반환 값	없음	없음	없음	새로운 배열
프로토타입 속성	포함되지 않음	포함되지 않음	포함됨	포함되지 않음
주요 사용 사례	배열, 문자열, Map, Set 등	배열	객체의 속성 순회	배열의 각 요소를 변환하여 새로운 배열 생성