본문 바로가기

JS

reduce 작동원리

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