자바스크립트 forEach 루프에 대해 몰랐던 3 가지

 

1. return은 loop를 stop하지 않는다.

아래 코드가 루프를 돈 다음 1,2까지만 돌고 중지한다고 생각하십니까?

array = [1, 2, 3, 4];
array.forEach(function (element) {
  console.log(element);

  if (element === 2) 
    return;

});
// Output: 1 2 3 4

 

아니요, 그렇지 않습니다. 당신이 자바 배경에서 온다면, 아마도 그것이 어떻게 가능한지 스스로에게 물어볼 것입니다.
그 이유는 forEach 함수에서 콜백 함수를 전달하기 때문입니다.
forEach 함수는 일반 함수처럼 작동하며 하나의 요소에서 반환하더라도 요소가 2 인 경우 각 요소에 적용됩니다.\

 

From the official MDN docs

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

 

Early termination may be accomplished with:

• A simple for loop
• A for...of / for...in loops
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

Array methods: every(), some(), find(), and findIndex() test the array elements with a predicate returning a truthy value to determine if further iteration is required.

 

위 코드를 코드를 재작성 해보겠습니다.

const array = [1, 2, 3, 4];
const callback = function(element) {
    console.log(element);

    if (element === 2) 
      return; // would this make a difference? no.
}
for (let i = 0; i < array.length; i++) {
    callback(array[i]);
}
// Output: 1 2 3 4

 

2. break를 할 수 없다.

아래 예제에서 aforEach 루프가 중단(break) 될 것이라고 생각하십니까?

const array = [1, 2, 3, 4];
array.forEach(function(element) {
  console.log(element);

  if (element === 2) 
    break;
});
// Output: Uncaught SyntaxError: Illegal break statement

 

조건에 만족하더라도 중단되지 않습니다. break 명령어 또한 forEach에서 지원하지 않습니다.

 

for문을 사용하여 break 해야합니다.

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);

  if (array[i] === 2) 
    break;
}
// Output: 1 2

 

3. continue도 할 수 없다.

아래 코드가 콘솔에 2 출력을 건너 뛰고 1 3 4 만 표시한다고 생각하십니까?

const array = [1, 2, 3, 4];
array.forEach(function (element) {
  if (element === 2) 
    continue;

  console.log(element);
});
// Output: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

 

동작하지 않습니다. continue 명령어는 break 명령어와 유사하게 루프 상태에서 실행되지 않습니다.

 

continue 또한 for loop를 사용합시다.

for (let i = 0; i < array.length; i++) {
  if (array[i] === 2) 
    continue;

  console.log(array[i]);
}
// Output: 1 3 4

 

 

* 출처

https://medium.com/front-end-weekly/3-things-you-didnt-know-about-the-foreach-loop-in-js-ff02cec465b1