オブジェクト型(参照型)のfor...ofとfor...in

投稿日時 : 2025/02/17 更新日時 : -

JavaScriptの参照型で配列とオブジェクトについて学んだ。オブジェクトにはループ処理をする際にとても便利なfor文のinとofが使えるのでそれぞれ見てみよう。

配列のループ処理 for...of

配列は1つの箱に値が順に並んで入ったイメージだ。この1つ1つの値を要素と呼ぶが、これを順番に取得する方法を紹介する。


let array = [10, 20, 30, 40, 50];

for (let i of array) {
  console.log(i);
}

上記のコードは配列のarrayをfor文のofでループして順番に値を表示している。普通のfor文でループするよりも見やすいし、条件式がないのでfor文のように条件式を間違えてバグになる事も少なくなりそうだ。

for ofは全ての要素を処理するまで終わらない。もし配列で特定の範囲内だけループをして値を取り出したいなら普通のfor文でループ処理をした方がよい。

オブジェクトにもループ処理をするfor inが用意されているので紹介する。


let person = {
  name: "シュェリー",
  age: 28,
  hobby: "cooking"
};

for (let key in person) {
  console.log(key + " : " + person[key]);
}

name : シュェリー
age : 28
hobby : cooking

上記コードはpersonという名前のオブジェクトを宣言し、各プロパティのキーとその値をfor...inで表示している。keyでプロパティを取得して、オブジェクト名[キーになる変数]で値を取得している。

オブジェクトがfor...inで配列がfor...ofなのですね。間違えて使っても大丈夫なのですか？

いや、エラーになる。基本的にオブジェクトはfor...inで配列はfor...ofを使うが、頑張ればfor...ofでもオブジェクトをループ処理させる事はできるらしい

どっちがどっちか覚えられません！

英語の話になるがオブジェクトはプロパティでたくさんの要素があるだろう。たくさんあるからその中を見るイメージでinって覚えればよいのではないかな。逆にofは複雑ではない部分的なイメージがあるな