본문 바로가기

JS

forEach 작동원리

*forEach, map, filter, reduce 는 모두 고차함수

고차함수는 자신의 매개변수에 함수값을 전달받는 것이다.

 

 

function forEach(predicate, thisArg)

a=[10, 11, 12, 13, 14, 15];
a.forEach();

먼저 forEach부터 보면

forEach는 앞에는 함수, 뒤에는 내부에서 this로 사용할것을 받고있는 것이다.

thisArg는 생략 가능.

(원래부터 이렇게 만들어 진 것이다.)

 

 

        //function forEach(predicate, thisArg)

        a=[10, 11, 12, 13, 14, 15];
        a.forEach(function());
    </script>

forEach는 for반복문 대신 사용하는 애라고 생각하면 된다.

 

        function forEach(predicate, thisArg){
            for(let i=0; i<a.length; i++;){
                predicate(a[i], i)
            }
        }

        a=[10, 11, 12, 13, 14, 15];
        a.forEach(function(v, i){

        });

forEach의 작동 원리를 보자면,

(실제로는 더 복잡할수도 있지만)

우선 돌아가는 원리를 쉽게 정리하면 위 같은 코드가 나온다.

 

우선 forEach 자체가 인자를 하나, 하나 돌면서 함수를 실행하는 것이기때문에

안에는 for문이 있다고 보는 것이다.

그리고 그 for문이 돌때마다 predicate로 받아온 함수가 실행되는 것.

이 함수가 실행될때는 첫번째 인자로는 a라는 탐색하는 배열에 값을 [i] 넘기고,

그 인덱스 번호인 i를 넘겨준다.

 

그래서 v는 배열 요소들이다.

그리고 i는 인덱스이다.

 

        a=[10, 11, 12, 13, 14, 15];
        a.forEach(function(v, i){
            console.log(v, i);
        });

 

그래서 이렇게 호출을 해보면,

이런 결과값을 얻을 수 있다.

 

 

        a=[10, 11, 12, 13, 14, 15];
        a.forEach(function(v, i){
            console.log(v, i, this);
        }, [1, 2]);

그리고 this는 다음에 오는 [1, 2]를 가리킨다.

 

출력을 해보면 이렇게 나온다.

 

 

'JS' 카테고리의 다른 글

filter 작동원리  (0) 2021.08.29
map 작동원리  (0) 2021.08.25
setInterval API  (0) 2021.05.21
퍼포먼스 개발 툴 사용하기🧨  (0) 2021.05.17
JavaScript| 클래스 예제와 콜백 함수 최종 정리  (0) 2021.04.27