reduce function 이해하기

reduce 란?

reduce()메소드는 array의 각 element에 함수를 적용하여 array를 단일값으로 reduce 하는데 사용된다.

let result = arr.reduce(callback);
let result = arr.reduce(callback, initValue); // option for initial value

result : return 되는 단일 값

arr : reduce함수가 실행되는 array

calllback : array안에 있는 각 element들에 실행되는 함수 (네가지 arguments)

- accumulator : 함수의 모든 리턴값을 축적

- cur : 진행되는 현재 값

- index : 현재 진행하는 값의 index

- arr : 원래의 array

initValue : 선택적으로 사용가능. 설정되지 않으면 0번째 element가 initValue

 

Reduce vs For Loop

var arr = [1,2,3,4];
var sum = 0;
for(var i = 0; i < arr.length; i++){
	sum += arr[i];
}
// sum =10

위의 코드는 array의 모든 값의 합을 찾는것이다.

우리의 array를 통해 반복하며 각각의 변수의 값을 한번씩 더한다.

끝나게 되면 sum은 10의 값을 갖는다. 

reduce() 함수로 훨씬 쉽게 이 함수를 실행할 수 있다.

let arr = [1,2,3,4];
let sum = arr.reduce((acc, cur) => {
	return acc + val;
});
// sum = 10;

각 반복에서 현재 값을 acc에 더하고 리턴한다. 이 리턴값이 새로운 accumulator가 될것이다.

reduce 함수가 arr 배열에 작용하고, acc 값이 함수가 끝날때까지 증가할 것이다.

 

Initial Value 지정하기

let arr = [1,2,3,4];
let sum = arr.reduce((acc, cur) => {
	return acc + cur;
}, 100);
// sum = 110;

이전 코드와 initValue를 빼고는 동일하다. 시작점을 100으로 설정했기에 값은 110이 된다.

 

Reduce & ES6

let sum = arr.reduce((acc, cur) => acc + cur, 100);

function 대신 =>
'return' 생략

 

---

• https://codeburst.io/learn-understand-javascripts-reduce-function-b2b0406efbdc