[js] forEach 팁

forEach는 배열을 순회할 때 쓰이는 메소드이다.
반복한다는 특징이 있어 반복문 탈출 & 재시작과 헷갈렸던 부분을 넘겨짚고 가자

앞으로 다룰 예제는 자연수가 담긴 배열에서 짝수와 관련된 무언가를 실행시키고자 하는 시나리오를 담고 있다.

return

const arr = [1, 2, 3, 4, 5, 6, 7];
const even = [];
arr.forEach((num) => {
  if (num % 2 === 0) even.push(num);
  if (num === 5) return;
  console.log(num);
});
console.log(even); 
// 예상 [2, 4]
// 실제 [2, 4, 6]

숫자가 5가되면 순회를 멈추게 하고싶다는 의도와는 달리, 순회는 계속되고 그저 콘솔에 5만 안찍히게 된다.

즉, 아래와 같이 정리할 수 있다.

함수는 어떤 동작을 실행할 수도 있지만, 어떤 값을 반환할 수도 있다.
이러한 관점에서 함수에서의 return은 뒤의 몇 줄의 코드가 있더라도 실행하지 않고(실행을 중단하고) return뒤에 나오는 값을 반환하겠다는 의미이다.

forEach내부에서의 return은 해당 콜백 함수 내부의 동작을 멈추겠다는 의미로 쓰이지, 배열 순회를 멈춘다고 헷갈리면 안된다.

break

그렇다면 우리가 알고있는 break로 순회를 정지시키는 방법을 생각할 수 있다.

const arr = [1, 2, 3, 4, 5, 6, 7];
const even = [];
arr.forEach((num) => {
  if (num % 2 === 0) even.push(num);
  if (num === 5) break;
  console.log(num);
});
console.log(even); 
// 예상 [2, 4]

숫자가 5가되면 반복문을 탈출하고자 하지만, 아래와 같은 에러가 발생한다.

SyntaxError: Illegal break statement

애초에 break라는 것은 for, while, switch의 내부에서만 해당 문을 종료시키는데에 쓰인다.

continue

비슷한 느낌으로 continue도 살펴보자.

const arr = [1, 2, 3, 4, 5, 6, 7];
const even = [];
arr.forEach((num) => {
  if (num === 4) continue;
  if (num % 2 === 0) even.push(num);
  console.log(num);
});
console.log(even); 
// 예상 [2, 6]

숫자 4만 건너뛰고 실행하고자 하지만, break와 마찬가지로 역시나 에러가 발생한다.

SyntaxError: Illegal continue statement: no surrounding iteration statement

결론

forEach는 순회를 목적으로 한다. 즉, 처음부터 끝까지 모든 요소에 대해 어떤 함수를 실행시킬 목적이 아니라면 forEach의 사용은 하지 않는다.

조건에 따른 탈출이나 재시작을 원한다면 for loop, while loop을 사용하자.