자바스크립트 배열 reduce 활용법 - 배열 내 값을 누적시키기[Java scrpt]

배열의 마법사 reduce 매우 중요하다

 

Array 객체의 메소드  reduce는 배열 요소를 순환하면서, 정의된 callback 함수에 의해 단일 값으로 누적시킬 수 있다

reduce 메소드의 형태는 인자로 callback 함수와 초기값을 받는다

첫 번째 callback 함수는 기존과 메소드와 달리 여러 매개변수를 정의 한다

아래와 같이 최대 4개까지 매개변수를 받고,  첫 번째 누적된 값과 현재 요소 값은 필수이다

reduce 메소드가 처음에 실행할 때, 누적된 값은 두번째 인자(초기값)을 할당 받는다

이후에는 배열 순환이 끝날 때까지  callback 함수에서 반환된 값을 재할당된다

 

배열 내 값을 누적시키기

const numArr = [1, 2, 3, 4, 5];

const result  =  numArr.reduce((acc, el) => {

      return acc + el

}, 0);

console.log(result);

결과 15

 

숫자형 값이 나열된 배열 리터럴을 numArr 변수에 대입한다

reduce의 callback 함수 매개변수로, 첫 번째 acc(누적된 값)과 el(현재 요소값)을 정의한다

매개변수로 전달된 acc와  el를 합산하여, callback 함수 결과 값으로 반환한다

이렇게 반환된 값은 reduce로 순환된 다음 요소 차례에서 acc으로 할당되어 전달된다.

즉, return으로 반환된 값은  다음 배열요소의 acc가 된다는 의미이다.

또한, 배열의 모든 요소들을 순환하고 난 마지막 반환값이 바로 reduce 메소드의 결과 값이 된다.

 

초기값으로 숫자 0을 대입한다. 이 초기값은 첫 번째 요소에서는 acc로 대입된다.

따라서 배열의 각 요소를 순환하며 초기값 0부터 각 요소의 값들을 합산하게 되었을 때, 

0 + 1, 1 + 2, 3 + 3, 6 + 4, 10 + 5와 같이 진행된다 

 

 

배열의 마법사 reduce 활용하기

const array = [5, 7, 2, 4];

const sum = array.reduce((a, x) => a += x, 0);

 

위의 예제를 자세히 해석해봅시다

1. 첫 번째 배열 요소 5에서 (익명) 함수를 호출한다. a의 초깃값은 0이고 x의 값은 5이다.

함수는 a와 x(5)의 합을 반환한다 이 값은 다음 단계에서 a의 값이 된다

2. 두 번째 배열 요소 7에서 함수를 호출한다. a의 초깃값은 이전 단계에서 전달한 5이고

x의 값은 7이다 함수는 a와 x의 합 12를 반환한다 이 값은 다음 단계에서 a의 값이 된다.

3. 세 번째 배열 요소 2에서 함수를 호출한다. 이 단계에서 a는 12이고 x는 2이다.

함수는 a와 x의 합인 14를 반환한다

4. 네 번째이자 마지막 배열 요소인 4에서 함수를 호출한다. a는 14이고 x는 4이다.

함수는 a와 x의 합인 18을 반환하며 이 값은 reduce의 값이고 sum에 할당되는 값이다.

 

reduce는 보통 숫자나 문자열 같은 원시 값을 누적값으로 사용하지만, 객체 또한 누적값이 될수 있다

이를 통해 아주 다양하게 활용할 수 있다는 것을 간과하지 말지 말자 아래의 예제를 보자

 

const words = ["Beachba111", "Rodeo", "Angel", "Aardvark", "Xylophone", "November", "Chocolate",

"Papaya", "Uniform", "Joker", "Clover", "Bali"];

 

const alphabetical = words.reduce((a, x) => {

if(!a[x[0]]) a[x[0]] =[];

a[x[0]].push(x); 

return a; 

}, {}); 

 

배열의 문자열 한글자에 인덱스 넘버 0부터 시작된다

if(![a[x[0]])의 뜻은 첫 번째 배열의 첫 번째 요소가 있는지 확인하는 것이다

a[x[0]]는 "Beachba111"의 B를 찾아 그 이름으로 배열을 저장한다

거기에 push()로 x를 a[x[0]]에 저장한다 그렇게 되면 결과적으로 B : "Beachba111"되고

a를 리턴하여 alphabetical에 저장되어 중첩되고 words 배열에 요소가 없으면 끝이 난다

두번째 매개변수의 뜻은 {}에 기본 값을 설정하는 한다는 뜻이다

 

reduce는 통계에서도 사용할 수 있다. 예를 들어 데이터 셋의 평균과 분산을 계산한다고 생각해보자 아래의 예제를 보자

const data = [3.3, 5, 7.2, 12, 4, 6, 10.3];

const stats = data.reduce((a, x) => {

a.N++; 수학적 공식이라서 그냥 활용방법만 확인하자

let delta = x - a.mean;

a.mean += delta/a.N;

a.M2 += delta * (x - a.mean);

return a;

}, { N : 0, mean : 0, M2 : 0 }); -> 초기값을 설정합니다

if(stats.N > 2){

stats.variance = stats.M2 / (stats.N -1);

stats.stdev = Math.sqrt(stats.variance);

}

 

reduce의 유연성을 알아보기위해 예제를 더 살펴 보자

const longWords = words.reduce((a, w) => w.length > 6 ? a +" "+ w : a, "").trim();

logWords : Beachball Aardvark Xylophone November Chocolate Uniform