자바스크립트 foreach 코드 설명

배열 에서 자주 사용하는 function 중 자바스크립트 foreach 에 대하여 알아보도록 하겠습니다.

자바스크립트 foreach 문은 배열의 반복형태로써, 배열에서만 사용되는 메소드 입니다.

배열의 처음부터 마지막 요소까지 반복을 수행하여 실행되는데요, 인자로는 콜백 함수를 받아옵니다.

주로 querySelectorAll() 등의 전체(all) 선택자에서 활용됩니다.

arr.forEach(callback(value[, index[, array]])[, thisArg])

callback : 각 요소에 대해 실행할 함수를 정의
value : 처리할 현재 요소
index : 처리할 현재 요소의 인덱스 - option
array : forEach() 를 호출한 배열 - option

자바스크립트 foreach의 엘리먼트, 인덱스

기본적으로 foreach의 매개변수로는 엘리먼트(element)와 인덱스(index)를 받게 됩니다.

아래는 필수항목은 element만 매개변수로 넘길 수 있습니다.

<body>
  <!--  기본 foreach -->
    <script>
      arr = ["a", "b", "c", "d"];
 
      arr.forEach(element => {
        console.log( element )
      });
    </script>
</body>

다음과 같이 콜백함수를 통해 처리할 현재 요소 value, 처리할 요소의 위치 인덱스(옵션) index, foreach를 호출한 배열 array를 넘긴 코드입니다.

<script>
      // 함수 선언
      const numbs = [100, 120, 109, 120, 155, 12, -123];
      //콜백 function 
      numbs.forEach(myCall);
 
      function myCall(value, index, array) {
        // console.log( "index : ", index );
        console.log("value : ", value);
        console.log("index : ", index);
        console.log("array : ", array);
        console.log("----------------");
      }
    </script>

foreach 배열은 element index array를 줄 수 있다

위의 코드는 다음과 같이 사용할 수 있습니다.

<script>
      // 함수 선언
      const numbs1 = [100, 120, 109, 120, 155, 12, -123];
      //콜백 function
      numbs1.forEach( ( value, index, numbs1 ) => {
        console.log("numbs1 value : ", value);
        console.log("numbs1 index : ", index);
        console.log("numbs1 array : ", numbs1);
      })
    </script>

자바스크립트 foreach 는 value index array를 매개변수로 전달할 수 있다

마지막 this argument는 다음과 같이 사용할 수 있습니다. ( 원문 참조 )

    <script>
      function Counter() {
        this.sum = 0;
        this.count = 0;
      }
      //Counter 객체에 this를 넘겨줌으로써 this를 내부에서 사용
      Counter.prototype.add = function (array) {
        array.forEach((entry) => {
          this.sum += entry;
          ++this.count;
        }, this);
        // ^---- 주의
      };
 
      const obj = new Counter();
      obj.add([2, 5, 9]);
      obj.count;
      // 3
      console.log( obj.sum );
      // 16
    </script>

this를 통해 함수 객체에 접근

이상으로 foreach에 대해서 알아보았습니다.

그 밖에 자바스크립트 콜백 함수를 알고자 한다면 이 글을 참조해보시기 바랍니다.