간단하지만, 자주 헷갈려서 정리를 해놓는다.

forEach

• forEach(): Array 요소를 제공된 함수로 한 번 실행한다.
• 콜백 함수를 인자로 받아, 배열의 각 요소에 콜백함수를 실행한다. 아무 값도 반환하지 않는다.
• 일반적인 forEach문은 다음과 같다.

arr.forEach(function(ele, idx, arr) {
    console.log(ele);
});

• forEach() 메소드는 아무것도 리턴하지 않는다(undefined).
• forEach()는 배열을 변형하지 않지만, 콜백함수로 현재 배열을 변환할 수 있다.
• forEach()의 콜백함수의 인자는 총 세개(배열요소, 인덱스, 배열자체) 로 세번째 인자를 건드리면 배열을 변환할 수 있다.

let arr = ["aaa", "bbb", "ccc", "ddd"];

arr.forEach(function (item, index, array) {
    array[index] = item + "EDIT";
});

console.log(arr);
// ["aaaEDIT", "bbbEDIT", "cccEDIT", "dddEDIT"]

• forEach문은 구문 밖으로 return값을 받지 못한다.

let arr = [1,2,3,4,5];
let newArr = arr.forEach(function(ele, idx) {
  return ele;
});
// undefined

• forEach()는 map()과 reduce()와는 달리 undefined를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없다. 대표적인 사용처는 메서드 체인 끝에서 side effect 를 실행하는 것이다.

map

• map(): 모든 Array 요소가 제공된 함수로 호출될때 새로운 array를 생성한다.
• 기존의 배열을 이용해, 새로운 배열을 생성할 때 사용한다. 콜백 함수를 인자로 받아, 배열의 각 요소에 대해서 실행한 결과 값을 반환한다.
• map을 사용하면, 결과값을 배열로 받을수 있기 때문에, 함수 안의 결과값을 계산하지 않고 배열로 받기 위해서는 map을 사용하는 게 유리하다.
• 일반적인 map 실행 방법

let newArr = arr.map(function(ele, idx, arr) {
  return condition;
});

• map의 경우 요소가 아닌 새로운 값을 만들어서 return할 수 있다. return값 자체를 반환한다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(ele, idx, arr) {
  return ele + 1;
});
// 2, 3, 4, 5, 6