자바스크립트 - reduce() ? and for문과의 차이
reduce 정의
Array.prototype.reduce ( callbackfn [ , initialValue ] )reduce는 단어 의미 그대로 해석하면 줄이다는 표현인데, 함수로 정의된 내용은 배열의 값을 하나씩 줄여가면서 모든 배열을 순회할 때까지 결과를 callbackfn에 전달합니다. 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 편입니다. 예를 든다면 덧셈이나 곱셈 같은 합산 식을 이용할 때 사용됩니다. 빅데이터 프레임워크인 맵리듀스(MapReduce)와 같은 이름도 같은 맥락에서 지어진 거라고 생각하시면 더 이해하기 편하실 수 있어요. ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callback을 함수로 호출해 결과를 만들어 반환한다"라고 정의되어 있습니다. reduceRight는 reduce와 배열의 값들을 내림차순으로 접근한다는 부분만 다를 뿐 나머지는 동일한 원리로 동작합니다. 예제를 통해 reduce의 정의를 살펴보면 다음과 같습니다.
그리고 reduce 메서드는 다음과 같이 사용합니다. 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
const numbers = [1, 2, 3, 4];
const result = numbers.reduce((number1, number2) => number1 + number2);
console.log(result);
// 10;예제 코드는 주어진 값들을 reduce를 통해 합산하는 방법입니다. 물론 for문을 사용해서도 이와 같은 작업을 할 수는 있지만 권장하지는 않습니다. map, filter, reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다라는 개념을 가지기 때문에 for문을 사용할 때 작성해야 하는 반복문을 작성하지 않고도 사용할 수 있습니다.
const numbers = [1, 2, 3, 4];
let result = 0;
for (i = 0; i < numbers.length; i++) {
result += numbers[i];
}
console.log(result);
// 10
배열.reduce(function(누적값, 현잿값, 인덱스, 요소) {
return 결과
}, 초깃값);
1.누적값 (accumulator)
return 값을 누적합니다.
초깃값을 제공한 경우에는 초기값의 값으로 시작합니다.
2.현재값 (currentValue)
배열에 현재 요소 입니다
3.인덱스 (currentIndex)
현재 요소의 인덱스 입니다. 초깃값을 제공한 경우 0, 아니면 1부터 시작합니다.
4.요소 (array)
reduce를 호출하고 있는 현재 배열입니다.
5.초깃값 (initialValue)
콜백을 호출할때 누적값에 제공하는 값입니다.
초깃값을 제공 할 경우 콜백호출 시 초깃값으로 사용되고 제공하지 않으면 배열의 첫번째요소를 사용합니다.
(빈 배열로 reduce를 호출하면 오류)
그리고
바로위 사진에서 알수있듯이 acc+cur를 해서 총합을 구하고 acc는 누적값인것을 알수있다.
또한, reduce((a,b)=>a+b,0); 이런식으로 가능하기도한데 여기서 0 은 초기값을 0으로 초기화하라는 의미이다.