JavaScriptでのfor、forEachループ内での処理の止め方がわからない

Question

  let data = [1, 2, 3, 4, 5, 6, 7]

  data.forEach((res) => {
    if (res == 4) {
      return
    }
  })
  console.log('hogehuga')

  let data = [1, 2, 3, 4, 5, 6, 7]
  for (let i in data) {
    if (i === 4) {
      return
    }
  }
  console.log('hogehuga')

上記のようなケースでconsole.log('hogehuga')を通ることなく処理を止めたいのですがうまくいきません。

  let data = [1, 2, 3, 4, 5, 6, 7]
  let test = true

  data.forEach((res) => {
    if (res == 4) {
      test = false
      return
    }
  })
  if (test) {
    console.log('hogehuga')
  }

上記のようなループの中でフラグを持たせてconsole.log('hogehuga')の出し分けをするようなやり方ではなく早期returnで処理を止める方法はないのでしょうか？
このようなケースのベストプラクティスをご教示いただければ幸いです。申し訳ありませんがよろしくお願いいたします。

Answer 1

こんにちは

stackoverflow の質問「Short circuit Array.forEach like calling break 」に対するこの回答にあるように、try...catch を使うか、some を使うのがよいかと思います。

以下は上記2つの方法を、ご質問にあるコードに適用したサンプルです。(returnで抜けたい関数を f()としました。)

1. try ... catch を使う

function f(data) {
  try {
    data.forEach((res) => {
      if (res == 4) {
        throw "four is found."
      }
    })    
  } catch(e) {
    return
  }
  
  console.log('hogehuga', data)
}    


f([1, 2, 3, 5, 6, 7])    // => "hogehuga" [1, 2, 3, 5, 6, 7] が出力される。

f([1, 2, 3, 4, 5, 6, 7])    // => 何も出力されない。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/MWwmRLx?editors=0012

2.some を使う

こちらは、ご質問にあるコードのうち、 test に 4 があるかどうかの結果を入れるコードに近いです。forEachを使った場合との違いは、someを使うと4が見つかった時点でそれ以降の要素については調べないで、すぐ結果を返してくれることです。

function f(data) {
  // data の要素を先頭から調べて、4があったらすぐループを抜けて、test はtrueになり、4がなければfalseになる。
  const test = data.some(
    (res) => {
      return (res == 4) 
    }
  )
  
  if (!test) {
    console.log('hogehuga', data)
  }    
}    


f([1, 2, 3, 5, 6, 7])    // => "hogehuga" [1, 2, 3, 5, 6, 7] が出力される。


f([1, 2, 3, 4, 5, 6, 7])    // => 何も出力されない。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/wvadZOm?editors=0012

someを使うほうは、Qiita にも同様の投稿がありました。

• Array.forEachでbreak出来ないぐぬぬってなったらArray.some - suntokaedeさん

以上、参考になれば幸いです。

Comments

[oikashinoa]

>マイナスした人へ
なんで-1なんでしょうか？

ループを打ち切りたい→後続の処理を飛ばすことで早く処理を終わらせたい→try ... catchだとかえって遅くね？ってところなんですかね。

それならjsPerfなどで速度測定してから反論して欲しいです…

[jun68ykt]

@oikashinoaさん
コメントありがとうございます。
そうですね。ぜひ私も理由をご教示頂きたいと思っております。
ひとつ想像できるのは、回答に挙げたstackoverflow の質問への回答に対するコメントの中で、

Exception handling should NEVER be used as control flow. PERIOD. – frank Nov 10 '17 at 23:00

というコメントがあります。翻訳すると、「例外をフロー制御に使うべきじゃない。以上」という感じでしょうか。確かに、特に何かエラーが起きたわけでもないのに、例外をthrowするのはしっくりこないという風に感じる人もいらっしゃるだろうなとは思います。

[oikashinoa]

> 「例外をフロー制御に使うべきじゃない。以上」
そこは同意ですね。別の機会でソース読むときにTry...Catchされたら？になります。(コメント書いてあってもやだな。バグや想定外の動きが有った場合も気づかないし)

1. try ... catch を使う には注記を書いたほうが良いと思います。

Answer 2

forEach()だと難しいですが、Array.prototype.some()またはArray.prototype.every()を使うと失敗または成功時にその場でreturnっぽいことはできます。下記はsome()を使った例です。

const f = () => {
  let data = [1, 2, 3, 4, 5, 6, 7]

  if (data.some((res) => {
    console.log(res) // => 1, 2, 3, 4まで
    if (res == 4) {
      return true
    }
    return false
  })) return
  console.log('hogehuga')
}

ただ、いいコードかどうかはちょっと微妙です。

Answer 3

Array.forEach()は、「配列内の要素それぞれを引数に取って関数を実行する」というArrayのメソッドであり、ループとはちょっと違います。なので途中でやめたりはできません。

途中でやめたいなら普通にforループでbreakするべきでしょう。ちなみにfor...inはindexのループ、for...ofはvalueのループになります。
for...inでは順番が保証されない可能性があるので、このような配列の順番が重要なループでは普通のforかfor...ofを使うべきでしょう。

for (const d of data) {
    if (d === 4) break;
    console.log(d);
}
console.log('finish');

これで出力は

1
2
3
finish

になるはずです。

Array.forEachでのreturnは、「その関数を終了させる = 次の要素について実行」なので、普通のループで言うところのcontinueの挙動になりますね。
1個目のコードではvalueが4以外でifの先が実行されます。(ありませんが)
もし

data.forEach((res) => {
    if (res == 4) return;
    console.log(res);
}) ;
console.log('hogehuga');

としたら
出力は

1
2
3
5
6
hogehuga

です。
2個目のは、returnしたら関数が終わってしまうのでhogehugaは出力されませんね。またfor...inなのでvalueではなくindexを見てます。保証されませんがもしindexが昇順に参照できたとしたら、同じくif後にdata[i]を出力した場合出力は次のようになります。

1
2
3
4

Comments

[span]

ありがとうございます！大変参考になりました！

Answer 4

forEachは思いつかない。

(_=>{
  let data = [1, 2, 3, 4, 5, 6, 7]
  for (let i in data) {
    if (i == 4) { // for in なら文字列
      return // 関数内でないと。
    }
  }
  console.log('hogehuga')
})()
```**動くサンプル：**[https://jsfiddle.net/9qfc8rhu/](https://jsfiddle.net/9qfc8rhu/)

Comments

[span]

ご回答ありがとうございます、関数ないでないと。の部分がよくわからないのですが関数の場合と関数でない場合では挙動が変わってくるのでしょうか？

[span]

ちなみに関数内での使用を想定しております。申し訳ありませんがご教示頂けると幸いです。

[kei344]

> 関数の場合と関数でない場合では挙動が変わってくるのでしょうか？
単純に、関数外ではreturnが使えません。