• JavaScript

【JavaScript】for…inとfor…ofの用途・違いについて

JavaScriptのfor…in文とfor…of文用途について知りたい。

それぞれの違いについても知りたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

for…in文の用途

//オブジェクト
obj = {
"佐藤": 30,
"鈴木": 20,
"高橋": 40
} 

//  for...inでオブジェクトから値を取り出し
for(const key in obj) {
  console.log(`${key}さんは${obj[key]}歳です。`);
}

//  コンソール結果
// 佐藤さんは30歳です。
// 鈴木さんは20歳です。
// 高橋さんは40歳です。

for…in文を使ったコード例です。

for…in文はオブジェクトをループで取り出す用途に使われます。

使い方は以下の通りです。

for(任意の変数 in オブジェクト) {
実行処理
}

forの条件式に任意の変数 in オブジェクトを指定します。

任意の変数にはオブジェクトのプロパティが入ります。

プロパティの値を取り出したい場合は、for…inのループ内でオブジェクト[任意の変数]で出力できます。

for…of文の用途

//配列
array = ["佐藤","鈴木","高橋"];

//  for...ofで配列から値を取り出し
for(const value of array) {
  console.log(`${value}`);
}

//  コンソール結果
// 佐藤さん
// 鈴木さん
// 高橋さん

for…of文を使ったコード例です。

for…of文は列挙可能なオブジェクト（配列、NodeList、arguments等）から値を取り出す用途に使われます。

使い方は以下の通りです。

for(任意の変数 of 列挙可能オブジェクト) {
実行処理
}

forの条件式に任意の変数 of 列挙可能オブジェクトを指定します。

任意の変数には列挙可能オブジェクトの値が入ります。

for…in文とfor…of文の違い

for…in文とfor…of文の違いは以下の通りです。

for…in文

オブジェクトを操作する用途に使われる。
プロパティを取り出す
配列などには使えない（ループの順序が保証されない）
prototypeでオブジェクトを拡張してしまうとその拡張した関数・メソッドもプロパティとして取り出される。

for..of文

列挙可能なオブジェクト（配列、NodeList、arguments等）を操作する用途に使われる。
値を取り出す

上記の違いがあります。

使用用途によって使い分けましょう。

まとめ

JavaScriptのfor…inとfor…ofの用途・違いについて紹介しました。

以上で解説を終わります。