Array.prototype.reduce()

Array.prototype.reduce()

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

arr.reduce(function(acc, cur){콜백함수},(initialValue)}

📌 매개변수로 올 수 있는 것들

• accumulator
  첫 번째 호출일 경우: initialValue 값(초기값)
  👉 initialValue값이 없을 때 : 배열의 첫번째 값
  그 외 : 콜백의 이전 반환값
• currentValue : 현재 값
  initialValue 값(초기값)이 주어진 경우: 배열의 첫번째 값
  👉 initialValue값이 없을 때 : 배열의 두번째 값
• currentIndex : 현재 인덱스 (initialValue을 제공한 경우: 0, 그 외 : 1)
• array : reduce()를 호출한 배열

reduce 작동방식을 좀 더 직관적으로 이해하기 위해 표를 그려보았다.
예제1

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) =??

따라서 sum을 콘솔창에 찍어보면 6이 나온다.

예제2

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
function(accumulator, currentValue) {
 return accumulator.concat(currentValue);
},[]);

결과값 : [0, 1, 2, 3, 4, 5] 도출

예제3

const data = ["car", "car", "truck", "truck", "bike", "walk", "car",  "van", "bike", "walk", "car", "van", "car", "truck"];
const transportation = data.reduce((obj, item) => {
        if (!obj[item]) {
          obj[item] = 0;
        }
        obj[item]++;
        return obj;
      }, {});

이렇게 callback함수가 호출되면, 최종적으로는

{ }.car = 5
.truck = 3
.bike = 2
.walk = 2
.van = 2
즉, { car : 5, truck : 3, bike: 2, walk : 2, van : 2 }가 된다.

🥑 속성으로 객체 분류하기

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property){
  return objectArray.reduce(function(acc, obj){
    let key = obj[property];
    if(!acc[key]){
    	acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  },{});
}

var groupedPeople = groupBy(people, 'age');