[JavaScript] reduce()

가끔 자바스크립트로 알고리즘을 풀 때 종종 어떤 값들의 합을 구해야할 때가 있었는데 그럴 때 reduce() 메소드를 사용하면 반복문을 사용하지 않아도 합을 구할 수 있었다.

이런 경험을 바탕으로 reduce() 메소드에 대해 간략하게 정리해보려고 한다.

 

📌 reduce()

일단 MDN에서는 reduce()를 다음과 같이 정의한다.

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

 

리듀서 함수는 4개의 인자값을 가진다.

1. 누산기(acc)
2. 현재값(cur)
3. 현재 인덱스(idx)
4. 초기값(src)

리듀서 함수의 반환값은 누산기에 할당하고 누산기는 순회 중 유지되므로 결국 최종 하나의 값이 된다.

 

📌 reduce() 사용하기

배열.reduce((누산기, 현재값, 현재인덱스, 요소) => {
  return 결과
}, 초기값);

 

📒 예제 (1-1): 더하기 (초기값 X)

초기값을 넣어주지 않으면 배열의 첫번째 값을 초기값으로 갖는다.

const list = [1, 2, 3, 4, 5];
const result = list.reduce((acc, cur, idx) => {
  console.log(idx, acc, cur);
  return acc + cur;
});

console.log("결과: ", result);

// 결과
1 1 2
2 3 3
3 6 4
4 10 5
결과:  15

📒 예제 (1-2): 더하기 (초기값 O)

const list = [1, 2, 3, 4, 5];
const result = list.reduce((acc, cur, idx) => {
  console.log(idx, acc, cur);
  return acc + cur;
}, 0);

console.log("결과: ", result);

// 결과
0 0 1
1 1 2
2 3 3
3 6 4
4 10 5
결과:  15

 

📒 예제 (2-1): 배열 -> 객체 (1)

reduce()는 배열을 객체로 변환하는데도 사용할 수 있다.

idx를 키값으로 갖는 객체이다.

const names = ["김", "이", "박", "정", "최"];
const result = names.reduce((acc, cur, idx) => {
  acc[idx] = cur;
  return acc;
}, {});
console.log(result);
// { '0': '김', '1': '이', '2': '박', '3': '정', '4': '최' }

📒 예제 (2-2): 배열 -> 객체 (2)

const names = ["김", "이", "박", "정", "최", "김", "최", "정", "이", "이"];
const result = names.reduce((acc, cur) => {
  if (!acc[cur]) {
    acc[cur] = 0;
  }
  acc[cur] += 1;

  return acc;
}, {});
console.log(result);
// { '김': 2, '이': 3, '박': 1, '정': 2, '최': 2 }

 

📒 예제 (3): 중복제거

reduce()는 중복을 제거하는데도 사용할 수 있다.

const names = ["김", "이", "박", "정", "최", "김", "최", "정", "이", "이"];
const result = names.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }

  return acc;
}, []);
console.log(result);

// 결과
[ '김', '이', '박', '정', '최' ]