reduce 함수는
배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환한다.
이 함수는 배열에서 숫자의 합이나 평균 등을 계산할 때 유용하게 사용된다.
누적해서 callback function을 각 요소마다 갈겨서, 결과 값을 반환해내는 식으로 반복하는거다.
reduce 함수는 다음과 같은 구문을 사용한다.
// 기본 구문 형식
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// 초기값인 initValue를 지정하지 않을 때.
let result = arr.reduce(callback);
// 선택적으로 초기 값(initValue)도 지정할 수 있다.
let result = arr.reduce(callback, initValue);
- result => 반환되는 단일 값
- arr => reduce 함수를 실행할 배열이다.
- callback => 배열의 각 요소에서 실행할 함수.
- initValue => 선택적으로 정할 수 있는 초기값. 이 값이 제공되지 않으면 배열의 0번째 요소가 초기값으로 사용된다.
그리고 callback function은 네 개의 인수를 취할 수 있다.
- total : 누적되는 값으로, 함수의 실행 결과값 이다
- currentValue : 현재 요소의 값
- currentIndex : 현재 요소의 인덱스
- arr : reduce 함수가 적용되는 배열
만약에 어떤 배열의 요소의 합계를 구한다고 생각했을 때, for문을 돌린다고 생각해보자
var arr = [1, 2, 3, 4];
var sum = 0;
for(var i = 0; i < arr.length; i++) {
sum += arr[i];
}
// sum = 10
배열을 반복하고 각 값을 한 번에 하나씩 변수에 추가해서 완료되면 sum 이라는 결과값을 얻게되는건데.
이 코드가 작동하는 동안 함수를 사용하여 동일한 결과를 얻는 훨씬 더 쉬운 방법이 있는데, 그게 바로 reduce 함수를 이용하는거다.
let arr = [1,2,3,4];
arr이 우리가 합계를 구할 배열이다.
배열에 있는 모든 값의 합을 찾고 싶고,
이를 위해 반복할 때 마다 누적되는 값(total)에 현재 값(currentValue)을 더하고 반환한다.
이 반환된 값은 새로운 누적되는 값(total)이 된다.
let sum = arr.reduce((total, currentValue) => {
return total + currentValue;
});
초기 값도 지정해서 적용해 볼 수 있다.
이번에도 배열의 합을 구할거지만, 이번에는 초기 값을 100으로 지정해보겠다.
let sum = arr.reduce((total, currentValue) => {
return total + currentValue;
} , 100 );
보다시피 위의 코드는 이전 예제와 거의 동일하다.
변경된 것은 콜백 뒤에 두 번째 인수를 추가한 것 뿐이다.
합계의 출발점을 숫자 100으로 지정해줬다.
이제 함수를 실행하면 110이라는 결과값이 나오는거다.
ES6 이용해서 코드 간결화
화살표 함수로 작업하면 코드를 훨씬 더 단순화시킬 수 있다.
화살표 함수에서 괄호와 return 키워드를 생략하여, 값을 반환하도록 지정할 수 있다.
let sum = arr.reduce((total, currentValue) => total + currentValue, 100);
'개발 > JavaScript' 카테고리의 다른 글
Set 객체: 값의 고유한 집합 저장소 (1) | 2023.12.17 |
---|---|
개인적인 This 정리 (1) | 2023.09.24 |
클래스를 이용한 모듈화 (0) | 2023.07.01 |
생성자 함수와 프로토타입의 차이? (0) | 2023.06.23 |
JS에서의 Boxing 처리 (0) | 2023.06.21 |
개발 블로그
포스팅이 좋았다면 "좋아요❤️" 누르기 !