{category}

JavaScript - ループ

for...in

フォー イン(制御構文

意味 オブジェクトのプロパティ名を取得してループ処理


for...inとは?

オブジェクトのすべての列挙可能なプロパティに対して、ループを実行する。

for...inの具体的な使い方

オブジェクトのプロパティを列挙する例

const person = {
  name: '山田太郎',
  age: 30,
  job: 'エンジニア'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

👇出力結果

name: 山田太郎
age: 30
job: エンジニア

personオブジェクトの各プロパティ名(キー)とその値を出力します。for...inループを使用してオブジェクトの各プロパティを順に取得し、テンプレートリテラルを使って整形して出力します。

自身のプロパティのみを列挙

const obj = Object.create({inherited: 'これは継承プロパティです'});
obj.own = 'これは自身のプロパティです';

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

👇出力結果

own: これは自身のプロパティです

オブジェクトの自身のプロパティのみを列挙します。hasOwnPropertyメソッドを使用して、プロトタイプチェーンから継承したプロパティを除外しています。

for...inに関するよくある質問

Q. for...inは配列に使えますか?
A. for...inは配列にも使用できますが、インデックスを返すため、一般的には推奨されません。配列の場合はfor...ofループや従来のforループの使用が推奨されます。
Q. プロトタイプのプロパティも列挙?
A. はい、for...inループはプロトタイプチェーン上の列挙可能なプロパティも含めて列挙します。自身のプロパティのみを列挙したい場合は、hasOwnProperty()メソッドを使用して確認する必要があります。
Q. プロパティの順序は保証されますか?
A. for...inループでのプロパティの列挙順序は必ずしも保証されません。特に、数値キーと文字列キーが混在する場合、ブラウザによって順序が異なる可能性があります。

for...inが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか?
プログラミング単語帳には、JavaScriptのfor...inやcase(switch文で使用)、for...of、do...while、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。

1日5分の暗記でプログラミンが身に付く!プログラミング単語帳 公式ストアで発売中!

HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。


JavaScriptを学べる「プログラミング単語帳」アプリ

プログラミング単語帳がアプリになりました!JavaScriptはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。

収録単語は2,000単語以上!
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。

いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。

2024年7月アップデート情報:「Laravel」カテゴリーが追加されましました!

2024年8月アップデート情報:「MySQL」「Linux」カテゴリーが追加されましました!


関連するそのほかの単語

case(switch文で使用)

値に応じたアクション

種類: 条件分岐

for...of

配列やリストの要素を順番に取得してループ処理

種類: ループ

do...while

最低一度は実行し、条件が真である間繰り返すループ

種類: ループ

innerHTML

HTML内容の変更

種類: 基本的なDOMの要素とプロパティ

animationend

CSSアニメーションが終了したときのイベント。

種類: その他のイベント