[JavaScript入門]for…inの使い方！オブジェクトでループ処理！

JavaScriptのfor inを使って、オブジェクトのプロパティでループ処理をする方法について書いています。
for inについて解説した後に、下記のことについて書いています。

配列を処理するときには、下記の記事を参考にしてみてください。
・[JavaScript入門]for文を使い方と、4パターンのコード(繰り返し処理)
・JavaScriptのArray.forEachメソッドの使い方！(配列要素で繰り返し処理)

for…in とは？

JavaScriptのfor inを使うと、オブジェクトの存在するプロパティ分、繰り返し処理ができます。
例えば、下記のように使うことができます。

let user = {
  name: 'taro',
  age: 33,
  address: '福岡',
}

for (const property in user) {
  console.log(property)
}

最初にuser変数にオブジェクトを代入しています。

その次の行で、for inを使っています。
inの左側が、オブジェクトのプロパティ名を受け取る変数で、右側がループしたいオブジェクトです。

ループするたびにproperty変数にオブジェクト名が入ります。
プログラムを実行すると、プロパティがある分ループして、下記のように全てのプロパティが出力されました。

name
age
address

値を取得する

オブジェクトのプロパティ名だけじゃなく、値を取得したいときには、オブジェクトをプロパティ名で参照すると良いです。
例えば、下記のようにして値を取得することができます。

let user = {
  name: 'taro',
  age: 33,
  address: '福岡',
}

for (const property in user) {
  const value = user[property]
  console.log(`property:${property} value:${value}`)
}

先ほどのプログラムのfor inブロックの処理を修正しました。
「user[property]」とすることで、user変数のオブジェクトにプロパティでアクセスしています。

取得した値をvalue変数に代入して、次の行でプロパティ名と一緒に出力しました。
結果を確認すると、下記のようになります。

property:name value:taro
property:age value:33
property:address value:福岡

プロパティ名と値のどちらも取得できていることが確認できました。

for…inでループされる順番は？

for inでは「配列を繰り返す」場合には、特定の順序で並べられる保証はないとのことです。(MDNドキュメントのこちらに記載がありました。)
そのため順序が重要な場合には、forEachループやfor ofを使うと良いようです。

オブジェクトの繰り返しのときには、動作確認すると定義されたオブジェクト順に返ってきているようです。

for…inを途中で抜ける(break)

for inを途中で抜けるときにもbreak文を使うことができます。
例えば、下記のように使うことができます。

let fruits = {
  peach: 'もも',
  orange: 'オレンジ',
  grape: 'ぶどう',
  apple: 'りんご',
}

for (const fruit in fruits) {
  if (fruit === 'orange') {
    break;
  }
  console.log(fruit);
}

fruits変数にオブジェクトを代入しています。
その次の行で、for inでループしました。

fruit変数でプロパティ名をひとつずつ受け取ります。
ループ内の処理で、if文でfruit変数と比べて、文字列の「orange」だったときにbreak文を使っています。

for inでオブジェクトの定義順に返ってきます。
そして、break文でループを抜けるため、peachだけが出力されました。

for…inで処理をスキップする(continue)

for inを処理をスキップするにもcontinue文を使うことができます。
例えば、下記のように使うことができます。

let fruits = {
  peach: 'もも',
  orange: 'オレンジ',
  grape: 'ぶどう',
  apple: 'りんご',
}

for (const fruit in fruits) {
  if (fruit === 'orange') {
    continue;
  }
  console.log(fruit);
}

先ほどと同じプログラムのbreak箇所をcontinueに変えました。
こうすると、fruit変数が文字列の「orange」の時だけcontinue文で、後続の出力処理をスキップします。

結果、下記のようにorange以外が出力されました。

peach
grape
apple

終わりに

今回はJavaScriptの「for...in」について書きました。

まとめると、下記になります。