TIL-2024.06.19 - Error - Jump target cannot cross function boundary

 

 

 

 

 

 

 

배경

- 전달받은 res 문의 for-iteration 돌리고, 상태값이 400 인 경우, continue

... 생략 ...

res.forEach((item: any) => {
    if(item?.status !== "400") continue;

... 생략 ...

 

 

발생 에러:

- Jump target cannot cross function boundary 라는 에러 발생 

 

 

 

발생 원인: 

- continue 문은 반복문에서만 사용 가능하며, forEach는 반복문이 아니라 콜백 함수 내에서 실행되기 때문에 continue를 사용불가

- 즉, continue 가 문제가 아니라, forEach 는 반복문이 아닌 콜백 함수이기 때문에 continue 사용 불가

 

---

콜백 함수란 ? 

콜백 함수: forEach는 배열의 각 요소에 대해 한 번씩 실행되는 함수를 인자로 받는 메서드입니다. 이 함수는 배열의 각 요소마다 호출되지만, 자체적으로는 반복문이 아닙니다. 단지 배열의 각 요소에 대해 제공된 함수를 호출하는 역할을 합니다.

---

왜 continue를 사용할 수 없는가?

- forEach는 내부적으로 반복문을 사용하지만, 우리가 작성하는 콜백 함수 자체는 반복문이 아닙니다.

- continue는 반복문 내부에서만 작동하도록 설계된 제어문이기 때문에, 콜백 함수 내에서는 사용할 수 없습니다.

- forEach 내의 콜백 함수는 단순히 배열의 각 요소에 대해 한 번씩 호출되는 함수일 뿐입니다.

 

예시: 반복문과 콜백 함수의 차이

• 반복문에서의 continue: 반복문의 실행 흐름을 제어합니다.
• 콜백 함수 내의 return: 해당 함수의 실행을 종료하고 forEach의 다음 반복으로 넘어갑니다.

 

 

---

 

 

해결 방법: 

- 해결 방법으로는 여러가지가 있음

• continue 대신 return 사용
  
  
• forEach 대신 for...of | 기본 for 문 사용

 

... 생략 ...

res.forEach((item: any) => {
    if(item?.status !== "400") return;

... 생략 ...

 

 

 

예제

const a = [1,2,3,4,5]

let b = 0
a.forEach(item => {
 // if(item === 3) continue; // continue 는 에러 발생
 if(item === 3) return;
 b += item;
})

console.log(b)

 

 

 

 

 

요약:

- forEach는 반복문이 아닌, 콜백 함수이다

- continue 는 반복문의 흐름을 제어 하는 제어문이다

 

 

 

참조 문헌: 

https://www.becomebetterprogrammer.com/break-foreach-loop-in-typescript-or-javascript/

How To Break a forEach() Loop in TypeScript/JavaScript - Become A Better Programmer

 

https://hsly22xk.tistory.com/387

[Error] Jump target cannot cross function boundary