[JavaScript] array reduce 사용 같은 키의 값끼리 묶고 더하기

안녕하세요. 소다맛사탕 입니다.

JavaScript 배열에서 reduce() 함수를 사용하여 1차원 배열과 2차원 배열의 같은 값끼리 묶고 더하는 알고리즘을 구현해 보겠습니다.

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

---

＊ 1차원 배열

console.log("console 결과");
var data = ["b", "a", "c", "a", "d", "c"];
const deDupData = new Set(data);            // 배열을 SET에 담아 재선언
const uniqData = [...deDupData];            // 중복 제거

// 중복 제거 데이터  =>  a 값 맨 마지막으로 위치(정렬)
uniqData.sort((a,b)=> (a === 'a') - (b === 'a') || b - a);
console.log(JSON.stringify(uniqData));

const resultData = data.reduce((el,vl)=> {
    el.set(vl, (el.get(vl)||0) + 1) ;
    return el;
}, new Map());
var atData = [];
for (let [key, value] of resultData.entries()) {
    atData.push({value: value, name: key});
}
console.log(JSON.stringify(atData));

// console 결과
// ["b","c","d","a"]
// [{"value":1,"name":"b"},{"value":2,"name":"a"},{"value":2,"name":"c"},{"value":1,"name":"d"}]

---

＊ 2차원 배열

console.log("결과")
var mapData = [
    {type:"a", index:1},
    {type:"b", index:3},
    {type:"a", index:2},
    {type:"c", index:4},
    ];

// type에 해당하는 키 묶기(중복 제거 포함 => Set 사용)
const deDupData = new Set(mapData.map(el => el.type));
const uniqData = [...deDupData];
console.log(uniqData);

// 중복 제거 데이터 type => a 값 맨 마지막으로 위치(정렬)
uniqData.sort((a,b) => (a === 'a') - (b === 'a') || b - a);
console.log(uniqData);


const resultData = mapData.reduce((el,vl)=> ({
    ...el, [vl.type]: (el[vl.type]||0) + vl.index
}), {});
const atData = Object.keys(resultData).map((key) => {
    return { name: key, value: resultData[key] };
});
console.log(JSON.stringify(atData));

// 결과
// {"a", "b", "c"}
// {"b", "c", "a"}
// [{"name" : "b", "value" : "3"},{"name" : "c", "value" : "4"},{"name" : "a", "value" : "3"}]

---

 

set 변수로 배열의 변수를 받아올 때 가장 쉬운 방법은 대괄호 안에서 전개(spread) 연산자를 사용하는 것입니다.

const array = [...set]; // 전개연산자 사용 :  [1, 2, 3]

 

전개 연산자를 별로 안 좋아하신다면 Array.from() 함수를 사용하는 방법도 있습니다.

const array = Array.from(set); // [1, 2, 3]

 

 

※ 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN