프론트엔드/JavaScript

자바스크립트 고차함수 - forEach()

ksge7 2020. 10. 3. 05:03

forEach() 메서드란?

for 문을 대체할 수 있는 메서드이다.

 

배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백 함수를 실행한다.

 

이때 반환값은 undefined다.

 

콜백 함수의 매개변수를 통해 배열의 요소 값, 인덱스값, forEach를 호출한 배열 그 자체를 전달받을 수 있다.

 

간단하게 사용법을 보면 다음과 같다.

 

<body>
    <script>

        let num1 = [1,3,5,7,9];

        for(i = 0; i < num1.length; i++){
            num1[i] = num1[i]*2;
        }

        console.log(num1);
        // [2, 6, 10, 14, 18]

    </script>
</body>

 

일반적인 for문을 사용하면 위와 같다.

 

<body>
    <script>

        let num1 = [1,3,5,7,9];

        num1.forEach(function(item,index,self){
            self[index]=item*2;
        })
        // item은 배열 요소, index는 index, self는 배열 그 자체
        // foreach에 인자로 주어지는 함수는 매개변수를 통해 위 세가지를 제공받는다
        
        console.log(num1);
        // [2, 6, 10, 14, 18]

    </script>
</body>

 

forEach를 써주면 위와 같다.

 

forEach 메서드는 함수를 인자로 받으며 배열을 통해 호출할 수 있다.

 

그리고 불러낸 함수는 배열의 요소, 인덱스, 배열을 인자로 제공받을 수 있다.

forEach 뜯어보기

조금 더 콜백함수를 뜯어보면 다음과 같다.

 

<body>
    <script>

        let num = [1,3,5];

        num.forEach(function(item,index,self){
            console.log("배열요소: "+item+" 배열인덱스: "+index+" 배열: "+self)
        })

        // 배열요소: 1 배열인덱스: 0 배열: 1,3,5
        // 배열요소: 3 배열인덱스: 1 배열: 1,3,5
        // 배열요소: 5 배열인덱스: 2 배열: 1,3,5

    </script>
</body>

 

forEach 메서드는 호출한 배열이 가진 요소의 숫자만큼 실행된다.

 

그 과정에서 메서드가 가진 콜백함수는

 

ForEach를 호출한 배열의 요소, 배열의 인덱스, 배열을 인자로 제공받는다.