こんにちは、ともです。

JavaScriptを勉強していまして、他の言語でもあるfor文とかwhile文とかは理解できるんですが、for..of、for…inという文法について初めて知りました。

for..of・for…inについて理解を記事にしてまとめて置きます。

for…ofとfor…inの違い

端的にいうと

という違いだと理解しています。

for…in

let object = { key1: 'value1', key2: 'value2' }
for (const itr in object) {
            console.log('名前：' + itr + ', 値：' + object[itr]);
}

for(キー in object)は、仮変数にキー名を格納します。

ですので上記のサンプルではitrにkey1, key2の順に値が格納されます。

これはfor…inはオブジェクトリテラルを利用する際に重宝します。

for…in文は配列に対しても動作しますが、配列のインデックス番号が仮変数に格納されるだけですのでコードがスッキリしません。

for…in文はオブジェクトに対して利用するだけにします。

for…of

let object = ['huga', 'piyo']
for (const val of object) {
    console.log('値：' + val);
}
//値：huga
//値：piyo

for(キー of object)は、配列の値を仮変数に値を格納します。

オブジェクトは利用できませんのでObject.keysメソッドでオブジェクトのキーで構成された配列を作成することで利用できます。

let object = { key1: 'value1', key2: 'value2' }
let keysArray = Object.keys(object);
console.log(keysArray);
//["key1", "key2"]

このようにキーで構成された配列に変換後にfor...ofを利用することで利用可能です。

for (const key of Object.keys(object)) {
    console.log('値：' + object[key]);
}
//値：value1
//値：value2

まとめ

結論として次のことが分かりました。

違いを理解して利用していきたいです。