[Javascript] map, forEach, reduce에 대하여

Array.prototype.forEach

forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드 이다. map() 메서드와 거의 비슷하지만 차이점은 따로 return하는 값이 없다는 점이다.

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

const newArr = arr.forEach((요소, index, array) => {
  console.log(`요소: ${요소}`);
  console.log(`index: ${index}`);
  console.log(array);
});

console.log(newArr);

//결과
요소: 1
index: 0
[ 1, 2, 3, 4, 5 ]
요소: 2
index: 1
[ 1, 2, 3, 4, 5 ]
요소: 3
index: 2
[ 1, 2, 3, 4, 5 ]
요소: 4
index: 3
[ 1, 2, 3, 4, 5 ]
요소: 5
index: 4
[ 1, 2, 3, 4, 5 ]
undefined

위의 결과처럼 forEach의 첫번째 인자로는 각 요소, 두번째 인자로는 인덱스번호, 세번째 인자로는 해당 배열이 들어있다.

map메서드와 차이는 따로 콜백함수가 return하는 값을 모아서 처리하는 과정이 없기 때문에, 메서드를 호출한 코드를 함수에 할당하면 undefined가 나온다.

---

Array.prototype.map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const arr = [1, 2, 3, 4, 5];
let newArr = arr.map((요소, index) => {
  console.log("요소는 : ", 요소);
  console.log("인덱스번호는 : ", index);
  return 요소;
});
//결과
요소는 :  1
인덱스번호는 :  0
요소는 :  2
인덱스번호는 :  1
요소는 :  3
인덱스번호는 :  2
요소는 :  4
인덱스번호는 :  3
요소는 :  5
인덱스번호는 :  4

map()의 기본 원리는 반복문을 돌며 배열 안의 요소들을 1:1로 짝지어 주는 것이다. 콜백함수의 첫번째 인자로는 요소가, 두번째 인자로는 인덱스번호가 들어가게 된다. 여기서 중요한 점은 newArr은 arr과 전혀 다른 객체 라는 것이다.

map은 기존 배열을 수정하지 않고 새로운 배열을 만들어 낸다. 하지만 배열 내에 객체가 있는 경우, 그 객체는 공유된다.

 

---

Array.prototype.reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.

reduce() 메서드는 4가지의 인수를 가진다.

• accumulator : callback 함수의 반환값을 누적한다.
• currentValue : 배열의 현재 요소
• index(optional) : 배열의 현재 요소의 인덱스
• array(optional) : 호출한 배열

callback함수의 반환값은 accumulator에 할당하고 순회중 계속 누적되어 최종적으로 하나의 값을 반환한다.

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

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const newArr = arr.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(newArr); //15