[JavaScript] forEach()와 map()는 뭐가 다를까

 

해당 글은 forEach( )와map( )의 개념을 이해하기 위해 아래 article을 번역한 글입니다

번역에 틀린 부분이 있을 수 있음을 알려드립니다

 

https://medium.com/@nusrat35/javascript-map-vs-foreach-cb4704636402

JavaScript: forEach() vs map()

 

 

배열을 반복적으로 접근하기 위해, JavaScript는 몇 가지 효율적인 함수들을 갖고 있다.

배열을 반복하기 위해 가장 자주 사용되는 두 가지 메서드로 forEach( )와 map( )이 있다.

두 메서드 모두 반복을 시행하고 결과를 생성하는데 두 메서드의 차이점이 무엇일까?

 

특히 새로 시작하는 분들을 위해 몇 가지 설명이 필요하다고 생각된다.

 

이 글에서는 다음 토픽들을 탐구해 보도록 하자

• 전반적인 함수 개요
• 리턴 값
• 체이닝 메서드
• 가변성
• 어떤 메서드를 언제 사용해야 하는가

 

전반적인 함수 개요

forEach( ) 메서드는 새로운 배열을 반환하지 않으면서 주어진 배열의 요소마다 콜백 함수를 시행하도록 한다.

 

map( ) 또한 주어진 배열의 요소들마다 함수를 시행하도록 하는데

forEach( ) 메서드와는 달리, 이 메서드는 새로운 배열을 리턴한다.

 

구문 :

array.forEach(function(currentValue, index, arr), thisValue)
array.map(function(currentValue, index, arr), thisValue)

function( ) - 각각의 배열 요소들을 실행하기 위한 함수 (필수)

currentValue - 현재 요소의 값 (필수)

index - 현재 요소의 인덱스 값 (선택)

arr - 현재 요소의 배열 (선택)

thisValue - 선택사항. 디폴트값은 undefined. 값으로 사용되기 위해 함수에 전달된 값이다

 

리턴 값

리턴 값은 map( )과 forEach( )의 첫 번째 차별점이다.

map( )은 새로운 배열을 반환하지만 forEach( )는 아무것도 반환하지 않는다.

따라서 forEach( )의 리턴 값에 접근하려고 한다면, undefined라는 결과를 받게 된다.

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

let mapReturn = numbers.map((elem) => elem*elem);
let forEachReturn = numbers.forEach((elem) => elem*elem);

console.log(mapReturn); //output: [ 1, 4, 9, 16, 25 ]
console.log(forEachReturn); //output: undefined

 

체이닝 메서드

*메서드 체이닝 : 쇠사슬처럼 객체를 연결고리로 함수를 지속적으로 호출하는 것

 

map( )과 forEach( )의 두 번째 차별점은,

map( )은 체이닝이 가능하지만 forEach( )은 체이닝이 가능하지 않다는 것이다.

 

배열에 map( )를 적용한 후 이어서 reduce( ), sort( ), filter( ) 등등 다른 메서드를 적용 가능하다.

그러나 forEach( )는 그와 같은 기능을 사용할 수 없다.

그 이유는 바로, forEach( )의 리턴 값이 undefined이기 때문이다.

 

숫자의 제곱 값이 10 이상인 제곱 값들의 합을 리턴해야 한다고 가정해 보자

이 문제를 연쇄적인(chained) 메서드들로 해결하기 위해서는 map( )을 사용해야 한다.

솔루션은 아래와 같다. 

let numbers = [1, 2, 3, 4, 5];
let result = numbers.map(function(element){
    return element*element;
}).filter(function(element){
    return element >10
}).reduce(function(accumulator, element){
    return accumulator += element;
})
console.log(result); //Output: 41

 

화살표 함수를 이용해서 한 줄로 코드를 작성할 수도 있다

let numbers = [1, 2, 3, 4, 5];
let result = numbers.map((elem) => elem*elem).filter((elem) => elem > 10).reduce((accu,elem) => accu += elem);
console.log(result); //41

 

가변성

MDN 문서에서 나타내기를:

 

- forEach( )가 호출되는 배열은 가변적이지 않다. (그러나, callback에는 해당 옵션이 있다)

- map( )가 호출되는 배열은 가변적이지 않다. (그러나 callback이 호출되면 그럴 가능성이 있다)

 

위 정의가 꽤나 비슷한 것을 볼 수 있으며, 두 정의 모두 인자로서 callback을 허용함을 알 수 있다

그래서 둘 중 어떤 것이 불변성에 의존하는 것일까?

 

map( ) 메서드는 같은 개수의 데이터 포인트와 대체된 항목으로 가진 완전히 새로운 배열을 생성한다.

그러나 forEach( )는 undefined를 반환한다. 이는 기존의 배열이 callback에 의해서 수정되는 이유이다.

 

따라서, map( )이 불변성에 의존하며, forEach( )가 가변적인 메서드인 것이 명백해 보인다.

 

어떤 메서드를 언제 사용해야 하는가

유스케이스가 map( ) 또는 forEach( ) 중 어떤 것을 사용해야 할지 결정하게 된다.

map( )은 변형된 데이터를 포함하는 새로운 배열을 제공하며, 따라서 데이터를 수정하거나 대체하거나 이용해야 할 때

이 메서드를 사용해야 한다.

 

그러나 결과 배열이 필요하지 않은 경우에는 map( ) 대신 forEach( )를 사용하면 된다.

 

또한 연쇄적으로 다른 메서드를 사용해야 하는 경우 map( ) 메서드를 사용해야 한다.