이 게시물은 원본 아티클인 How to Break from forEach in JavaScript? 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 Mayallo 에게 있습니다.

들어가며

자바스크립트에서 forEach()는 배열의 모든 요소를 순환하는 함수 입니다. 이는 파라미터로 콜백을 전달받아 배열의 모든 요소에 적용합니다.

당신이 forEach()를 중단하는 방법을 알기 위해 이 페이지에 들어온 것을 알지만, 안타깝게도 그런 방법은 없습니다.

MDN 발췌:

forEach() 에서 예외를 발생시키는 방법 말고 반복을 멈추는 방법은 없습니다. 만약 반복을 멈춰야 한다면 forEach() 메소드를 사용하는 건 잘못된 선택입니다.

그렇다고 말했을 때, 당신이 만약 반복문에서 멈춰야 하는 경우가 있는 걸 미리 안다면 forEach()는 사용하지 말아야 할겁니다. 그 대신에 for...of를 사용하는 것이 굉장히 알맞는 해법이 될 것입니다.

하지만 학습을 위해서 몇 가지 해결 방법을 소개해보겠습니다.

우선 다음 예시를 기반으로 생각해보겠습니다.

Copycopy code to clipboard
const arr = [1, 2, 3, 4];
const doubled = [];

arr.forEach((num) => {
	doubled.push(num * 2);
});

console.log(doubled);

이 예제에서 요소가 3일 때 멈추고 싶다고 가정해보겠습니다.

for...of 를 사용하기

앞에서 말했듯이, 이는 반복문에서 break 키워드를 사용해 멈출 수 있는 좋은 방법입니다.

Copycopy code to clipboard
const arr = [1, 2, 3, 4];
const doubled = [];

for (const num of arr) {
	if (num === 3) break;
	dobuled.push(num * 2);
}

console.log(doubled);

every() 또는 some() 사용하기

자바스크립트에는 forEach() 와 비슷한 두 함수 every()와 some()이 존재합니다. 둘의 차이점은 다음과 같습니다.

• every() : 모든 콜백이 true를 반환하면 true를 반환한다.
• some() : 최소 하나 이상의 콜백이 true를 반환하면 true를 반환한다.

운이좋게도, 우리는 이를 이용해 반복문을 멈출 수 있습니다.

• every() : 멈추고 싶을 때 false를 반환하기.
• some() : 멈추고 싶을 때 true를 반환하기.

첫번째로, every()를 사용해보겠습니다.

Copycopy code to clipboard
const arr = [1, 2, 3, 4];
const doubled = [];

arr.every((num) => {
	if (num === 3) return false;
	doubled.push(num * 2);
	return true;
});

console.log(doubled);

다음으로, some()을 사용해보겠습니다.

Copycopy code to clipboard
const arr = [1, 2, 3, 4];
const doubled = [];

arr.some((num) => {
	if (num === 3) return true;
	doubled.push(num * 2);
	return false;
});

console.log(doubled);

도우미 변수를 사용하기

이 방법을 사용하면 forEach() 함수를 사용할 수 있으며, 변수를 통해 흐름을 제어할 수 있습니다.

Copycopy code to clipboard
const arr = [1, 2, 3, 4];
const doubled = [];

let shouldBreak = false;

arr.forEach((num) => {
	if (num === 3) shouldBreak = true;
	if (shouldBreak === false) doubled.push(num * 2);
});

console.log(doubled);

결론

이 아티클에서는, forEach() 만을 사용하여 멈추는 방법이 없는 것을 알게 되었습니다.

다음으로, 배열의 요소를 반복할 때 for...of를 사용할 수 있음을 알게 되었습니다.

마지막으로, 우리는 every(), some() 과 같은 다른 함수를 사용하거나 흐름을 제어하는 도우미 변수를 사용해 반복문을 멈추는 방법을 알게 되었습니다.

역주 의견

여기서부터는 저(himprover)의 의견 입니다.

처음 아티클 번역을 진행해보는 것이라, 아티클의 내용 보다는 길이가 짧은 것을 선정했습니다.

번역을 진행하다 보니 제 의견과는 다른 부분이 보였는데요.

실제 개발에서 반복문을 중도에 멈추기 위해 some() 이나 every()과 같이 아티클에서 소개 된 방법을 사용한다면 코드의 동작을 예측하기 어려울 것입니다.

some() 이나 every()의 경우 보통 배열에 대한 검증 차원에서 사용하는 경우가 많기 때문에, 다른 개발자의 입장에서는 '반복문을 중간에 멈추기 위해' 이를 사용했다고 바로 생각하기는 어려울 겁니다.

아마도 원작자분께서는 "이러한 방법도 존재한다" 정도의 의미로 작성한 아티클로 보입니다.

이를 감안하여, 실제로 개발을 진행 할 때는 for...of와 같은 다른 반복문을 사용하는게 가장 바람직한 방법일 것입니다.