JavaScriptのfor..in文の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのfor..in文の使い方について現役エンジニアが解説しています。ループ処理をおこなう際に使うfor文と似ていますが、for..in文はオブジェクトなど列挙可能なプロパティを順番にループさせることが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのfor..in文の使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのfor..in文の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

for..in文とは

ループ処理をおこなう際に使うfor文と同じようなものです。

違いとしては、for..inではオブジェクトや配列などの中身を順不同でアクセスしてくれることです。そのため、for文のように変数宣言やループする条件などの記述をせずとも、中身のそれぞれの値を処理できます。
 

列挙可能プロパティとは

for..in文の対象になるのは、正確には中身のうち、「列挙可能プロパティ」に指定されているものだけです。

1つずつアクセスできる対象のプロパティを列挙可能プロパティと呼びます。単純に代入や初期化などで生成した値は全て列挙可能プロパティになります。

あまり意識することはありませんが、参考までに列挙不可能なものを上げると継承元のObjectのtoStringやlengthなどが列挙不可能に指定されたプロパティになります。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

for..in文の使い方

下記の構文のように記述することで、プロパティ名を格納する変数名にオブジェクトのプロパティ名が1つずつ格納されループします。

for(let 【プロパティ名を格納する変数名】 in 【オブジェクト】)

実際にオブジェクトを作って、for..inでコンソールにプロパティ名を表示してみます。

下記のコードで、name age getNameとコンソールに表示されます。

let obj = {
  name: '山田',
  age: 15,
  getName (){ return this.name}
}

for( let item in obj ) {
    console.log(item);
}

 

for..in文の注意点

主な注意点は2つです。

1.順番が保証されていない
実際に実行するとたいてい順番どおりに処理されるものの、順番が保証されていません。

そのため、特に配列のような順番に意味があるオブジェクトを、順番どおりに処理する際は「forEach」を使ってください。

2.列挙可能なものは継承したプロパティも対象になる
HTMLのタグを取得した場合など、ElementやNodeといった継承元のプロパティも対象になり下記のような大量のプロパティにもアクセスします。

parentElement childNodes firstChild lastChild previousSibling nextSibling nodeValue 
textContent hasChildNodes getRootNode normalize cloneNode isEqualNode isSameNode compareDocumentPosition 
contains lookupPrefix lookupNamespaceURI isDefaultNamespace insertBefore appendChild replaceChild 
removeChild addEventListener removeEventListener dispatchEvent ・・・

自身のプロパティだけに絞る場合は「hasOwnProperty」を使ってチェックしてください。
 

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。