참고한 글
https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

---

📌 정의

먼저 정의를 보면,

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.

👉 단순히 forEach() 는 각 요소에 대해서 함수를 실행하는 것이지만 Map()은 새로운 배열을 생성 한다는 것이다.

---

📌 예시

아래 배열이 하나 있다.

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

각각 forEach 와 Map 을 이용해서 2배로 늘려보면,

---

forEach()

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

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

// arr = [2, 4, 6, 8, 10]

👉 arr 자체가 바뀜.

---

map()

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

let doubled = arr.map(num => {
    return num * 2;
});

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

👉 새로운 배열 생성

---

그러면 이건?

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

let arrEach = arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

// arr = [2, 4, 6, 8, 10]
// arrEach = undefined

👉 forEach() 는 새로운 배열을 생성하지 않는다.

---

📌 마무리

목적에 따른 사용

원래 배열이 가진 데이터를 유지할 필요가 없다면 forEach()를 쓸 수 있겠지만 초기 데이터를 유지한 채, filter(), reduce() 등의 함수로 여러가지 일들을 하려 한다면 map() 이 바람직 할 것이다.