こんにちは!今日はJavaScriptのループにおいてよく混同されるreturn、continue、breakの違いについて握手会を例に説明したいと思います!すごい例だな

※握手会とは

一般的には、対象となる団体に所属する全員と順番に握手をすることです。

エンジニア的には.forEachの中に握手の処理が入るようなイメージで大丈夫です:)

gruop.forEach(_ => {
  //ここで握手
})

握手会におけるreturn、continue、break

return

自分「いつも応援してます!(満面の笑顔)」

相手「ありがとうございます!(満面の笑顔)」

握手会においては自分がリスペクトを示せば幸せが貰えますし、終了後は次の方とも続けて握手が可能です!

JavaScriptのループにおけるreturnも関数に入力を示せば戻り値が貰え、終了後はさらに次の処理を続けることができます:)

得るものがあり、次の処理もできるのがreturnです。

continue

自分「あざっす…」

相手「」

握手会においては自身の存在感が不十分であると相手からの反応もありません。 一応終了後は次の方とも握手できますがねー

JavaScriptのループにおけるcontinueも戻り値が返りません。ただ、次の処理は継続可能です。

得るものはないけど、次の処理は可能なのがcontinueです。

break

自分「わーわー暴れてやる」

相手「」

スタッフ「ちょっとよろしいですか?」

握手会において法を破る行いは即出禁です。相手からの反応もないし、次の握手もできません。

JavaScriptのループにおけるbreakも戻り値が返りません。次の処理も行えず、ループはここで終了。

得るものもなく、次の処理もできないのがbreakです。

実際どれを使う?

returnだけしか使わなくていいです。continueとbreakは処理が手続き的になるので、挙動が読みにくい…

握手会でもcontinueやbreakの人がいると列が乱れるんで大変。returnでいきましょう:) 幸せを与えれば幸せが返ってきますよ<3<3<3

JavaScriptはアロー関数を用いることでreturnが(記述上は)省略可能です。

returnを省略するように書けば関数がシンプルになり、関数型プログラミングの考え方も身につきますよ!

今日はここまで!

余談

筆者が女性アイドルグループHELLO! PROJECTの大ファンで、 このブログもレイアウトをオマージュしています:)