JS for…in と for…of の使い方 for…of を推奨する理由

今回は、「for文」の説明の時に、ご紹介出来なかった「for…in」と「for…of」についてご紹介させていただきます。

「for文」について、忘れてしまった方は、以下を事前に読んでおくと理解がスムースです。

for…in

「for…in」はオブジェクトから要素を取り出す時に使用します。

以下に例を見ていきます。

let person = {
    name : '太郎',
    age : 33,
    address : 'Tokyo'
};

このオブジェクトから要素を取り出します。

for( let i in person){
    console.log(i);
}
 name
 age
 address

keyを取り出す場合は変数名を記述してください。

for( let i in person){
    console.log(person[i]);
}

 太郎
 33
 Tokyo

値を取り出す場合は変数を「[]」で囲ってください。

let plus = ['太郎', '33', 'Tokyo'];

for(let i in plus){
    console.log(i);
}
 0
 1
 2

配列に対して使用すると、インデックスを返します。

「for…of」は配列などから値を順に取り出します。

let plus = ['太郎', '33', 'Tokyo'];

for(let i of plus){
    console.log(i);
}
 太郎
 33
 Tokyo

先程、「for…in」で使ったコードを「for…of」に書き換えてみました。

インデックスではなく、値が返されているのが分かると思います。

先程、「for…in」を配列に使用して、インデックスを返す動作を見ましたが、本来はあまり推奨されない使い方です。

一応、「for…in」と「for…of」の使い分けとしては、以下のようになっています。

その理由として、「for…in」ではコードに関数などが含まれている場合、値だけでなく、関数等も返してしまう場合があります。

また、処理する順番が決められているわけではないので、予期せぬトラブルが起こる可能性があります。

配列で使用する際は、「for…of」を選択するようにしておきましょう。

いかがでしたか。

使い方自体は難しくなかったと思います。

前回の記事と合わせて、「for文」に関する基本的な使い方はすべて学習しました。

ぜひ積極的に利用して、マスターしてください。

今回も最後までお読み頂きありがとうございました。