[javascript] 배열 계산하기 reduce 함수

들어가며

처음 reduce 함수를 보았을 때는 이게 뭔가 했다.

잘 이해도 되지 않을 뿐더러, 다른 방법들이 얼마 든지 있어서 였다.

하지만 이 말은 다르게 생각해보면, 다른 방법들을 reduce 함수 하나로 해결 할 수 있다는 말이다.

 

일반적으로 배열을 순회 하면서 할 수 있는 모든것을 정의 할 수 있는 강력함 함수가 reduce 이다.

검색하면 많이 나오는 배열의 합을 구하는건 기본이고

각 요소에 대한 처리나, 요소의 구분, 함수를 넣어서 또다른 값을 만드는 등 배열 하나에 대해서 입맛대로

결과를 만들 수 있다.

 

기본 문법

함수의 기본 정의는 다음과 같다.

arr.reduce(callback[, initialValue])

임의의 배열 arr 뒤에 reduce 를 호출하고 괄호에 두가지 인자가 들어가게 되는데 

callback 은 reduce 함수에서 실행하게 될 함수를 말하고, initialValue 는 처음 시작값을 얘기한다.

 

initialValue 는 옵션값으로 설정하게 되면 처음 시작 값을 정할 수 있고, 설정하지 않으면 주어진 arr 함수의 처음값을 시작 값으로 사용하게 된다.

 

callback 함수는  4개의 인자를 자동으로 받게 된다.

• accumulator - 이 콜백 함수에서 최종적으로 반환될 값이다. 함수 내에서 연산 후에 이 변수에다가 넣어주면 된다.
• currentValue - 함수가 지목하고 있는 현재의 배열 요소를 말한다.
• currentIndex - 함수가 지목하고 있는 현재 배열 요소의 인덱스 이다. (옵션값)
• array - 함수를 호출한 배열 자신을 말한다.

reduce 함수의 기본형은 다음과 같다.

arr.reduce(function(accumulator, currentValue, currentIndex, array) {
	// 처리 할 함수 내용
	return accumulator;
}, initialValue);

위의 기본 정의에서 callback 자리에 함수가 구체적으로 쓰여졌다고 보면 된다.

조금 더 간단하게 기본형을 나타내면 

arr.reduce((accumulator, currentValue) => {
	// 처리 할 함수 내용
	return accumulator;
});

옵션값을 빼고 화살표 함수로 간단하게 나타낼 수도 있다. 검색하면 나오는 설명들은 대부분 이런 모습을 하고 있을 것이다.

 

각 요소의 덧셈의 합

배열 각 요소의 덧셈을 하는 예제는 다음과 같다.

let arr = [1,2,3,4,5];

let res = arr.reduce((accumulator, currentValue) => {
    currentValue += 1;
    accumulator += currentValue;
    return accumulator;
});

console.log(res)
// 19

 

각 요소의 덧셈 후 배열로 반환

배열의 요소 별로 계산 한 후에 다시 배열로 리턴값을 받을 수도 있다.

이때는 옵션으로 줄 수 있는 initialValue 를 빈 배열 [] 로 초기화 시켜주는 세팅을 해야 한다.

let arr = [1,2,3,4,5];

let res = arr.reduce((accumulator, currentValue, idx) => {
    currentValue += 1;
    accumulator.push(currentValue)
    return accumulator;
},[]);

console.log(res)
//[ 2, 3, 4, 5, 6 ]

 

위의 두가지 예제를 응용하면 배열로 계산하는 대부분의 로직을 처리 할 수 있다.

간단한 로직 (예를 들어 sort, min, max, every, filter, toString) 들에

약간의 복잡한 로직들이 더해졌을 경우

reduece 함수를 통해서 한번에 처리 가능하다.

 

사실 배열로 하는 거의 모든것을 할 수 있다.