【JavaScript】for-ofとfor-inの違い

for-ofとfor-in

どっちがどっちかわからなくなるときがあるのでメモ

for-of

配列の要素の繰り返しに特化している

namesの値を一つずつnameに代入する。

main.js

const names = ['田中', '山田', '佐藤', '井上'];

for (const name of names) {
  console.log(name);
}

// 田中
// 山田
// 佐藤
// 井上

---

また、for-ofでは分割代入と同じ記述が使用でき、複雑な構造を持つ配列から
必要な要素だけを取り出すことができる。

main.js

const personInfo = [
  { name: '田中', age: 22 },
  { name: '山田', age: 21 },
  { name: '佐藤', age: 24 },
  { name: '井上', age: 20 },
];

for (const { age } of personInfo) {
  console.log(age);
}

// 22
// 21
// 24
// 20

for-if

オブジェクトの各プロパティの値に対する繰り返しに特化している。

personInfoのプロパティ名を一つずつinfoに代入している

main.js

const personInfo = {
  name: '田中',
  age: 22,
  height: 170,
}

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

// name : 田中
// age : 22
// height : 170

---

配列に対してはindexを代入する。
namesのindexを一つずつnameに代入している

main.js

const names = ['田中', '山田', '佐藤', '井上'];

for (const name in names) {
  console.log(name);
}


// 0
// 1
// 2
// 3