개발맛/JavaScript

[ 자바스크립트 Array 메서드 ] - forEach()

MINAMIN 2020. 7. 6. 14:52

 

 

 

 

 

자바스크립트에서 지원하는 배열 메서드를 하나하나 정리하기로 마음 먹었다.

대망의 두두등장 두 번째 메서드 forEach()

 


▶ Array.forEach()

 

forEach() 메서드는 배열 반복문이라고 생각하면 된다.

주어진 함수를 배열 요소 각각에 대해 실행한다.

var arr = [1, 2, 3, 100, 200, 300];

arr.forEach(function(currentvalue, index, arr) {
    console.log(currentvalue + " / " + index + " / ", arr);
});
결과:
1 / 0 / [1, 2, 3, 100, 200, 300]
2 / 1 / [1, 2, 3, 100, 200, 300]
3 / 2 / [1, 2, 3, 100, 200, 300]
100 / 3 / [1, 2, 3, 100, 200, 300]
200 / 4 / [1, 2, 3, 100, 200, 300]
300 / 5 / [1, 2, 3, 100, 200, 300]

 

forEach()메서드는 제공된 callback 함수(위 예시 코드에서 function() {} 부분)를 호출해, 배열의 모든 요소에 실행한다. forEach() 메서드는 중간에 멈출 수 없기 때문에 반복문을 컨트롤 하려면 다른 반복문을 사용해야 한다. 즉,

var arr = [1, 2, 3, 100, 200, 300];

arr.forEach(function(currentvalue, index, arr) {
    console.log(currentvalue + " / " + index + " / ", arr);

    if(currentvalue == 100) {
        return;
    }
});

위와 같이 현재 요소가 100이라면 반복문을 종료하는 코드를 넣어도 forEach() 메서드는 마지막 요소까지 반복문을

실행한다.

 

callback함수는 다음 세 인수와 함께 호출된다:

  1. 처리할 현재 요소의 값 (위의 'currentvalue')
  2. 처리할 요소의 인덱스 (위의 'index')
  3. 순회(traverse)되는 배열 객체 (위의 'arr')

 

 참고 문서

for 반복문

for...of / for...in 반복문

 

같이 보면 좋은 또 다른 배열 메서드

    ▶ Array.prototype.filter()

     Array.prototype.every()

     Array.prototype.some()

     Array.prototype.reduce()