forEach vs map

Goal

javascript의 문법인 forEach와 map의 차이점을 이해한다.

forEach()

forEach는 for문과 마찬가지로 반복적인 작업을 수행할 때 사용한다.
배열의 각 요소에 대해 callback 함수를 실행한다.

const numbers = [1, 2, 3, 4, 5];
const result = [];

numbers.forEach((number, idx) => result.push(number + 1));

console.log(result); [2, 3, 4, 5, 6]

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

numbers.forEach((number, idx) => console.log(number)); // 1 2 3 4 5

map()

map 또한 마찬가지로 반복적인 작업을 수행할 때 사용한다.
forEach와의 차이는 map은 각 요소에 대해 callback 함수를 실행하고 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((number, idx) => number + 1);

console.log(result); // [2, 3, 4, 5, 6]

만약 forEach를 map처럼 사용한다면?

const numbers = [1, 2, 3, 4, 5];
const result = numbers.forEach((number, idx) => number + 1);

console.log(result); // undefined

undefined 가 나온다