🔄 JavaScriptのfor...inとfor...ofの使い分けガイド

post-cover

for...in, for... of について整理したのでメモ

for...in

特徴

  • 配列ならインデックス、オブジェクトならプロパティ名を取得できる

配列

const numbers = [1, 2, 3, 4, 5];

for (const index in numbers) {
  console.log(index); // Outputs: 0, 1, 2, 3, 4
}

オブジェクト

const person = { name: "John", age: 30, city: "New York" };

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

for...of

特徴

  • 値を取得できる
  • イテレータオブジェクトをループできる

配列

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number * 2);
}

オブジェクト

const person = { name: "John", age: 30, city: "New York" };

for (const value of Object.values(person)) {
 console.log(value); // Output: John, 30, New York
}

※personはイテレータオブジェクトではないので、Object.values でイテレータオブジェクトに変換する必要がある

console.log(Object.values(person)//  ['John', 30, 'New York']

まとめ

for...in はインデックス、プロパティ名を取得できる for...of は値を取得できる オブジェクトをfor...of でループする時は、Object.values で配列に変換してやる必要あり。


Profile picture
michael ☻︎ 🇯🇵
Web Engineer(PHP/Laravel, Python/FastAPI/Flask, TypeScript/Vue/React, AWS/GCP, etc.) / Freelance /
Profile picture
michael ☻︎ 🇯🇵
Web Engineer(PHP/Laravel, Python/FastAPI/Flask, TypeScript/Vue/React, AWS/GCP, etc.) / Freelance /
FebMarAprMayJunJul
© 2024, PWE