JavaScriptの制御構文(4)〜for...in命令とfor...of命令〜

はじめに

こんにちは！
今日も備忘録として投稿させて頂きます！
昨日は、繰り返し処理で使うfor命令について投稿しましたが、今日は、連想配列(オブジェクト)や配列などの繰り返し処理を実行する際に使う、for...in命令、for...of命令について投稿します！

for…in命令

連想配列(オブジェクト)の要素を取り出して、先頭から繰り返し処理をしていく命令には、for…in命令を使います。

for(仮変数 in 連想配列) {
    繰り返す処理
}

for…of命令

配列などを順番に列挙し繰り返し処理をしていく命令には、for…of命令を使います。for…of命令は、ES2015で新しく追加された命令です。
配列以外にも、NodeListやイテレータ・ジェネレータなども処理できます。

for(仮変数 of 列挙可能なオブジェクト) {
    繰り返す処理
}

for...in命令とfor...of命令の両方に、共通して見られる、「仮変数」とは、連想配列(オブジェクト)のキーや、配列の要素を一時的に格納する変数のことです。名前はなんでもオッケー！
(ただし、あとで見てもわかりやすいものにすること。)

具体例

例)連想配列(for...in命令)

let datas = { apple: 300, banana: 120, watermelon: 500 };
for (data in datas) {
    console.log(data + '=' + datas[data]);
}

// 結果
// apple=300
// banana=120
// watermelon=500

上記の例では、変数datasに連想配列(オブジェクト)が格納されており、変数dataに、apple・banana・watermelonといったキーが一旦格納されます。
そして、繰り返し処理をする際に、
連想配列全体の変数datas[ キーを格納している変数data ]
によって、要素を順に取り出して処理をしています。
また、配列の時にも使えます!
が、あまり推奨はされていないみたいですね...

例)配列など(for...of命令)

let datas = ['apple', 'banana', 'watermelon'];
for (data of datas) {
    console.log(data)
}

// 結果
// apple
// banana
// watermelon

上記の例では、変数datasに配列が格納されており、変数dataに、apple・banana・watermelonといった、配列の要素が一旦格納されます。
そして、繰り返し処理をする際に、
要素を指定すると、処理が実行されて、consoleには要素の値が順に表示されます。
ただし、連想配列には使えません。

このように、連想配列(オブジェクト)や配列に関しては、通常のfor命令ではなく、for…in命令や、for…of命令を利用します。
これまで、いくつか個人開発をしていて思うのは、この文法結構よく使っているなと感じます！
特に、最初に紹介した、for...in命令は、ユーザーによる入力値をリスト表示したりする時など、出てきたりしましたね！

今日はここまでです！
理解不足等による、不備等ございましたら、コメントお願い致します！

参考文献

山田祥寛著『[改訂新版]JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』(2018)
※第1刷は、2016年。