【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の用途・違いについて紹介しました。
以上で解説を終わります。