Javascript - reduce()

 

Javascript reduce는 배열의 각 요소에 대해 callback을 실행하며 단 1개의 출력 결과를 만듭니다.

​

즉 배열 원소를 입력으로 하여 1개의 수치 또는 문자열 또는 배열 또는 딕셔너리를 만듭니다.

그래서 "줄이다"는 의미의 reduce라는 이름을 얻었습니다.

​

예를들어 배열 원소들의 전체 합을 구하거나 최대값을 구할 수 있습니다.

또한 배열을 펼치거나 배열 원소들의 개수를 셀 수도 있습니다.

​

reduce( )함수는 아래 형식으로 입력합니다.

array.reduce(callback(accumulator, currentValue[, index[, array]] )[, initialValue]);

​​

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

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

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

딕셔너리의 quntity(수량)의 전체 합을 구합니다.

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

​

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

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

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

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

​

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

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

// 여러 배열을 펼친다 
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]

​

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

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

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

​

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

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) 딕셔너리(키:값)에서 값이 비어있는 경우 필터링하기

​취미와 주소가 저장된 딕셔너리 값이 비어있는 경우 해당 엘리먼트를 필터링합니다.

​

Object.keys, reduce 사용하는 방법

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.entries, filter, reduce 사용하는 방법

(Object.entries( )는 for...in와 같은 순서로 [key, value] 쌍의 배열을 반환합니다.)

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"}

둘 방법 모두 취미(hobby)가 비어있으므로 필터링되고 주소(address) 엘리먼트만 남았습니다.