reduce는 map이나 filter처럼 배열을 생성하는 것이 아니라,
어떤 값을 생성하는 것이다.
function reduce(predicate, val){
let result=val;
먼저 작동 원리를 보자면,
인자로 콜백함수를 받고 다른 것과 다르게 값을 받게된다.
새로운 배열을 생성하는 것이 아니니까
[ ]가 아니라 처음 초기값으로는 val 값이 설정된다.
function reduce(predicate, val){
let result=val;
for(let i=0; i<a.length; i++;){
result=predicate(result, a[i]);
}
return result;
}
그리고 배열을 하나하나 도는것은 똑같다.
돌고나서 콜백함수를 실행하는데 여기서
result값을 넘기고 원본배열 값을 넘긴다.
그리고 리턴은 result를 한다.
function reduce(predicate, val){
let result=val;
for(let i=0; i<a.length; i++;){
result=predicate(result, a[i]);
}
return result;
}
a = [10, 11, 12, 13, 14, 15];
let answer = a.reduce(function (acc, v) {
return acc+v;
}, 0);
console.log(answer);
그래서 어떻게 작동하는지 보자면,
콜백함수가 predicate로 넘어가고
0이 val로 넘어가는 것이다.
그래서 그 값이 result라는 변수값을 만들어서 초기화를 하고
반복문이 돌면서 배열을 탐색하게 된다.
이때, predicate를 호출하는데
result라는 내가 만든 변수값을 넘기고
원본배열 값을 (a[i]) v에 넘긴다.
그래서 보자면
result=predicate(result, a[i]);
이 부분에서 처음에 result는 0이 될것이다.
그리고 첫번째 배열 값은 10이니까 10이된다.
그럼 여기에
let answer = a.reduce(function (acc, v)
acc에는 0, v에는 10이 넘어간다.
그래서 acc+v를 하면 10이 되는 것이다.
predicate(result, a[i]);에 10을 받고
predicate(result, a[i]);가 result로 넘어가니까 10인것이다.
function reduce(predicate, val){
let result=val;
for(let i=0; i<a.length; i++;){
result=predicate(result, a[i]);
}
return result;
}
이제 그 다음것을 돌 때 보면
result는 10이고 a[i]는 11이 되는 것이다.
그럼 같은 원리로 10+11은 21이 리턴된다.
이런식으로 반복해서 도는 것이다.
reduce는 리턴한 값이 첫번째 매개변수로 오게된다.
이런식으로 15까지 돌게되면
10부터 15까지 모두 합한 값이 출력값이 되는 것이다.
'JS' 카테고리의 다른 글
filter 작동원리 (0) | 2021.08.29 |
---|---|
map 작동원리 (0) | 2021.08.25 |
forEach 작동원리 (0) | 2021.08.24 |
setInterval API (0) | 2021.05.21 |
퍼포먼스 개발 툴 사용하기🧨 (0) | 2021.05.17 |