[JavaScript] forEach와 map의 차이점

요약

'forEach'는 배열 각 요소에 대한 연산이 결과를 반환할 필요 없이, 단순히 실행만 필요할 때 적합합니다.

'map' 은 배열의 각 요소를 새로운 값으로 변환하여 그 결과를 새로운 배열로 필요로 할 때 사용됩니다.

 

공통점

1. 배열 순회

두 함수 모두 배열의 모든 요소를 순회하면서 주어진 함수를 각 요소에 적용합니다.

 

2. 함수 실행

'forEach'와 'map' 모두 콜백 함수를 매개변수로 받습니다.

이 콜백 함수는 배열의 각 요소에 대해 실행됩니다.

 

3. 고차 함수

두 함수 모두 고차 함수입니다. 즉, 함수를 인자로 받고,

'forEach'는 기능 수행을,

'map'은 새로운 배열을 결과로 제공합니다.

 

차이점

1. 반환 값

forEach

아무런 값을 반환하지 않습니다. (undefined 반환)

주로 배열의 각 요소에 대해 특정 작업 (출력, 로깅)을 수행할 때 사용됩니다.

map

콜백 함수의 반환 값으로 구성된  새로운 배열을 반환합니다.

이는 데이터를 변환하거나 조작할 필요가 있을 때 유용합니다.

 

2. 사용 목적

forEach

배열의 각 요소에 대해 주어진 작업을 실행하고 결과를 따로 저장하지 않습니다.

사이드 이펙트를 발생시키는 작업 (외부 상태 변경)에 주로 사용됩니다.

map

기존 배열을 기반으로 새로운 배열을 만들 때 사용됩니다.

각 요소를 변형시키거나 계산을 통해 새로운 값을 도출할 때 유용합니다.

 

3. 부작용

forEach

외부 상태를 변경하는 부작용을 발생시킬 수 있습니다.

map

순수 함수의 개념을 사용하여 외부 상태에 영향을 미치지 않고,

각 요소에 대한 결과만을 새 배열로 반환합니다.

 

코드예시

forEach

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

map

const array = [1, 2, 3];
const newArray = array.map(item => item * 2);
console.log(newArray);  // 출력: [2, 4, 6]

 

 

 

forEach vs map