JS. reduce

wkahd01·2021년 7월 25일
1

JavaScript

목록 보기
6/25

✅ reduce 메서드란?

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

공부하기 전에 한 가지 알아두어야 할 것은, reducemap, filter, sort 등을 모두 구현할 수 있는 근본있는 메서드라는 것이다.

리듀서 함수는 다음과 같이 4가지의 인자를 가진다.

  • accumulator
    acc: 누적 값
  • currentValue
    cur: 현재 값
  • currentIndex
    현재 값 index
  • array
    reduce() 를 호출한 배열

여기서 주로 쓰이는 인자는 accumulatorcurrentValue이다.
이 2가지만 가지고도 우리는 많은 작업들을 reduce로 할 수 있어진다


✅ reduce의 다양한 활용법

📕 sum

[1,2,3,4,5] 와 같은 배열의 내부 합을 구한다고 해보자.
기존에는 다음과 같이 for문을 통해 sum을 구했었다.

sum with for

const array = [1, 2, 3, 4];
let sum = 0;

for (let i = 0; i < array.length; i++) {
    sum += array[i];
}
console.log(sum);

for문으로 각각의 배열 요소들을 sum에 더해주는데, reduce의 acc와 cur을 쓰면 이 과정이 훨씬 간편해진다.

sum with reduce

[1,2,3,4,5].reduce((acc,cur)=>acc+cur);
// 15

📙 map

[1,2,3,4]와 같은 배열의 내부 요소에 2씩 곱해 [2,4,6,8]과 같은 배열을 만들어보자.
이런 문제들은 map을 사용해 간단하고 직관적이게 해결했었다.

[1,2,3,4].map(num=>num*2);

map with reduce

이러한 map의 기능을 reduce를 통해서도 구현할 수 있다.
acc에 단순히 값을 더하는게 아닌, acc라는 배열에 cur값들을 push한다는 생각으로 접근할 수 있다.

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

const MapNumbers = (acc,cur)=>{
    acc.push(cur*2);
    return acc;
}

const result = numbers.reduce(MapNumbers,[]);
console.log(result);

📗 filter

필터는 배열에서 원하는 요소들을 필터링 해주는 메서드이다.
사용법은 다음과 같다.

[1,2,3,4,5,6].filter(num=> num >= 4);

1부터 6까지 담겨있는 배열에서 4 이상의 값들을 필터링해줬다.

filter with reduce

filter 조차도 reduce를 통해 구현 가능하다.

const numbers = [1,2,3,4,5,6];

const FilterNumber = (acc,cur)=>{
    cur>=4 && acc.push(cur);
    return acc;
}
const result = numbers.reduce(FilterNumber,[]);
console.log(result);

cumr>=4가 참이면 &&를 통해 acc.push(cur)를 하도록 만들어 주었다.

📘 객체 내의 값 인스턴스 개수 세기

집의 전자제품의 제조사를 다음과 같이 배열에 저장했다고 치자.
['Samsung',LG','Samsung', 'Sony', 'Apple']
이제, 각 제조사별로 소유하고 있는 개수를 객체를 통해 구하려고 한다.
ex) {'Samsung': 2}

const Makers = ['Samsung','LG','Samsung', 'Sony', 'Apple'];

const sortMakers = (acc,cur)=>{
    cur in acc ? acc[cur]++ : acc[cur]=1
    return acc
}
const result = Makers.reduce(sortMakers,{})
console.log(result)

cur in acc: acc라는 객체 내부에 cur이라는 키가 존재하면
acc[cur]++: 값에 1을 더해준다.
만약, 키가 존재하지 않으면 acc[cur]=1을 통해 키:값을 초기화 해준다.

✅ 그래서 reduce는 왜 쓰나요?

여기까지 공부했다면 한가지 드는 의문점이 있다.

"아니 아까는 reduce가 과정을 줄여줘서 좋은거 아니였어? map, filter 등 메서드를 쓰는게 더 간편한데? "

라고 말이다.
reduce의 진짜 무기는 다양한 활용도에 있다.

reduce를 통해 단순한 연산부터 복잡한 함수형 프로그래밍까지 모두 다룰 수 있다.

참고한 블로그

profile
꾸준하게 공부하기

0개의 댓글