MENU

JavaScriptでオブジェクトのキーと値をループ処理する方法

初歩的なんだけど割といつもググっているあたりに地力のなさが出ていてつらい。ChatGPT-4に聞いてまとめる。

まぁ結局はObject.entries()使おうという記事になる。あとfor ... in時のhasOwnProperty()の必要性についてとかも書かせてみた。

目次

イントロ

JavaScriptでオブジェクトのキーと値をループ処理するための方法はいくつかありますが、その中でも特に便利で使いやすい方法を3つ紹介します。それぞれの方法について、具体的なコード例とともに詳しく見ていきましょう。

for...inループを使用する

JavaScriptで最も基本的なオブジェクトのループ処理方法です。

let obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // obj 自身がそのプロパティを持っていることをチェック
    console.log(`Key: ${key}, Value: ${obj[key]}`);
  }
}

しかし、これはあまり制御力がなく、また配列などの特定のオブジェクトでは順序が保証されないため、使いどころは限定的です。

hasOwnProperty()が何故必要かについては後述します。

Object.keys()とArray.prototype.forEach()を使用する

この組み合わせは、オブジェクトのキーを配列として取得し、その配列をループ処理します。こちらの方法では順序が保証されます。

let obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach(key => {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
});

Object.entries()とArray.prototype.forEach()を使用する

こちらはオブジェクトのキーと値を配列として取得し、その配列をループ処理します。Pythonの dict.items() のように、キーと値のペアをイテレートしたいときに便利です。

let obj = {a: 1, b: 2, c: 3};

Object.entries(obj).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

この方法が最も直感的で、キーと値の両方にアクセスできるため、より複雑な処理に対応可能です。

【補足】hasOwnProperty()について

最初に紹介したfor ... inループで、なぜhasOwnProperty()が使われているのか、また何故他の2つの手法では使われていないのかについて説明します。

JavaScriptでは、オブジェクトはプロパティを他のオブジェクトから「継承」することができます。これは、オブジェクトが他のオブジェクトの「プロトタイプ」となり、そのプロパティとメソッドを共有するという特性によるものです。このプロトタイプチェーンという仕組みはJavaScriptの強力な特性の一つですが、オブジェクトをループ処理する際には注意が必要です。

for...inループを使用すると、オブジェクト自身のプロパティだけでなく、プロトタイプチェーン全体を通じて継承されたプロパティもループされます。

以下に具体的な例を示します。

Object.prototype.extra = "Unexpected!";

let obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
    console.log(key, obj[key]);  
}

上記のコードを実行すると、出力は以下のようになります。

a 1
b 2
c 3
extra Unexpected!

上記の例では、Object.prototypeに新たなプロパティ extra を追加しています。Object.prototypeはすべてのオブジェクトが継承する基本的なプロトタイプなので、この新たなプロパティはすべてのオブジェクトで利用可能になります。そのため for...in ループは extra プロパティも巡回します。

(注意:Object.prototypeにプロパティを追加することは、一般的には推奨されません。これは全てのオブジェクトに影響を与え、予期しない副作用を引き起こす可能性があります。この例は、for...in ループと hasOwnProperty() メソッドの動作を説明するためのものであり、実際のコードではこのような方法は避けるべきです。)

しかし、通常はオブジェクト自身が持つプロパティだけを対象にしたいと思うでしょう。そのため、ループ内で hasOwnProperty()メソッドを使用します。このメソッドは、オブジェクト自身が指定されたプロパティを持つ場合にtrueを返し、継承されたプロパティの場合はfalseを返します。

したがって、 for...inループを使用する際には、 hasOwnProperty()メソッドを使用してループ処理の対象をオブジェクト自身のプロパティに制限することが一般的です。これにより、意図しないプロパティがループ処理の対象となることを防ぎます。

一方でObject.keys()Object.entries()は、オブジェクト自身が持つ列挙可能なプロパティのキー(あるいはキーと値のペア)だけを取得します。これらのメソッドはプロトタイプチェーンを通じて継承されたプロパティを無視するため、hasOwnProperty()メソッドを使用してフィルタリングする必要がありません。

したがって、オブジェクト自身のプロパティだけを対象にしたループ処理を行う場合には、Object.keys()Object.entries()を使用することが推奨されます。これらのメソッドは、キーと値のペアの順序も保証するため、より予測可能で制御可能なループ処理が可能になります。

まとめ

以上、JavaScriptでオブジェクトのキーと値をループ処理するための3つの主な方法を紹介しました。それぞれの特性を理解し、シチュエーションに応じて最適なものを選んでください。コードは動的なものであり、より良い解決策が見つかる可能性もあります。どの方法を選ぶにせよ、常に自分のコードを見直し、最適化の機会を探すことを忘れないでください。

寸評

初心者向けの記事ならすぐに書けるね。ついでに深掘りしたいところについて書かせることで、ワンランク上の技術記事になる。なかなか良い感じ。

さて、恒例の質問例。

  1. JavaScriptでオブジェクトのループを回したい
  2. どれを使えばいいの?
  3. なるほど。では、Pythonでいうところ dict.items() みたいな挙動をさせたければ、Object.entries()がよさそうだな。
  4. OK、JavaScriptのキーとペアでループ処理したい時の方法として、ブログ記事風にまとめてくれ。具体的に簡単に試せるコードの例を適宜つけてくれ。また、記事は適度に見出しを入れて構造的にしてくれ。
  5. for ... in でなぜhasOwnProperty() を使う必要があるかについて、詳細な説明をしたほうがいい。
  6. for ... in だと意図しないプロパティがあるかもしれないことがわかる、具体的な例はあるか

けっこうポイントついて質問していることがわかるだろう。質問一発でぽんと出てくる記事はそのままでは使えない。しかし、突っ込めばそれらしくなってくる。

目次