정의

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (예: 희소 배열)

for 루프와 forEach는 분명한 차이점이 있는데요.

루프를 제어하는 return, break, continue 을 통해 차이점을 알아보도록 하겠습니다.

1. forEach 와 return 문

array = [1,2,3,4];

array.forEach(function (item) {
    console.log(item);
    if (item == 2) {
        return; // 요소가 2인 경우 return 명령문 실행.
							  // 루프요소 중 해당요소의 callback 종료
    }
});

코드를 실행하면 콘솔에 1, 2를 출력한 이후 루프가 중단될까요? 그렇지 않습니다.

그 원인은 forEach 메소드에 콜백 함수를 전달하였기 때문입니다.

전달된 콜백함수는 일반적인 함수처럼 동작하지만 루프를 진행하는데 있어 return은 아무런 영향을 미치지 않습니다.

return의 영향은 해당 콜백함수 자체에만 영향을 미치며, 이는 해당 반복요소의 콜백함수를 끝내고 다음 반복요소의 콜백함수가 실행됩니다.

→ continue와 유사

아래는 공식 MDN 문서의 forEach에 관한 설명입니다.

예외를 발생시키는 경우를 제외하고는 forEach() 루프를 중단시킬 방법은 없다. 만약 그러한 목적으로 forEach() 메소드를 사용하는것은 잘못된 방법이다.

forEach에 관한 설명에서도 알 수 있듯이 루프를 실행하는 도중에 중단시킬 필요가 있는 경우에는 forEach 메소드는 적절하지 않다고 할 수 있다.

const array = [1, 2, 3, 4];
const callback = function(item) {
  if (item === 2) {
      return; // 이렇게 사용해도 루프가 종료되지 않는다.
							// 반복요소 중 해당요소의 callback 종료
  }
  console.log(item);
}

for (let i = 0; i < array.length; i++) {
  callback(array[i]);
}

// 실행결과: 1 3 4