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

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

 

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

 

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

 

 

for..in文とは

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

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

列挙可能プロパティとは

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

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

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

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

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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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