[Javascript] forEach 안에서 return/break 처리?

결론은 안됩니다.

 

js를 익숙하게 사용하시는 분들이라면 알겠지만, js가 처음이거나 익숙하지 않다면 놓칠 수 있는 부분이다. 나 역시 Vue.js를 다룰일이 생겨서 개발 중에 원하는 값이 나오지 않아 디버깅하다가 발견 ㅎ..

 

잘못된 사용 예시

 const arr = [1,2,3,4,5];
 
 arr.forEach((value) => {
 	if(value == 3) return;
    console.log(value);
    });
  // 기대 실제
  // 1    1
  // 2    2
  // 3    4
  //      5

해당 예시에서 return후 forEach문을 빠져나오지 않고 마치 'continue'처럼 동작한다. (forEach에서 continue는 쓸 수 없다.)

 

forEach를 단순히 for문으로 생각하고 사용했기 때문이다. forEach는 예외를 던지지 않고는 멈추지 못한다. 그러므로 중간에 멈추는 등 기대하는 결과를 얻기 위해서는 그냥 for문을 사용하자. 추가로 다른 배열 메서드인 some() 등도 사용 가능하다.