javascript - reduce()

so.oy·2023년 6월 19일

JavaScript method

Today's Study📚

목록 보기

4/5

Array.prototype.reduce()

오늘은 프로그래머스 문제 풀이 중, 꼬리 문자열 문제에서 reduce()를 사용한 다른 사람의 풀이를 보았다.

평소 자주 접하는 함수이지만, 헷갈리던 부분에 대해서 명확하게 알고 사용하고자 reduce()함수에 대해 정리해보았다.🧐

reduce 함수는 “줄이다”라는 의미로 누산기라고 생각하면 된다.

리듀서 함수는 네 개의 인자를 가진다.

누산기 (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)

구문

arr.reduce(callback[, initialValue])

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

accumulator

누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue 값

currentValue

처리할 현재 요소.

currentIndex

Optional처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작

array

reduce()를 호출한 배열.

initialValue

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용하고 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생

사용방법

1. 가장 기본적인 형태

두 개의 인자
- acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
- cur current : 현재 돌고 있는 요소

const numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, cur) => acc + cur);

이것을 풀어서 보면 다음과 같다.

const numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, cur) => {
	return acc + cur;
});

동작 흐름을 자세히 보자면 이렇다.

acc 에는 가장 첫 번째 원소인 '1'를 할당하고 (index 0) cur 에는 나머지 원소인 '2, 3, 4'가 순차적으로 들어간다.

acc += cur; // 1 += 2;
acc += cur; // 3 += 3;
acc += cur; // 6 += 4;

console.log(acc); // 10

2. 초기값이 추가된 형태

2개의 인자 + 1개의 초기값
- acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
- cur current : 현재 돌고 있는 요소
- initialValue : acc의 초기값 (optional)

const numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);

내가 가장 헷갈렸던 부분이 이 부분이다.

초기값을 할당할 경우 배열의 인덱스는 할당된 초기값이 인덱스 0번이 되어 돌아간다.

acc += cur; // 0 += 1;
acc += cur; // 1 += 2;
acc += cur; // 3 += 3;
acc += cur; // 6 += 4;

console.log(acc); // 10

하나 더 예시를 들어보자면, 다음과 같이 초기값 initialValue 를 10으로 할당했을 때, 동작은

const numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 10);
console.log(sum);

acc += cur; // 10 += 1;
acc += cur; // 11 += 2;
acc += cur; // 13 += 3;
acc += cur; // 16 += 4;

console.log(acc); // 20

위와 같이 되는 것이다.

3. 두 개의 인자 추가하기

4개의 인자 + 1개의 초기값
- acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
- cur current : 현재 돌고 있는 요소
- idx index : 배열 요소의 순서 (optional)
- arr array (또는 src source) : 현재 배열, 원본 배열 (optional)
- initialValue : acc의 초기값 (optional)

다음은 평균을 구하는 reduce 함수이다.

마지막에만 나누기를 위해서 index와 arr를 불러왔다.

const avg = numbers.reduce((acc, cur, index, arr) => {
	if (index === arr.length - 1) { // index가 마지막일 때
		return (acc + cur) / arr.length; // cur - 4
	}
	return acc + cur; // cur - 1, 2, 3
	}, 0);
ㅤ
console.log("avg", avg);