JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

Array.reduce()

reduce()는 배열의 모든 값을 돌면서 리듀서 함수를 실행하고 하나의 결과를 리턴합니다. 리듀서 함수는 4개의 인자를 가지는데 순서대로 누산기(acc), 현재 해당값(cur), 현재 인덱스값(index), 원본 배열(src)입니다.

리듀서 함수가 반환한 값은 누산기(acc)에 할당되고 반복 중에 계속 유지됩니다. 예시를 보면 확 와닿을 것입니다.

예시

배열의 각 값을 모두 더하는 것이 대표적인 예시가 되겠습니다.

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

numbers.reduce((acc, cur) => {
    return acc + cur
}, 0)

// 15

배열의 요소를 돌면서 계속해서 값이 누적되어 더해지게 됩니다.

추가로, reduce()의 두번째 인자로 initialValue(초기값)을 넣을 수도 있고 안넣을 수도 있는데 넣지 않을 경우 인덱스 1부터 시작해서 콜백함수를 실행하게 됩니다. 반면 initialValue를 넣어주면 인덱스 0부터 시작하게 되는 차이가 있습니다. 보통은 initialValue를 넣어주는 것이 안전합니다.

End.