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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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] フロントエンドで副業する学習方法を動画で公開中

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」を使ってチェックしてください。
 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

筆者プロフィール

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する