forEach, Map 차이

forEach   
  : 배열의 각 아이템에 대해 콜백 함수 호출
  : 반환값을 가지지 않고, 루프문 수행 

let a = [1,2,3,4,5]
    
a.forEach((item, index, arr) => {
    console.log(item, index, arr)
})

결과 
1 0 (5) [1, 2, 3, 4, 5]
2 1 (5) [1, 2, 3, 4, 5]
3 2 (5) [1, 2, 3, 4, 5]
4 3 (5) [1, 2, 3, 4, 5]
5 4 (5) [1, 2, 3, 4, 5]

아래의 방법으로 원본배열 numbers 를 직접 수정할수는 있다.
하지만 원본 배열을 직접 수정하는 것보다는 map을 사용하는 것이 좋은 방법.
(함수형 프로그래밍의 원칙 중 하나로, 불변성(immutability)을 유지하여 예측 가능하고 오류를 방지하는 데 도움이 되기 때문)

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, index, arr) => {
  arr[index] = num * 2;
});
console.log(numbers); // [2, 4, 6, 8, 10] 수정된 배열 출력

map : 새로운 Array를 반환 => 리턴 값이 있다.  a변수에 map을 재할당하지 않는 이상, a 배열을 변경시키지는 않는다.

let a = [1,2,3,4,5]

let b = a.map(function(item){
    return item*2
})

console.log(a) //(5) [1, 2, 3, 4, 5]
console.log(b) //(5) [2, 4, 6, 8, 10]

위의 소스를 forEach로 돌리면 리턴값이 없으므로 undefined, 마찬가지로 a 배열을 변경시키지는 않음  

let a = [1,2,3,4,5]

let b = a.forEach(function(item){
    return item*2
})

console.log(a) //(5) [1, 2, 3, 4, 5]
console.log(b) //undefined