JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのfor...inループとfor...ofループの違いを徹底解説！正しい使い分けのポイント

for...inとfor...ofの基本的な違い

どちらのループ構文も繰り返し処理を行うためのものですが、最大の違いは「何を」反復処理するのかという点にあります。

for...inはオブジェクトのプロパティ名（キー）を列挙するのに対し、for...ofはオブジェクトが持つ値そのものを反復処理します。それぞれの特徴を具体例とともに見ていきましょう。

1) for...inループ

for...inループは、オブジェクトの列挙可能なプロパティを順不同で反復処理します。注目するのは値ではなく、あくまでプロパティ名（キー）です。

次の例では、for...inループを使って配列のプロパティを反復処理しています。配列の場合、インデックスも重要なプロパティであるため、各要素のインデックス（0、1、2）が出力されます。さらに、独自に追加したプロパティ「anotherOrg」に加え、継承されたプロパティである「inherProp2」や「inherProp1」まで出力されてしまう点に注意が必要です。

サンプルコード1

<html>
<body>
<script>
    Object.prototype.inherProp1 = function() {};
    Array.prototype.inherProp2 = function() {};
    var org = ["Apple", "Microsoft", "Tesla"];
    org.anotherOrg = "solarCity";
    for (var key in org) {
        document.write(key);
        document.write("</br>");
    }
</script>
</body>
</html>

実行結果

0
1
2
anotherOrg　// 独自プロパティ
inherProp2　// 継承されたプロパティ
inherProp1　// 継承されたプロパティ

このように、for...inはプロトタイプチェーン上にある継承されたプロパティまで列挙してしまうため、意図しない出力につながることがあります。

対処法：hasOwnProperty()でフィルタリングする

次の例では、hasOwnProperty()メソッドを使用することで、インデックスや「anotherOrg」といったオブジェクト自身のプロパティのみを出力し、継承された「inherProp1」や「inherProp2」を除外しています。

サンプルコード2

<html>
<body>
<script>
    Object.prototype.objCustom = function() {};
    Array.prototype.arrCustom = function() {};
    var org = ["Apple", "Microsoft", "Tesla"];
    org.anotherOrg = "solarCity";
    for (var i in org) {
        if (org.hasOwnProperty(i)) {
            document.write(i);
            document.write("</br>");
        }
    }
</script>
</body>
</html>

実行結果

0
1
2
anotherOrg

2) for...ofループ

for...inループとは異なり、for...ofループは、オブジェクトが反復処理対象として定義している値そのものを反復します。

次の例では、for...ofループを使って「Apple」「Microsoft」「Tesla」という配列の要素（値）が直接出力されています。インデックスではなく値を取得できる点が大きな特徴です。

サンプルコード

<html>
<body>
<script>
    var org = ["Apple", "Microsoft", "Tesla"];
    for (var key of org) {
        document.write(key);
        document.write("</br>");
    }
</script>
</body>
</html>

実行結果

Apple
Microsoft
Tesla

まとめ：使い分けのポイント

  • for...in：オブジェクトのプロパティ名（キー）を列挙したい場合に使用します。ただし継承されたプロパティも含まれるため、hasOwnProperty()によるチェックが推奨されます。
  • for...of：配列・文字列・Map・Setなどの反復可能（イテラブル）なオブジェクトから値を直接取り出したい場合に使用します。
  • 配列の反復処理では、予期しない挙動を避けるためにfor...inよりもfor...ofを使うのがベストプラクティスとされています。
  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方