[TIL] 배열 고차 함수 - (1) reduce 함수

Cottonmycotton·2021년 11월 11일

TIL

목록 보기

8/16

reduce메서드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 반환한다. 원본 배열은 변경되지 않는다. 사용문법은 다음과 같다.

✔️ 1. 사용문법

arr.reduce(callback, [initalValue])

📌 1-1. callback - reduce는 총 네 개의 인수를 가진다

누산기(accumulator)

초기값 또는 콜백 함수의 이전 반환값을 받아 누적한다.

현재값(currentValue)

reduce를 호출한 배열의 요소값.

현재 인덱스(index)

인덱스

원본 배열(array)

reduce를 호출한 배열 자체

📌 1-2. initialValue - 초기값

초기값

최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 설정하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce를 호출하면 오류가 발생한다.

💡 2. 예제 및 풀이

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur, idx, arr) => acc + cur, 0);
// 10

1) 초기값으로 설정해준 0이 acc가 된다.
2) 배열의 첫 번째 요소인 1이 cur이 된다.
3) acc(0)와 cur(1)이 더해져서 acc가 1가 된다.
4) 배열의 두 번째 요소인 2가 cur이 된다.
5) acc(1)과 cur(2)이 더해져서 3이 acc가 된다.
6) 배열의 세 번째 요소인 3이 cur이 된다.
7) acc(3)과 cur(3)이 더해진 6이 acc가 된다.
8) 배열의 마지막 요소인 4와 acc(6)이 더해져 결과값은 10이 된다.

reduce메서드는 초기값과 배열의 첫 번재 요소값을 콜백 함수의 인수로 전달하며 호출하고 다음 순회에는 콜백 함수의 반환값과 두 번째 요소값을 콜백 함수의 인수로 전달하면서 호출한다. 이런 과정을 반복하여 reduce메서드는 하나의 결과값을 반환한다.

reduce메서드는 자신을 호출한 배열의 모든 요소를 순회하며 하나의 결과값을 구해야 하는 경우에 사용한다.

✔️ 3. 활용하기

📌 3-1. 평균 구하기

const arr = [1, 3, 6, 7, 4, 9];
const result = arr.reduce((acc, cur, idx, arr) => {
  if (idx === arr.length - 1) {
    return (acc + cur) / arr.length;
  } return acc + cur;
},0);
// 5

마지막 순회가 아니면 누적값을 반환하고 마지막 순회면 평균을 구해 반환한다.

📌 3-2. 중복 요소 제거

const arr = [1, 2, 1, 1, 2, 3, 4];
const result = arr.reduce((acc, cur, idx, arr) => {
  if (arr.indexOf(cur) === idx) {
    acc.push(cur);
  }
  return acc;
}, []);
// [1, 2, 3, 4]