【JavaScript】for..of vs in

1. 概要

‘for..of’と’for..in’はJavascriptの繰り返し構文ですが、目的によって使用されます。以下でそれぞれについて説明します。

2. for..of

’for..of’ループは繰り返し可能なオブジェクト（配列、文字列、Mapなど）に付いての処理のために使用されます。

2.1 数字の配列

const array = [1, 2, 3, 4, 5]; 
for (const element of array) {
  console.log(element)
  // ここで各要素に必要な処理をする
}

結果
1
2
3
4
5

2.2 文字列

const str = 'abcde';
for (const item of str) {
  console.log(item)
  // ここで各要素に必要な処理をする
}

結果
a
b
c
d
e

2.3 オブジェクト

const fruits = [{'name': 'banana'}, {'name': 'apple'}, {'name': 'grape'}];
for (const fruit of fruits) {
  console.log(fruit);
  // ここで各要素に必要な処理をする
}

結果
{'name':'banana'}
{'name':'apple'}
{'name':'grape'}

3. for..in

’for..in’ループはオブジェクトを列挙するために使用されます。オブジェクトのキーを確認するとが出来ます。

3.1 キーと値を取得

const address = { 'precture': 'tokyo', 'ku': 'shibuya' };
for (const key in address) {
  console.log(key);
  // ここで各要素に必要な処理をする
}

結果
precture
ku

3.2 DBクエリの結果からカラム名を取り出す

const userInfo= { 'id':'1001','email':'user01@example.com','gender':'Unselect','age':29,'avatar':'https://path/to' }; // クエリの結果
for (const column in userInfo) {
  console.log(column);
  // ここで各要素に必要な処理をする
}

結果
id
email
gender
age
avatar