JavaScript - Array reduce() 사용 방법

Javascriptarray

자바스크립트에서 Array의 reduce()는 배열의 모든 요소들에 대해서 각각 연산을 수행하여 하나의 결과 값을 계산하는 함수입니다. 예제와 함께 Array.reduce()의 사용 방법에 대해서 알아보겠습니다.

1. Array.reduce()

reduce()는 배열의 모든 요소들에 대해서 연산을 수행하여 하나의 결과 값을 리턴합니다.

예를 들어, reduce()를 사용하면 배열의 모든 숫자를 순차적으로 더해서 10이라는 결과를 계산할 수 있습니다.

const arr = [1, 2, 3, 4];
// (1 + 2 + 3 + 4) = 10

배열의 모든 요소를 한번에 계산하는 것은 아니고, 두개의 요소를 계산하고, 그 결과를 다음 요소와 함께 계산하고, 그 결과는 다음 요소와 계산하는 방식으로 연산을 분할해서, 점진적으로 계산하는 것입니다. 즉, 위의 예제의 경우 1과 2의 합을 계산하고, 그결과인 3을 다음 요소인 3과 합하고, 그 결과인 6을 다음 요소인 4와 합하여 10을 계산하고, 이 값을 리턴합니다.

2. Array.reduce()로 배열 모든 요소의 합 계산

아래와 같이 reduce(func, initialValue)처럼 함수와 초기 값을 전달하면, 초기 값과 배열의 요소들이 순차적으로 함수에 전달됩니다. 연산 결과는 다시 함수로 전달되며, 다음 배열의 요소와 계산을 하고 그 결과를 다음 함수에 넘깁니다. 이렇게 모든 요소에 대해서 연산을 마치면 하나의 결과를 리턴합니다.

아래 예제는 arrow function을 이용하여 간단히 reducer 함수를 구현하였습니다. previousValue와 currentValue가 함수로 전달되면 이 두개의 값을 합하고 다음 계산을 위해 전달합니다. (자세한 연산 과정은 아래에서 설명합니다.)

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

const initialValue = 0;
const sumWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

// 0 + 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

10

3. Array.reduce() Syntax 및 예제

reduce()는 callback 함수와 초기값을 인자로 받으며, 초기값은 생략될 수 있습니다.

arr.reduce(callback, initialValue)

함수는 아래와 같이 3개의 인자를 받습니다.

  • accumulator : 누적된 계산 값
  • currentValue : 함수에서 계산에 사용되는 요소
  • currentIndex : 현재 배열 요소의 Index
  • array : 배열 객체
function func(accumulator, currentValue, currentIndex, array)

3.1 연산 순서를 볼 수 있는 reduce() 예제

위의 예제에서, reduce()에 함수를 전달할 때 arrow function으로 구현한 객체를 전달했었는데, 일반적인 함수를 사용하여 아래와 같이 다시 구현해보았습니다. 또한 로그를 출력하여 acc, currentValue 등 계산 과정을 쉽게 볼 수 있도록 하였습니다.

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

function func(accumulator, currentValue, currentIndex, array) {
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", curIndex: " + currentIndex + ", array: " + array);
  return accumulator + currentValue;
}

const initialValue = 0;
const sumWithInitial = arr.reduce(func, initialValue);

// 0 + 1 + 2 + 3 + 4
console.log(sumWithInitial);

위 코드의 실행 결과를 보면, 리턴 값은 다음 함수의 accumulator 인자로 전달된다는 것을 알 수 있습니다. 그리고 첫번째 함수 계산에서 accumulator는 인자로 전달된 initialValue이고, currentValue는 배열의 0번 Index 요소라는 것을 알 수 있었습니다.

acc: 0, cur: 1, curIndex: 0, array: 1,2,3,4
acc: 1, cur: 2, curIndex: 1, array: 1,2,3,4
acc: 3, cur: 3, curIndex: 2, array: 1,2,3,4
acc: 6, cur: 4, curIndex: 3, array: 1,2,3,4
10

3.2 초기 값을 생략한 reduce() 예제

아래와 같이 reduce()에 initialValue를 전달하지 않고 생략할 수 있습니다.

코드를 실행해보면, 첫번째 함수 계산에서 accumulator는 배열의 Index 0 요소로 전달되며, currentValue는 배열의 Index 1 요소로 전달됩니다. currentIndex는 1이 됩니다.

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

function func(accumulator, currentValue, currentIndex, array) {
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", curIndex: " + currentIndex + ", array: " + array);
  return accumulator + currentValue;
}

const sumWithInitial = arr.reduce(func);

// 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

acc: 1, cur: 2, curIndex: 1, array: 1,2,3,4
acc: 3, cur: 3, curIndex: 2, array: 1,2,3,4
acc: 6, cur: 4, curIndex: 3, array: 1,2,3,4
10

3.3 불필요한 인자를 생략한 reduce() 예제

이 글의 예제를 보면, 연산과정에서 reducer 함수는 accumulator와 currentValue 인자만 필요합니다.

아래와 같이 다른 인자들은 모두 생략하고 필요한 것만 인자로 받아 계산을 할 수 있습니다.

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

function func(accumulator, currentValue) {
  let sum = accumulator + currentValue;
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", sum: " + sum);
  return sum;
}

const sumWithInitial = arr.reduce(func);

// 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

acc: 1, cur: 2, curIndex: 1, array: 1,2,3,4
acc: 3, cur: 3, curIndex: 2, array: 1,2,3,4
acc: 6, cur: 4, curIndex: 3, array: 1,2,3,4
10

3.4 Arrow function(Lambda)을 이용한 reduce() 예제

Arrow function을 이용하면, 아래와 같이 함수를 직접 구현하지 않고 reduce()에 함수를 전달할 수 있습니다. 여기서 initialValue가 불필요하면 생략할 수 있습니다.

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

const initialValue = 0;
const sumWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

// 0 + 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

10
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha