[JS] Map vs ForEach

Map vs ForEach

이 글은 https://codeburst.io/javascript-map-vs-foreach-f38111822c0f의 번역내용을 다수 포함하고 있습니다.

JavaScript로 작업 해왔다면, 

Array.prototype.map ()과 Array.prototype.forEach ()와 같이 두 가지 비슷한 Array 메서드를 발견했을 것입니다.

차이점이 무엇일까요?

MDN에서 정의를 한번 살펴보도록 합니다.

* forEach() — executes a provided function once for each array element.

=> 배열요소마다 한 번씩 제공한 함수를 실행합니다.

* map() — creates a new array with the results of calling a provided function on every element in the calling array.

=> 배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를 모아서 새로운 배열을 반환합니다.

중요한 차이점은 map은 동일한 사이즈의 새로운 배열을 반환한다는 것입니다.

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

위의 배열을 참고하여 ForEach와 map을 각각 사용해보도록 하겠습니다.

ForEach

반환 값은 단순히 버려지므로 forEach 함수에서 반환하지 않습니다.

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});
 
// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
    return num * 2;
});
 
// doubled = [2, 4, 6, 8, 10]

Speed Consideration

jsPerf는 다양한 JavasScript 메서드 및 함수의 속도를 테스트하는 훌륭한 웹 사이트입니다.

JsPerf

함수형 프로그래밍

함수형 프로그래밍을 선호한다면 map ()을 사용하는 것이 더 바람직 할 수도 있다는 것을 이해하는 것이 중요합니다.

이는 forEach ()가 원래의 Array에 영향을주고 변경하는 반면 map ()은 완전히 새로운 Array를 반환하기 때문에 원래 배열은 변경되지 않기 때문입니다.

배열의 데이터를 변경하려고하지 않을 때 forEach ()가 바람직 할 수 있지만 대신 데이터베이스에 저장하거나 로그 아웃하는 등의 작업을 수행하기를 원합니다.

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
 
// a
// b
// c
// d

데이터를 변경하거나 변경할 때 map ()이 더 좋습니다. 뿐만 아니라 더 빠르지 만 새 배열을 반환합니다. 

즉, 다른 메소드 (map (), filter (), reduce () 등)를 연결하는 것과 같은 멋진 작업을 수행 할 수 있습니다.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

먼저 arr에 매핑하고 배열에있는 모든 요소를 ​​곱하는 것입니다.

이 후에 배열을 필터링하고 5보다 큰 요소 만 저장합니다. 

정리하면 다음과 같습니다.

1. forEach ()로 할 수있는 일은 map ()으로 할 수 있으며, 그 반대도 가능합니다.

2. map ()은 메모리를 할당하고 반환 값을 저장합니다. forEach ()는 반환 값을 버리고 항상 정의되지 않은 값을 반환합니다.

3. forEach ()는 콜백 함수가 현재 배열을 변경하도록합니다. map ()은 대신 ​​새 배열을 반환합니다.

출처 : https://codeburst.io/javascript-map-vs-foreach-f38111822c0f