ES6(for...of)

はじめに

javascriptにおける繰り返し構文は数多くあります。その中から用途を使い分けることが大切であると僕は考えます。今回扱う繰り返し構文の一つであるfor...ofは、イテレーターを持つオブジェクトの反復操作を行います。イテレーターは簡単にStringやArrayのことだと考えてください。（後日記事にする予定です。）
余談ですが、vscodeの自動補完機能でfor...ofを選択すると

for (const iterator of object) {//objectに含まれるiteratorを繰り返し操作。
  
}

アルバイト情報なら“マッハバイト”

コード上でのfor...of

言葉では小難しく感じる方もいらっしゃるかもしれませんが、実際のコードはシンプルです。

//配列
const array = [1, 2, 3, 4]
for (const val of array) {
  console.log(val); //1,2,3,4
}
//文字列
const string = 'Sasuke'
for (const str of string) {
  console.log(str); //S,a,s,u,k,e
}

配列であれば一つ一つの値(value)、文字列であれば一つ一つの文字(str)を取得できます。

また分割代入と組み合わせることも可能です。(分割代入の記事)

const array = [
  ["yes", "はい"],
  ["no", "いいえ"],
];
for (const [en,ja] of entries) {
  console.log(en);//'yes','no'
  console.log(ja);//'はい','いいえ'
}

for...inとの違い

for...ofでは値や文字を取得できたのに対し、for...inはindexを取得できます。

const array = [1, 2, 3, 4]
for (const val in array) {
  console.log(val); //0,1,2,3
}

const string = 'Sasuke'
for (const str in string) {
  console.log(str); //0,1,2,3,4,5
}

因みにfor...inではオブジェクトの反復操作が可能です。

const obj = {
  prop1: "string1",
  prop2: "string2",
  prop3: "string3",
  prop4: "string4",
};
for (let i in obj) {
  console.log(i);//prop1,prop2,prop3,prop4(プロパティを取得)
  console.log(obj[i]);//string1,string2,string3,string4(値を取得)
}

終わりに

以上がfor...ofになります。冒頭に述べましたが反復操作の構文では使い分けが大切です。であればfor...ofも配列における便利メソッド（forEach(),map(),filter()）で代用できると感じますが、、、コードの可読性を高めるためにも、反復操作での用途の使い分けは徹底していこう！と改めて感じました。