카테고리 없음

JavaScript) 배열 메소드 reduce 사용하기.

홍구리당당 2023. 10. 30. 22:26

0. 오늘의 배울 것

reduce 메소드를 처음 보고, 뭐... 원소를 찾아서 빼주나? 싶었는데 응~ 아니~

여기서 reduce란, 배열 안에 있는 여러 개의 값을 하나의 값으로 축소 해준다는 의미로 쓰인 것이다.

이게 무슨 뜻이냐면!!

예를 들어 배열 전체 원소의 값을 더하는 sum 은 배열의 모든 원소들을 하나의 값으로 축약시켜둔 것이다. 이렇게 배열 내부를 순회하면서, 배열의 원소를 가지고 코드 동작을 하여 하나의 값을 리턴해준다는 것이다.

reduce 함수는 다른 배열 메소드 (find, filter, some, every, forEach, map..) 과는 조금 다르게 생겼으니 이번 기회에 잘 알아보자.

reduce 메소드는 인자로 콜백 함수를 받고, 콜백함수는 파라미터로 최대 4개를 받을 수 있다.

{배열 이름}.reduce((acc, el, i, arr) => {
    return nextAccValue;
}, initialAccValue);

콜백함수.
initialAccValue : 최초의 콜백 함수가 실행될 때 acc 파라미터에 전달될 초기 누산값. 생략 가능한 파라미터로, 이 값을 생략하면 0번 인덱스에서의 콜백함수를 생략하고 1번 인덱스에서부터 콜백 함수가 실행된다.

// 각 원소의 값을 모두 더해 리턴해준다.

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

const sumAll = nums.reduce((acc, el)=>{
    return acc + el;
}, 0);

console.log(sumAll);

먼저 0번 인덱스의 원소 1에 대해 콜백 함수가 실행된다. acc 자리에는 초기 누산기 값인 0이 들어가고, el 자리에는 0번 인덱스 원소 1이 들어가면서 콜백함수는 0 + 1 = 1 값을 리턴해준다.
두 번째 콜백 함수가 실행될 땐 이전 콜백함수가 리턴한 1 값을 acc로 받고, el에는 1번 인덱스 원소인 2를 받아 1 +2 값인 3을 리턴해준다.
세 번째 콜백함수가 실행될 땐 이전 콜백함수가 리턴한 3 값을 acc로 받고 el에는 2번 인덱스 원소인 3을 받아 3 + 3 값인 6을 리턴해준다.
네 번째 콜백함수가 실행될 땐 이전 콜백함수가 리턴한 6 값을 acc로 받고 el에는 3번 인덱스의 원소인 4를 받아 6 + 4 값인 10을 리턴해준다.
마지막으로 리턴된 값을 sumAll 변수에 할당해준다.

위에서 말했듯이 reduce의 두 번째 인자인 initialAccValue 값을 생략해도 동작하긴 한다. 그런데 0번 인덱스 원소에서부터 콜백함수가 실행되지 않고, 1번 인덱스 원소에서부터 콜백이 실행되면서 1번 콜백의 acc 값으로 0번 인덱스 원소가 들어간다.


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

const sumAll = nums.reduce((acc, el)=>{
    return acc + el;
};

초기 누산값이 없으므로 0번 인덱스는 건너뛴다.

1번 인덱스에서 콜백 함수를 실행하는데, 이 때 acc 값에는 0번 인덱스 값인 1을 넣어준다. 따라서 이번 콜백 함수는 1 + 2 = 3 값을 리턴해준다.
2 번 인덱스에서 콜백 함수를 실행하는데, acc 인자에 이전 리턴 값인 3을 받고 3 + 3 = 6 값을 리턴한다.
3번 인덱스에서 콜백 함수를 실행하는데 acc 인자에 이전 리턴 값인 6을 받고 6 + 4 = 10 값을 리턴해 sumAll 에 할당해준다.

지금 이 예시는 간단하기 때문에 reduce 두 번째 인자를 생략해도 결과가 동일하게 나왔다.

그렇지만 지금 보다시피 인자를 생략하면 0번 인덱스에 대한 콜백을 건너 뛰기 때문에, 콜백 함수가 복잡해지면 에러가 날 수 있다!!

그러니 꼭!! 빼먹는 인자 없이 reduce 메소드를 잘 써주자.

reduce 메소드는 배열 전체를 순회하면서 어떠한 값을 도출할 때 유용하다.
이전 배열 메소드들과 달리 reduce 메소드는 인자를 2 개까지 받는다. (콜백함수, 초기누산값)
이전 배열 메소드들과 달리 reduce 메소드의 콜백함수는 인자를 4 개까지 받을 수 있다.(누산기, 배열 원소, 배열 인덱스, 배열 그 자체)