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

JavaScriptの「for...of」と「for...in」の違いを徹底解説！使い分けのポイントとは

JavaScriptにはオブジェクトや配列を反復処理するための構文として「for...in」と「for...of」の2種類があります。似たような名前ですが、それぞれ扱う対象と目的がまったく異なります。本記事では、両者の違いを構文と実行例とともにわかりやすく解説します。

for...inループとは

「for...in」ループは、オブジェクトのプロパティ（キー）を順番に列挙するために使用されます。オブジェクトが持つすべての列挙可能なプロパティ名を取り出して処理できます。

構文

for (変数名 in オブジェクト) {
  実行するステートメントまたはブロック
}

以下の例では、for...inループを使ってWebブラウザのNavigatorオブジェクトが持つプロパティ名をすべて出力します。

実行例

<html>
<body>
<script>
var aProperty;
document.write("Navigator Object Properties<br /> ");

for (aProperty in navigator) {
document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
</script>
</body>
</html>

for...ofループとは

「for...of」ループは、反復可能（イテラブル）なオブジェクトの値を順番に取り出すために使用されます。対象となるのは、Array（配列）、Map、Set、arguments、文字列など、反復プロトコルを実装しているオブジェクトです。

構文

for (変数名 of 反復可能オブジェクト) {
  実行するステートメントまたはブロック
}

実行例

for...ofループを使って配列の各要素を処理する例を示します。

<!DOCTYPE html>
<html>
<body>
<script>
let itObj = [20, 30, 40, 50];

for (let res of itObj) {
res += 1;
document.write("<br>" + res);
}
</script>
</body>
</html>

出力結果

21
31
41
51

for...inとfor...ofの違いまとめ

両者の主な違いは以下のとおりです。

  • for...in：オブジェクトのプロパティ名（キー）を列挙する。配列に使うとインデックス（文字列）が返る。
  • for...of：配列やMapなどの反復可能オブジェクトの値そのものを順に取り出す。通常のオブジェクトには使用できない。

配列の要素を処理したい場合はfor...ofを、オブジェクトのプロパティ一覧を取得したい場合はfor...inを使う、と覚えておくと使い分けがしやすくなります。

  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

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

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

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