[JS] forEach, map에서 break문을 사용한다면?

에러 소개

React를 사용하여 웹사이트를 만드는데, jsx문 안에서 map 함수로 배열을 받는 경우는 다들 많을 것이다.

그런데, 나는 5개의 데이터만 받으면 중단하고 싶었다.

그래서 중간에 break를 넣었더니...

Uncaught SyntaxError: Illegal break statement

break문을 사용할 수 없다고 한다.

왜 그럴까?

여기서 코드를 실행해봐도 원하는 값이 나오지 않는다. 4를 건너뛰고, array의 끝인 5까지 접근하였음을 알 수 있다.

See the Pen forEach_example by KIM EUN TAE (@ket0825) on CodePen.

단순하게 생각해서, Array.forEach()나 Array.map()은 배열 안에 모든 요소에 접근할 수 있도록 하는 함수이다.

즉, 일반적인 for문처럼 loop를 구성하고, 중간에 중단할 수는 없다!

~~멈추라고 해도 멈춰지는 게 아니다~~

1. 제일 쉬운 방법은 그냥 for문을 사용하는 것이다.

See the Pen forEach_for by KIM EUN TAE (@ket0825) on CodePen.

2. every() 혹은 some() 사용도 대안이 될 수 있다.

Array.every()와 Array.some() 모두 forEach와 map과 같은 구조(parameter는 element, index, array 순이다)로 callback function이 존재한다.

every()는 return이 true일 때만 다음 iteration으로 넘어간다.

만약, false라면 다음 iteration으로 가지 못하고 즉시 종료된다.

some()은 every()와 반대로, return이 false일 때만 다음 iteration으로 넘어간다.

만약, true라면 즉시 종료된다.

그러므로 every()와 some() 모두 return이 반드시 필요하다!

아래 예시는 every()로 하였다.

See the Pen forEach_every by KIM EUN TAE (@ket0825) on CodePen.

그 외에도 많은 방법이 있지만 나이스하지 않거나 위의 방법에서 크게 벗어나지는 않아 소개하지는 않겠다.

위의 둘 중 편한 것 하나를 사용해보기를 권한다.

How to break when looping an array in Javascript

There are different ways to break an array: some are good, some are bad. Obviously I will just focus on the good ones !

medium.com

How to Break Out of a JavaScript forEach() Loop

The `break` keyword doesn't work with `forEach()`, but there are several ways to simulate `break` with `forEach()`. Here's how.

masteringjs.io