누군가는 forEach 메소드를 단순히 일반적인 for 루프와 동일하게 여기고 사용하게 됩니다.

그러나 일반적인 for 루프와 forEach는 분명한 차이점이 있는데요.

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

1. forEach 와 return 문

아래 코드를 실행하면 콘솔에 1, 2를 출력한 이후 루프가 중단될까요?

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

array.forEach(function (item) {
    console.log(item);
    if (item == 2) {
        return; // 요소가 2인 경우 return 명령문 실행.
    }
});

// 실행결과: 1 2 3 4

그렇지 않습니다!

만약 Java 를 사용해본 경험이 있다면, 아마 이런 생각이 들겠죠. “어떻게 이게 가능하지?”

그 원인은 forEach 메소드에 콜백 함수를 전달하였기 때문입니다. 전달된 콜백함수는 일반적인 함수처럼 동작하지만 루프를 진행하는데 있어 return 은 아무런 영향을 미치지 않습니다.

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

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

MDN – foreach

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

그렇다면 forEach를 쓰지않고 for 문으로 바꿔서 실행보겠습니다.

const array = [1,2,3,4];
const callback = function(item) {
    console.log(item);

    if (item === 2) {
        return; // 이렇게 사용해도 루프가 종료되지 않는다.
    }
}
for (let i = 0; i < array.length; i++) {
    callback(array[i]);
}

// 실행결과: 1 2 3 4

for 문에서 호출된 함수에서 return 이 작동하지 않는 이유를 아시겠나요?

for 에서 return 하는게 아니라 함수내부에서 return 하는 것이므로 루프에는 영향을 끼치지 않는 것이죠.

이와 같이 forEach도 결국 콜백 함수에서 return 을 하는 것일 뿐이므로 return 명령문이 루프에는 영향을 끼치지 못하는 것입니다.

2. forEach 와 break 문

이번에는 forEach 메소드와 break 문을 사용해 보겠습니다.

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

array.forEach(function(element) {
    console.log(element);
  
    if (element === 2) {
        break;
    }   
});

// 실행결과: Uncaught SyntaxError: Illegal break statement

코드 실행시 syntax 오류가 발생합니다.

break 문은 함수내에서 사용할 수 없기 때문이죠.

이렇게 break 문으로 루프를 제어하는 경우에는 일반적인 for 문을 사용해야 합니다.

const array = [1,2,3,4];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);

    if (array[i] === 2) {
        break;
    }
}

// 실행결과: 1 2

3. forEach 와 continue 문

이번에는 continue 를 forEach 와 함께 사용해보겠습니다.

const array = [1, 2, 3, 4];
array.forEach(function (item) {
    if (item === 2) {
        continue;
    }

    console.log(item);
});

// 실행결과: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

continue 도 break 와 마찬가지로 forEach 루프에서 사용할 수 없습니다.

루프에서 continue를 사용하는 올바른 방법은 break 와 마찬가지로
일반적인 for 루프에서 사용해야 합니다.

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

    console.log(array[i]);
}

// 실행결과: 1 3 4

여기까지 forEach 메소드와 return, break, continue 를 각각 사용해봄으로써
일반적인 for 루프와 동일하게 사용하면 안되는 경우들에 대해 알아보았습니다.

forEach 메소드를 for 문처럼 각 요소를 순회하는 목적으로 사용할 시에 return, break, continue 등으로 루프를 제어 할 수 없다는 사실을 꼭 기억하시고 사용하시길 바랍니다.

감사합니다.