[JS] reduce() 함수 및 응용 정리

Array.prototype.reduce()

const array1 = [1, 2, 3, 4];

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

console.log(sumWithInitial);
// Expected output: 10

reduce() 함수는 배열의 각 요소에 대해 callback을 실행할 때 마다 이전 요소에 대한 실행 결과를 전달하여 단 1개의 출력 결과를 만듭니다.

​

즉, 배열 원소를 입력으로하여 1개의 수치 또는 문자열 또는 배열 또는 딕셔너리를 만듭니다. 그래서 "줄이다"는 의미의 reduce 라는 이름을 얻었습니다.

​

예를 들어 배열 원소들의 전체 합을 구하거나 최대 값을 구할 수 있습니다. 또한 배열을 펼치거나 배열 원소들의 개수를 셀 수도 있습니다.

 

1) 배열 원소들의 합 구하기

// 합을 구한다
let total = [1, 2, 3, 4, 5].reduce(
  ( acc, curr ) => acc + curr, 
  0
);
console.log(total) // 결과값: 15

숫자 리스트의 전체 합을 구합니다. 초기값은 합을 구하므로 0에서 부터 시작합니다.

// 딕셔너리의 quntity(수량)
let total = [{quntity: 1}, {quntity: 2}, {quntity: 1}].reduce(
    (acc, cur) => acc + cur.quntity
    , 0
)
console.log(total) // 결과값: 4

 

2) 배열 원소들 중 최대값 구하기

// 최대값을 구한다
let max = [1, 2, 3, 4, 5].reduce(
  ( max, cur ) => Math.max( max, cur ), 
  -Infinity
);
console.log(max) // 결과값: 5

음수무한대부터 초기화하고 가장 큰 값을 구합니다.

참고로 Math.max( ) 함수를 이용해서 배열 원소들의 최대 값을 바로 구할 수 있습니다. (최하단 소스코드 참고)

 

3) 배열안에 배열이 있는 원소들을 펼치기

// 여러 배열을 펼친다
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( acc, cur ) => acc.concat(cur),
  []
)
console.log( Math.max(1, 2, 3) ); // [0, 1, 2, 3, 4, 5]

배열안에 배열이 있는 경우 순회하면서 concat으로 붙여서 펼처진 배열을 구할 수 있습니다.

 

4) 배열을 딕셔너리로 변환하기

// 배열을 딕셔너리로 변환한다 
let rr = ["lion", "tiger"].reduce(
  ( result, curr ) => {
	result[curr] = curr;
	return result;
  }, 
  {}
);
console.log(rr) // 결과값: {lion: "lion", tiger: "tiger"}

초기값은 { } 로 빈 딕셔너리로 지정하고 return에 결과가 다시 입력으로 사용될 수 있도록 합니다.

let countedNames = ['A', 'B', 'A', 'A', 'B'].reduce(function (result, cur) { 
  if (cur in result) {
    result[cur]++
  } else {
    result[cur] = 1
  }
  return result
}, {})
console.log(countedNames) // {A: 3, B: 2}

배열 원소들의 출현 개수를 세고 딕셔너리 형태로 구합니다.

 

6) 딕셔너리에서 값이 비어있는 경우 필터링하기

const params = {"hobby":"", "address":"seoul"}
const filteredParams = Object.keys(params).reduce(function (filtered, key) {
      if (params[key] !== "") filtered[key] = params[key];
      return filtered;
    }, {});
console.log('params:', params) // params: {hobby: "", address: "seoul"}
console.log('filteredParams:', filteredParams) // filteredParams: {address: "seoul"}

👉🏻 Object.keys, reduce 사용하는 방법

const params = {"hobby":"", "address":"seoul"}
const filteredParams = Object.entries(params)
                       .filter(([key, value]) => value !== "")
                       .reduce((result, [key, value]) => ({...result, [key]:value}), {});
	
console.log('params:', params) // params: {hobby: "", address: "seoul"}
console.log('filteredParams:', filteredParams) // filteredParams: {address: "seoul"}

👉🏻 Object.entries, filter, reduce 사용하는 방법