[JavaScript] .reduce() 활용하기

 

 

 

---

목차

1. Array.prototype.reduce()

2. 예제

---

 

 

1. Array.prototype.reduce()

---

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

 

reduce는 보통 배열의 요소들을 하나의 결과로 합치는 용도로 많이 사용한다.

 

- 구문

arr.reduce(callback[, initialValue])

 

구문을 이루는 각 요소들은 다음과 같다.

 

1. callback function

reduce 함수는 네 개의 인자를 가진다.

1. 누산기 (acc): accumulator는 callback함수의 반환값을 누적함
2. 현재 값 (cur): 배열의 현재 요소
3. 현재 인덱스 (idx): 배열의 현재 요소의 인덱스
4. 원본 배열 (src): 호출한 배열

callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환한다.

 

2. initialValue(Optional)

최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생한다.

 

 

2. 예제

---

배열의 각 요소들을 모두 더한 값 reduce 함수를 이용해 구해보자.

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

const balance = movements.reduce((acc, cur, i, arr) => acc + cur, 0);
console.log(balance);

 

 

for 문으로도 값을 구할 수 있지만 reduce를 사용하면 더 짧고 간결하게 코드를 작성 할 수 있다.

let balance2 = 0;
for(const move of movements) balance2 += move;
console.log(balance2); // 3840

 

 

reduce를 이용하여 최댓값을 구해보자.

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

const max = movements.reduce((acc, mov) => {
  if(acc > mov)
  return acc;
  else
  return mov;
}, movements[0]);
console.log(max); // 3000

 

 

 

또한 reduce는 object 배열에도 활용이 가능하다.

let initialValue = 0

let sum = [{x: 1}, {x: 2}, {x: 3}]
sum.reduce(function (tot, el) {
    return tot + el.x
}, initialValue)

console.log(sum) // 6