reduce()

 

 

배열에서 반복이 필요할 때 for 문을 쓰지 않고 함수로서 작동할 수 있는 방법이 여러가지가 있다.

예를 들어 forEach / map / filter / reduce 등 이 있다.

그 중에서 reduce는 배열의 여러 엘리먼트들의 개수를 원하는 기능을 만들어 엘리먼트 개수를 축소시키는 함수이다.

그래서 reduce 함수가 작동이 되면 배열의 길이 만큼 작동이 반복되면서 결과값을 호출한다.

 

reduce의 작동 원리: 배열 축소

- 배열에서 문자열로

- 배열에서 숫자로

- 배열에서 객체로

=> 여러 개의 값이 담긴 배열이 줄여서 최종적으로 하나의 값으로 만드는 과정

 

 

리듀스의 인자로는

첫번째 함수

두번째 초기값을 인자로 써서 작동할 수 있는데

초기값은 옵션적인 부분이다.

(바로 밑 검정 부분으로 정리된다.)

 

 array.reduce(reducer, [initialValue])      Immutable (기존 정보를 변형시키지 않는다.)

- 리듀서 함수(리듀스 안에 들어가는 첫번째 파라미터!!)는 리턴값이 필요하며, 다음번 리듀서 호출 시, 첫번째 파라미터로 전달됨.

- 리턴 값: 리듀서가 마지막으로 리턴하는 값

- 리듀서 함수의 파라미터 순서

: 순서대로 누적값(accumulator), 현재 엘리먼트(current value), 인덱스(index), 원본배열(array)

                                    밑줄 친 파라미터만 필수적 요소

 

<연습문제>

::: user의 객체 정보가 배열의 형태로 주어졌을 때 색인이 들어간 전화번호부 만들기 :::

//user의 객체 정보가 배열의 형태로 주어졌을 때 색인이 들어간 전화번호부 만들기

let users = [
    {name: 'Tim', age: 40},
    {name: 'Satya', age: 30},
    {name: 'Sundar', age: 50}
]

function makeAddressBook(addressBook, user){
  let firstLetter = user.name[0];
  // firstLetter가 addressBook에 있으면?
  // []안에 user 정보를 푸시한다.
  if(firstLetter in addressBook){
    addressBook[firstLetter].push(user);
  } else {
  // firstLetter가 addressBook 안에 없으면?
  // 빈 배열을 만들고 user 정보를 푸시한다.
    addressBook[firstLetter] = [];
    addressBook[firstLetter].push(user);
  }
return addressBook;
}

users.reduce(makeAddressBook, {}); //**여기서 초기값 설정 꼭 해줘야 한다!

 

::: 결과 :::

let addressBook = {
  T: [
  { name: 'Tim', age: 40}
  ],
  S: [
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
  ]
}

 

• 헷갈렸던 점

함수를 만들 때 엘리먼트들에 다가가는 과정을 accumulator 와 currentValue를 이용해서 배열의 원소에 자동으로 접근할 수 있다는 개념이 익숙하지 않았던게 가장 큰 문제였던 것 같다.