map vs forEach

*출처 콥노트

Array.prototype.map()

map 메서드는 매개 변수로 함수를 받는다. 그런 다음 각 요소에 매개 변수로 받은 함수를 적용하고 완전히 새로운 배열로 반환하게 된다.

const arr = [1,2,3];
const arr2 = arr.map(x => x*2);

console.log(arr); // [1,2,3]
console.log(arr2); // [2,4,6]

Array.prototype.forEach()

forEach 메서드는 매개 변수로 함수를 받는다. 그런 다음 각 요소에 매개 변수로 받은 함수를 적용하고 기본적으로 undefined를 반환한다.

const arr = [1,2,3];
const arr2 = arr.forEach(x => x*2);

console.log(arr); // [1,2,3]
console.log(arr2); // undefined

return

map은 매개변수로 받은 함수를 적용된 새배열을 반환하지만, forEach는 undefined를 반환한다.

체이닝

map 메서드의 경우 새배열이 반환되기 때문에 다른 배열관련 메서드로 체이닝이 가능하다.

const arr = [1,2,3];
const arr2 = arr.map(x => x*2).filter(x => x / 2 === 2);
console.log(arr2); // [4]

arr.forEach(x => x*2).filter(x => x / 2 === 2);
// Uncaught TypeError: Cannot read property 'filter' of undefined

원본 배열의 불변성

두 메서드 모두 원본 배열을 수정하지는 않는다. 하지만 매개 변수로 넣어준 콜백함수에서 직접 원본 배열을 수정한다면 두 메서드 모두 원본 배열이 수정된다.

arr.forEach(x => x*2); // arr => [1,2,3]
arr.map(x => x*2); // arr => [1,2,3]
 
 // ---------------------
 
arr.map((x,i) => arr[i] = x*2); // arr => [2,4,6];
// or
arr.forEach((x,i) => arr[i] = x*2); // arr => [2,4,6];