[자바스크립트 js] 배열 메소드 / reduce

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

이번 포스팅에서는 배열 메소드인 reduce 사용법에 대해 공유하겠습니다.

 

지금부터는 가독성을 위해 문어체를 사용할게요 :)

 

 

  reduce

• acc : Accumulator 누산기.
  콜백함수가 반복해서 동작할 때 직전에 동작한 콜백함수가 리턴한 값을 전달받는 파라미터.
• el : 배열의 요소가 전달 된다.
• i : 요소의 순서.
• arr : 메소드를 호출한 배열이 전달된다.
• 매 반복 때마다 콜백함수의 리턴값을 다음 콜백함수에 acc로 전달해주면서,
  마지막에 실행되는 콜백함수의 리턴값이 이 reduce 메소드의 최종 리턴값이 된다.
• 제일 처음 실행되는 콜백함수는 acc에 전달 받을 값이 없기 때문에,
  첫번째 콜백함수가 동작할 때 acc의 값을 initialAccValue 자리에 전달해준다.

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

numbers.reduce((acc, el, i, arr) => {
	return nextAccValue;
}, initialAccValue);

 

 

예문)

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

const sumAll = numbers.reduce((acc, el, i) => {
	console.log(`${i}번 index의 요소로 콜백함수가 동작중`;
    console.log('acc:', acc);
    console.log('el', el);
    console.log('-----------');
    
    return acc +  el;
}, 0);

console.log('sumAll:', sumAll);


// 마지막 0은 초깃값. 가급적 0을 명시하자.

// 결과
// 0번 index의 요소로 콜백함수가 동작중
// acc : 0
// el : 1
// -----------
// 1번 index의 요소로 콜백함수가 동작중
// acc : 1
// el : 2
// -----------
// 2번 index의 요소로 콜백함수가 동작중
// acc : 3
// el : 3
// -----------
// 3번 index의 요소로 콜백함수가 동작중
// acc : 6
// el : 4
// -----------
sumAll : 10