누군가는 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 등으로 루프를 제어 할 수 없다는 사실을 꼭 기억하시고 사용하시길 바랍니다.
감사합니다.