【javascript】forとforeachの返り値を渡す方法が違うことを今更知った

実際に作業をしながら気づいたことなのですがforとforeachとでreturnの動作が異なることがわかりました。

ので今回はその二つの予約語の返り値の違いについて少し書いていきます。

まずforとforeachの書き方をおさらい。

</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>const data = [<br />{id: 1, "name": anna, live: Moskva},<br />{id: 2, "name": george, live: turkey},<br />{id: 3, "name": harada, live: ""},<br />{id: 4, "name": leonard, live: newyork},<br />]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>for(var i = 0; i &lt; data.length; i++){<br />if(data[i].live === ""){<br />return false;<br />}<br />return true;<br />}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>const nation = {<br />japan: 'tokyo',<br />usa: 'Washington',<br />china: 'beijing',<br />canada: '',<br />}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Object.keys(nation).forEach(function (key) {<br />if(key in nation){<br />if(nation[key] === ""){<br />return false;<br />}<br />}<br />});<br />return true;</p>
<pre>

これだけ見ると同じ動作をするよねって期待してしまいます。がforeachのほうは

falseとして返ってくることはありません。衝撃の真実。

for文はreturnで途中で抜けることができるが、forWachは途中で抜けることができず

最後まで回り続けます。

代替え対策として、事前に変数を用意して値が空白だった時にfalseを代入する手段があります。

</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>const nation = {<br />japan: 'tokyo',<br />usa: 'Washington',<br />china: 'beijing',<br />canada: '',<br />}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let break_point = true;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Object.keys(nation).forEach(function (key) {<br />if(key in nation){<br />if(nation[key] !== ""){<br />break_point = false;<br />}<br />}<br />});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>if(break_point === false){<br />return false;<br />} else {<br />return true;<br />}</p>
<pre>

まず、一つでも条件にあった場合変数break_pointにfalseを代入。

一通り処理が完了したら先ほどのbreak_pointがfalseかどうか確認。

条件にあった場合returnでfalseを返す。一つも空白がなかった場合はtrueを返しています。

このように、変数を追加するだけで擬似的にreturnを返すことができます。

両方よく使うだけにこれを知らなくて使っていたとは危なっかしい。