JavaScriptのfor-in文での要素の取り出し順番について現役エンジニアが解説【初心者向け】

JavaScriptのfor-in文での要素の取り出し順番について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• for-in文とは
• for-ofとの違い
• for-in文での要素の取り出し順番について
• 実際に使ってみよう
• まとめ

 

for-in文とは

for-in文とは、オブジェクト型データのループ処理に特化したJavaScript標準の構文です。

for…inの構文

for( key in オブジェクト型データ ){ // 実際の処理 }

この時、keyの部分はitemなどの別の文字列でも構いません。1回のループ処理ごとに、変数keyにオブジェクト型データのプロパティが格納され、処理部分で処理が可能です。

オブジェクト型データとは

以下のような形式で定義されるデータをオブジェクト型データと呼びます。

let personTaro = { name : "Taro" , age : 20 , job : "engineer" };

この時、nameの部分をプロパティ、Taroの部分を値と呼びます。また、英語でkeyとvalueのセットであると表現されることもあります。

このkeyとvalueのセットをカンマ区切りで複数保持し、一番外側を中括弧 { } で囲んだものがオブジェクト型データです。

オブジェクト型データのループ処理

先ほどのオブジェクト型データは、3つのkey-valueセットを持っていました。そのため、ループ処理をする場合、3回ループすることで、すべてのプロパティと値のセットを処理することができます。

[PR] フロントエンドで副業する学習方法を動画で公開中

for-ofとの違い

for…of文は、ES2015 (ECMAScript 6) で新たに追加されたJavaScript標準の構文です。基本的に、配列はfor…of文を利用可能ですが、オブジェクト型はそのままでは利用不可能です。

for…ofはES2015から追加されたiterable object（反復可能なオブジェクト）以外のオブジェクトで実行すると、エラーになります。for…inとfor…ofが紛らわしいと思う方は、for…inだけ覚えておけば大丈夫です。

ちなみに、配列のループ処理では配列に実装されたforEachメソッドを使うのが通常ですので、配列のループ処理にはforEach()を使いましょう。

for-in文での要素の取り出し順番について

オブジェクト型データの特性

オブジェクト型データは、配列と違って、持っているデータに順序の定めがありません。

Java言語におけるSetのようなイメージです。JavaのSetはListと違って、順序に関する情報を持っていません。ですから、for-in文を使ってループ処理をする場合、必ずしもオブジェクト型データに格納した順番に処理が進まない点に注意しましょう。

実際のループ処理について

オブジェクト型データは順序に関する情報を保持しないのが基本的な仕組みです。

しかし、実際に以下のようなデータをループ処理すると、プロパティの定義順に処理が進みます。

let personTaro = { name : "Taro" , age : 20 , job : "engineer" };

必ずしも順番は保証されませんが、プロパティが文字列の場合は、だいたい定義順に処理されることも覚えておきましょう。

ちなみに、プロパティ (key) に数値を指定している場合には、ループ処理は数値で昇順ソートされた状態で実行されます。

実際に使ってみよう

実際にfor…in文を使ってオブジェクト型データのループ処理を実行するサンプルプログラムをご紹介します。

オブジェクトのプロパティを全出力する

オブジェクトのプロパティを全出力してデータの仕様が確認できるプログラムを実行してみましょう。

JavaScript

// key-valueセットを3つ持ったオブジェクト
let personTaro = { name : "Taro" , age : 20 , job : "engineer" };

// 3回ループ処理します
for( key in personTaro ){
  console.log(key);
}

 

実行結果

name
age
job

 

オブジェクトのkeyとvalueを同時にループ処理する

応用編として、プロパティだけでなく、値も同時に処理可能なプログラムも実行してみましょう

JavaScript

let personTaro = { name : "Taro" , age : 20 , job : "engineer" };

for( key in personTaro ){
  console.log( `${key}は${personTaro[key]}です。`);
}

 

実行結果

nameはTaroです。
ageは20です。
jobはengineerです。

 

まとめ

for…in文は、JavaScriptのオブジェクト型データを使ったロジックを実装する時に必須の構文です。ぜひ使いこなして、難しいデータ処理を成功させていきましょう。

筆者プロフィール

寺谷文宏 ( Teratani Fumihiro ) Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAcademyではフロントエンド、Javaコースを担当。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。