【ES6】JavaScript：for…in文とは？書き方を解説！

分かりやすくたとえると「フォルダの中にフォルダがあり、そのフォルダの中にまたフォルダがある」というような、階層的になっている状態です。

プログラムでは、オブジェクトの中にオブジェクト（または配列）が入っているような構造のことを、ネスト構造と呼びます。

こちらはオブジェクトの中にオブジェクトに入れた例です。

const book = {
  title: "吾輩は猫である",
  author: "夏目漱石",
  publisher: {
    name: "東洋文庫",
    year: 1905
  }
};

こちらはオブジェクトの中にオブジェクト入れ、さらにその中にオブジェクトを入れた例です。

const single = {
  title: "キセキ",
  artist: "GReeeeN",
  releaseYear: 2008,
  tracks: {
    track1: {
      title: "キセキ",
      duration: "4:35",
      lyricist: "GReeeeN",
      composer: "GReeeeN"
    },
    track2: {
      title: "ルーキーズ",
      duration: "3:55",
      lyricist: "GReeeeN",
      composer: "GReeeeN",
      arranger: "GReeeeN"
    }
  },
  genre: "J-POP"
};

こちらはオブジェクトの中にオブジェクトと配列を入れた例です。

const student = {
  name: "山田太郎",
  age: 16,
  grade: 2,
  class: "A組",
  contact: {
    phone: "090-1234-56XX",
    email: "yamada@example.com"
  },
  subjects: ["国語", "数学", "英語", "理科", "社会"],
  scores: {
    国語: 85,
    数学: 92,
    英語: 78,
    理科: 88,
    社会: 90
  },
  club: {
    name: "野球部",
    position: "ピッチャー"
  },
};

1. const user = {};
   「user」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (const key in user)
   「user」の中にある「キー（name, age, gender）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. console.log(key);
   変数「key」の中身をコンソール画面に表示する。

【オブジェクトのコード】

const user = {
  name: "ぶたさん", // キー: 値
  age: 25,         // キー: 値
  gender: "男性"   // キー: 値
};

【for文のコード】

for (const key in user) {
  console.log(key);
}

1. const user = {};
   「user」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (const key in user)
   「user」の中にある「キー（name, age, gender）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. console.log(user[key]);
   変数「key」の中にある値（user[key]）をコンソール画面に表示する。

【オブジェクトのコード】

const user = {
  name: "ぶたさん", // キー: 値
  age: 25,         // キー: 値
  gender: "男性"   // キー: 値
};

【for文のコード】

for (const key in user) {
  console.log(user[key]);
}

1. const user = {};
   「user」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (const key in user)
   「user」の中にある「キー（name, age, gender）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. console.log(key);
   取り出した「キー（key）」と「値（user[key]）」をコンソール画面に表示する。
   コンソール画面に「キー: 値」の形で表示する。

【オブジェクトのコード】

const user = {
  name: "ぶたさん", // キー: 値
  age: 25,         // キー: 値
  gender: "男性"   // キー: 値
};

【for文のコード】

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

1. const user = {};
   「user」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (const key in user)
   「user」の中にある「キー（name, age, gender）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. if (key === "age") {break;}
   もし「key」が「age」と同じになったら処理を中断する。
4. console.log(key);
   「key」の中身をコンソール画面に表示する。

1. const book = {};
   「book」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (const key in book)
   「book」の中にある「キー（name, age, gender）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. const value = book[key];
   「key」に対応する中身（値）を取り出して「value」に入れる
4. if (typeof value === "object") {
console.log(`▼ ${key}`);
for (const nestedKey in value) {
console.log(` ${nestedKey}: ${value[nestedKey]}`);
}
   「value」がオブジェクトなら見出し（たとえば▼publisher）を表示して、中の情報（nameやyear）を順番に表示する。
5. else {console.log(`${key}: ${value}`);}
   「title」や「author」のように、中がふつうの文字だったらそのまま表示

【オブジェクトのコード】

const book = {
  title: "吾輩は猫である",
  author: "夏目漱石",
  publisher: {
    name: "東洋文庫",
    year: 1905
  }
};

【for文のコード①】

for (const key in book) {
  const value = book[key];

【for文のコード②】

  if (typeof value === "object") {
    console.log(`▼ ${key}`);
    for (const nestedKey in value) {
      console.log(`  ${nestedKey}: ${value[nestedKey]}`);
    }
  } else {
    console.log(`${key}: ${value}`);
  }
}

1. const user = {};
   「car」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (const key in car)
   「car」の中にある「キー（brand, model, year）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. if (Object.hasOwn(car, key))
   そのキーが自分で作ったオブジェクト「car」のプロパティかどうかをチェックする。
4. console.log(`${key}: ${car[key]}`);
   取り出したキー（key）と値（car[key]）をコンソール画面に表示する。

1. const fruits = ["りんご", "バナナ", "みかん"];
   「fruits」という名前の配列を作り、その中に「りんご」「バナナ」「みかん」を入れる。
2. for (const [index, value] of fruits.entries()) {
   「car」の中にある「キー（brand, model, year）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. if (Object.hasOwn(car, key))
   「fruits.entries()」で配列の番号と値を1つずつ取り出して「index」と「value」という変数に入れる。
4. console.log(`${index}: ${value}`);
   変数「index」と「value」の中身をコンソール画面に表示する。