배열의 reduce 메서드

kind J·2022년 3월 21일

JavaScript array front end method reduce 고차함수 평균구하기

Array.prototype.reduce()

reduce 메서드는 배열의 메서드 중 강력한 기능을 가진 메서드 중 하나이다.
reduce 는 사전적 의미로 '줄이다' 라는 뜻이다. 배열의 여러개의 값을 하나의 값으로 축소해준다.

◈ reduce 메서드

array.reduce(콜백함수, 초기값)

reduce 메서드는 고차 함수이다. 첫번째 인수 자리에 콜백함수가 들어온다. 두번째 인수 자리(생략가능)에는 초기값이 들어온다.
reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 이때 원본 배열은 변경 되지 않는다.

reduce 메서드의 콜백함수에도 4개의 인수가 있다.
이론으로만 설명하면 모호할 수 있으니 reduce 메서드를 활용한 예시를 들어 설명해보겠다.
일반적으로 reduce 메서드는 배열 요소들의 평균을 구할 때 많이 쓴다.

평균구하기

const array1 = [20, 35, 1, 98, 46, 5];
array1.reduce((a, b) => (a + b)) / array1.length; 
//결과 : 205

위의 표현식은 (20 + 35 + 1 + 98 + 46 + 5 ) / array.length 를 계산한 것과 같다.
그렇다면 어떻게 위의 결과가 나오는지 순서대로 하나씩 따져보자.

(1) a : 20, b : 35
(2) a : 55(20 + 35), b : 1
(3) a : 56(20 + 35 + 1), b : 98
(4) a : 154(20 + 35 + 1 + 98), b : 46
(5) a : 200(20 + 35 + 1 + 98 + 46), b : 5
(6) array1.reduce((a, b) => (a + b)) 에서 return 되는 값 = a + b = 205 
(7) 205 / 6 = 34.166666666666664

◈ reduce 메서드의 콜백함수의 인수

array1.reduce((a, b) => (a + b))

1) 1번째 인수 : 누적값, 2번째 인수 : 현재값

reduce 메서드의 첫번째 인수인 콜백함수의 a는 누적 값, b 는 현재 값이다.
reduce 를 호출했을 때 return 되는 값은 마지막 최종 누적값이다.

reduce 메서드의 두번째 인수 초기값이 있다면,
초기 값은 reduce 메서드의 콜백함수의 첫번째 순회의 누적 값이 된다.
초기값 자리가 비어있다면 배열의 첫번째 요소가 콜백함수의 첫번째 누적 값이 된다.
단, reduce 메서드를 호출할 때 초기값을 생략하지 않고 언제나 전달하는 것이 안전한다.

[1, 2, 3, 4].reduce((a, c) => (a * c), 1); //24
//a : 1, c: 1
//a : 1, c : 2
//a : 2, c : 3
//a : 6, c : 4

[1, 2, 3, 4].reduce((누적값 , 현재값) => (누적값 + 현재값), 초기값);

2) 3번째 인수 : index

array1.reduce((a, b, i) => {a[i] = c; return a}, {})

reduce 메서드 콜백함수 세번째 인수에 index 가 들어온다.
reduce 메서드를 호출한 배열의 현재 순회하는 요소의 index를 가져올 수 있다.

3) 4번째 인수 : this

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

4번째 인수는 reduce 메서드를 호출한 배열 자체이다.

결론

reduce 메서드의 콜백함수에는 총 4개의 인수가 존재한다.
1) 1번째 : 초기값 또는 누적값(콜백함수의 이전 반환값)
2) 2번째 : 현재값 (reduce 메서드를 호출한 배열의 요소값)
3) 3번째 : index (reduce 메서드를 호출한 배열의 요소값의 index)
4) 4번째 : this (reduce 메서드를 호출할 배열자체)

◈ 참고

아래 3개의 문은 모두 같은 표현이다. reduce 메서드를 사용할 때는 반드시 값을 리턴(return)해주어야 한다.
단, return 과 { 가 만나면 생략이 가능하다. 즉, return 안의 문이 하나일 경우에는 return 과 {} 를 생략해 줄수 있다. 식을 괄호()로 묶는 것은 상관 없다.

[1, 2, 3, 4].reduce((a, c) => return {a + c});
[1, 2, 3, 4].reduce((a, c) => a + c);
[1, 2, 3, 4].reduce((a, c) => (a + c));

◈ 활용

reduce 메서드는 배열을 객체로 바꾸는것도 가능하게 한다.

['철수', '영희', '현영', '한솔'].reduce((a, c, i) => {a[i] = c; return a}, {})
// a : {}, c : '철수', i : 0
// a : {0 : 철수} , c : '영희', i : 1
// a : {0 : '철수', 1 : '영희'}, c : '현영', i : 2
// a : {0 : '철수', 1 : '영희', 2 : '현영'}, c : '한솔', i : 3
//return => {0 : '철수', 1 : '영희', 2 : '현영', 3 : '한솔'}

reduce 메서드를 활용해서 아래의 항목들을 구현할 수 있다.