forEach 메소드와 루프 제어문

forEach 메소드와 루프 제어문

publish date
Jul 8, 2020
Tags
js
누군가는 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() 메소드를 사용하는것은 잘못된 방법이다.
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 등으로 루프를 제어 할 수 없다는 사실을 꼭 기억하시고 사용하시길 바랍니다.
 
감사합니다.