JavaScript オブジェクトにプロパティを追加する方法

ここでは JavaScript オブジェクトにプロパティを追加する方法について説明します。

プロパティを追加する方法

オブジェクト変数名にドット . で新しいプロパティ名を指定

JavaScript のオブジェクトにプロパティを追加する簡単な方法は、オブジェクト変数.プロパティ名 として値を代入することです。 いきなり代入してしまえば、自動的にプロパティが作成されます。

実際に試してみましょう。

映画 film を表すオブジェクトがあります。はじめの状態で、タイトル title プロパティに "Star Wars" が設定されています。

let film = {
    title: "Star Wars" 
};

console.log(film); // {title: "Star Wars"}

そこで次のように、 映画監督 director プロパティを作ります。オブジェクトの変数 film にドット . で新しいプロパティ名を指定しています。

film.director = "George Lucas";

console.log(film); // {title: "Star Wars", director: "George Lucas"}

オブジェクト変数名に[] でプロパティ名を指定して代入

もうひとつ、JavaScript のオブジェクトにプロパティを追加する方法があります。

オブジェクト変数名に続けてブラケット [] でプロパティ名を文字列で指定して値を代入する方法です。

上記と同じ例で、動作を見てみましょう。

let film = {
    title: "Star Wars" 
};

console.log(film); // {title: "Star Wars"}

film['director'] = "George Lucas"; // プロパティを追加

console.log(film); // {title: "Star Wars", director: "George Lucas"}

元々そのオブジェクトに、キーで指定したプロパティがあれば、代入によって上書きされます。

キーで指定した名前のプロパティが存在していなかった場合には、代入によって新しくプロパティが作成されます。

プロパティ属性を指定して、プロパティを追加する方法

プロパティ属性を設定することで、プロパティを「書き込み禁止」にしたり、for-inループでプロパティを列挙した時にプロパティに表示されないようにしたり、細かな動作を設定できます。

オブジェクトのプロパティをひとつ設定する Object.defineProperty()

プロパティ属性を指定して、プロパティを追加する場合には Object.defineProperty(o, prop, desc ) メソッドが利用できます。

第一引数oには、プロパティを設定するオブジェクトを指定します。新しくオブジェクトを作成するには空のオブジェクト{}を渡します。

第二引数propには、プロパティ名を渡します。そのオブジェクトに同じ名前のプロパティが既に存在する場合は、第三引数で渡すプロパティディスクリプタで、プロパティの属性を変更します。まだプロパティが存在しない場合は、プロパティを作成します。

第三引数descには、プロパティ属性を設定するためのプロパティディスクリプタ・オブジェクトを指定します。

既存のプロパティを変更する場合は、新しく渡したプロパティディスクリプタで指定した箇所だけが更新されます。新しいオブジェクトの場合は、指定しなかったプロパティ属性はデフォルト値が使われます (Booleanはfalse、オブジェクトの値は undefined)。

Object.defineProperty()はプロパティを更新した後のオブジェクトを返します。

例として、書き込みを禁止writable = falseとして、プロパティを追加する例を示します。

'use strict';

let film = {
  title: 'Jurassic Park'
};

console.log(film); // {title: "Jurassic Park"}

Object.defineProperty(film, 'director', {
  value: 'Steven Spielberg',
  writable: false, // 書き込み禁止
  enumerable: true,
  configurable: false
});

console.log(film); // {title: "Jurassic Park", director: "Steven Spielberg"}

film.director = 'Joe Johnston'; // 無視 または エラー (strict モード)

console.log(film);

オブジェクトの複数のプロパティを同時に設定する Object.defineProperties()

Object.defineProperties(o, props) を使うと、一度の関数呼び出しで複数のプロパティを設定することができます。

引数の意味はほぼ同じです。第二引数propsはプロパティ情報で、プロパティ名をキーとして、プロパティディスクリプタをデータとするような構造のオブジェクトです。

上の例と同じ設定を Object.defineProperties() を使って一度で行うと、次のようになります。

'use strict';
let film = Object.defineProperties(
  {}, // 新規オブジェクトからスタート
  {
    title: {
      value: 'Jurassic Park',
      writable: true,
      enumerable: true,
      configurable: true
    },
    director: {
      value: 'Steven Spielberg',
      writable: false,
      enumerable: true,
      configurable: false
    }
  }
);

console.log(film);

film.director = 'Joe Johnston'; // ignore or Error

console.log(film);