JavaScriptのfor in、for ofとは？
〜ループ処理について。

forとin? forとof？

for in/of文は、指定されたグループの内容に対して、ループ処理を行う構文です。
通常のfor文が

for(i=0;i<10;i++) ｛ ｝

というように、自分で反復条件や対象や範囲を設定するのに対して、for inやfor of文は

for(j in 「「１obj」」) ｛ ｝ for(k of 「「４array」」) ｛ ｝

配列やオブジェクトなどの指定先を決めて、その内容に対する反復処理を行います。
範囲があらかじめ決まっているので、無限ループ回避のための継続条件を指定する必要もありません。

今回はfor in文とfor of文のそれぞれの役割について、紹介していきます。
また１番頭を悩ませるところである「for inが配列に適さない理由」や「オブジェクトの値を得る方法」についても紹介していきます。
２つのループ処理を理解して、自分でも使いこなせるようになりましょう。

通常のfor文と比較。

for of文を使うと、フツーのfor文と比べて手続きがとてもシンプルになります。

for(i=0; i<arr1.length; i++) { console.log(arr1[i]); }

通常のfor文で行っている処理は、

① 「 i = 0 」←カウンター変数を宣言、初期化
② 「 i < arr1.length 」←継続条件を明記（無限ループ防止のため）
③ 「 i++ 」←反復処理の順序を明記
④ 「 arr1[ i ] 」←カウンター変数を配列のインデックスとして使うことで、値を取得

というように、配列の値を反復処理するために４つの手順が必要です。
一方、for of文。

for(let j of arr1) { console.log(j); }

宣言した変数「j」には、対象の値そのものが入ります。そして反復処理の対象には、あらかじめ要素の数や順番の決まっている配列「arr1」が指定されています。
そのため、

① 変数は宣言だけ。arr1[ 0 ]から処理を始めることが強制されるので、初期化は必要なし。
② 継続条件はarr1の要素の数。指定の必要なし。
③ 反復処理の順番はarr1のインデックス順。指定の必要なし。
④「 j 」には値そのものが入るので、あらためてarr1を呼び出して添字経由で値を取得する必要もなし。

といったよう。
値は予め取得され、反復に関する条件は指定先のarr1に強制的に定義されるため、コード・内部的な処理の両方をシンプルに実装することができます。

「let」は必要？

for(「「４let」」 a in obj) ｛ ｝ for(「「４let」」 b of array) ｛ ｝

ちょっと脱線しますが、for in/of文で変数を宣言するときの「let」の記述について。
書籍やサイトでの構文を見ていると、変数名の前に必ず「let」もしくは「const」をつけて宣言されています。しかし調査中に気付いたことなのですが、

for(a in obj) ｛ ｝ for(b of array) ｛ ｝

というように、変数宣言の際の「let」を省略してもプログラムはフツーに動きました。
４つのブラウザ（Chrome、Safari、Firefox、Edge)で動作確認済みです。

「letは必要ないんじゃないか？」と思う「ふ」でありますが、他の文献などにならって記事内では「let」を付けてコードを紹介していくことにします。

Object.valuesメソッドを使う。

Object.values(オブジェクト名)

Object.valuesメソッドは、オブジェクトの値を配列状にして取得することができます。先ほどのobj3に対して、

console.log(Object.values(obj3)); 「「３//▶︎ (2) ['anko', 'inko'] 」」

obj3の値が配列になって返りました。つまり、「順番を持つもの」として取得できたことになります。
これを使って、

for(let c of 「「１Object.values(obj3)」」) { console.log(c); } 「「３// ▶︎ anko // ▶︎ inko」」

値を順番にconsole.logすることができました。

for inのインデックスから取得。

あるいはfor inを使って、

for(let c in obj) { console.log(「「１obj[c]」」); } 「「３// ▶︎ anko // ▶︎ inko」」

for inで取得したプロパティを利用して、オブジェクトの値のほうにアクセスしています。このやり方でも値に対してのループ処理が可能です。

ちょっとふしぎなのが、

console.log(「「４obj.c」」); 「「３//▶︎ error」」

通常のオブジェクト→プロパティにアクセスするための「. 」でつなぐとエラーとなります。

console.log(「「１obj[c]」」);

⬆︎というように、プロパティを角括弧で囲まないとうまく動いてくれません。
ふしぎ。謎が解明されたら追記したいと思います。

インデックスに基づいていない。

let arr2 = ["イチロー","ジロー"];

ここで、この配列に要素を追加します。

arr2[3] = "シロー";

arr2[2]ではなく、[3]に要素を追加。
そうするとarr2の値の数は、

console.log(arr2.length); 「「３▶︎ 4」」

要素は「タロー」「ジロー」「シロー」の３つになったはずなのに、lengthは「４」と出力されました。インデックスと値を確認してみましょう。

console.log(arr2); 「「３ ▶︎ 0:"イチロー"」」 「「３ ▶︎ 1:"ジロー"」」 「「３ ▶︎ 2:「「４undefined」」」」 「「３ ▶︎ 3:"シロー"」」

インデックス[2]のところに、「undefined（未定義）」が追加されています。
配列は「順番を持つ」ものなので、[2]を飛ばして[3]の値を追加したとき、自動的に「未定義の[2]」が追加されるのです。

ちょっとふしぎな配列のこの性質ですが、便利な側面も持っています。
たとえば「出席状況を調べる」といった用途の場合、「undefined」を「欠席」として扱うことができるからです。

ここでfor in文が登場。
反復処理を使って、出席状況を調べてみましょう。

for(let n in arr2) { 「「３//値が存在するなら」」 if(arr2[n]) { 「「３//出席者の名前を出力」」 console.log(arr2[n]); } 「「３//値が存在しなければ」」 else { 「「３//欠席と出力」」 console.log("欠席"); } }

インデックスの値が存在すれば出席者の名前、存在しなければ「欠席」と出力するようにしました。
結果は............

「「３▶︎ イチロー」」 「「３▶︎ ジロー」」 「「３▶︎ シロー」」

「欠席」が無視された。

ん？ 欠席の表示が出ないですね？
インデックス[2]を「欠席」として扱いたかったのですが、「もともと無いもの」とみなされてしまいました。

〜つまりfor in文は、「インデックスを元に処理をしているわけではない」ということです。

こんどはfor of文を使ってやってみましょう。

for(let n of arr2) { 「「３//値が存在するなら」」 if(n) { 「「３//出席者の名前を出力」」 console.log(n); } 「「３//値が存在しないなら」」 else { 「「３//欠席と出力」」 console.log("欠席"); } }

for of文は「順番を持ったグループに、インデックスに基づいてループ処理を行う」構文です。

「「３▶︎ イチロー」」 「「３▶︎ ジロー」」 「「３▶︎ 欠席」」 「「３▶︎ シロー」」

結果。ちゃんとインデックスに基づいて反復処理がなされました。
インデックス[2]の人（←おそらくサブロー）の席は、「欠席」と出力されます。

これが、「for inが配列などの『順番をもつもの』に適さない理由」です。 順番が保証されていないといっても、「0,1,2」がいきなり「2,1,0」とかになってしまうわけではありません。

フツーに配列にfor inで値を取り出すと、順番に値が出てきます。ただしこれは「順番に処理がなされている」だけで、インデックスに基づいているわけではありません。
「順番が保証されていない」というのは、「インデックスに基づいていない」という意味だったのです。