JavaScript: 맵 대 forEach

이 기사HERE를 기반으로

정의

Array.prototype.map().map() 메서드는 호출 배열의 모든 요소에서 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다.

MDN Documentation HERE .
Array/prototype.forEach().forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.

MDN Documentation HERE

예

const test1Array = [1, 2, 3, 4, 5];
const new1 = test1Array.map((value) => value * 2);
console.log(test1Array, new1);

const test2Array = [1, 2, 3, 4, 5];
const new2 = test2Array.forEach((value) => value * 2);
console.log(test2Array, new2);

이 코드를 보면 첫 번째console.log의 결과는 다음과 같습니다.

// [1, 2, 3, 4, 5] [2, 4, 6, 8, 10]

보시다시피 원래 배열은 동일하고 새 배열이 생성됩니다.

두 번째console.log의 결과는 다음과 같습니다.

// [1, 2, 3, 4, 5] undefined

여기에서 원래 배열이 변경되지 않고 함수에서 아무 것도 반환되지 않는 것을 볼 수 있습니다.
.forEach() 함수는 원래 배열을 변경할 수 있습니다.

const test3Array = [1, 2, 3, 4, 5];
const new3 = test3Array.forEach((value, index) => {
  test3Array[index] = value * 2;
});
console.log(test3Array, new3);

이제 원래 배열이 변경된 것을 볼 수 있습니다.

// [2, 4, 6, 8, 10] undefined

사용 사례

기능적 고려 사항

.map()와 .forEach() 중에서 결정할 때 가장 먼저 고려해야 할 사항은 기능적 문제입니다. .map() 함수는 원래 데이터를 변경하지 않습니다. 이전 및 이후 상태를 비교할 필요가 있는 경우 .map()가 더 나은 도구가 될 것입니다.

데이터 포인트로 무언가 하기

.forEach() 함수는 배열의 데이터를 변경할 필요가 없고 데이터로 무언가를 수행해야 하는 경우(어떤 방식으로든 데이터를 저장하거나 로그아웃)에 적합할 수 있습니다.

데이터 포인트 변경

.map() 함수는 데이터를 변경하거나 변경할 때 선호되는 선택일 수 있습니다.

새 배열이 생성되고 반환되므로 .map() , .filter() , .reduce() 등과 같은 메서드를 연결하는 수단을 제공합니다.

속도

성능 테스트에서 더 빠른 속도를 보여주는 다른 기사.map()를 본 적이 있습니다.

나는 내 자신을 실행하기로 결정했습니다.

let test3 = [];
let test4 = [];
for (let i = 0, len = 10_000_000; i < len; i++) {
  test3.push(i);
  test4.push(i);
}

console.time('map test');
const new3 = test3.map((value) => value * 2);
console.timeEnd('map test');

console.time('forEach test');
test4.forEach((value) => value * 2);
console.timeEnd('forEach test');

여기의 결과는 실제로 지도가 더 느리다는 것을 보여줍니다...


기능
시간 1
시간 2
시간 3
시간 4
시간 5

.map()196ms
190ms
150ms
160ms
150ms
.forEach()113ms
111ms
111ms
116ms
110ms


이 두 기능의 속도 차이를 테스트한 결과, 성능 차이를 위해 둘 중 하나를 서로 겹쳐 사용해야 했던 기억이 없습니다.

결론

기본적으로 두 함수는 반환되는 내용에 약간의 차이가 있지만 동일한 작업을 수행합니다.

.map() 메모리를 할당하고, 반환 값을 저장하고, 새 배열을 반환합니다.

.forEach()는 반환된 값을 모두 버리고 undefined를 반환하며 원래 배열이 변경되도록 허용합니다.