オブジェクト初期化子
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
オブジェクト初期化子 (object initializer) は、オブジェクトのプロパティ名と関連する値の 0 個以上のペアを中括弧 ({}) で囲んだカンマ区切りのリストです。オブジェクトはObject.create() やnew 演算子でコンストラクター関数を呼び出して使用することもできます。
試してみましょう
const object1 = { a: "foo", b: 42, c: {} };console.log(object1.a);// Expected output: "foo"const a = "foo";const b = 42;const c = {};const object2 = { a: a, b: b, c: c };console.log(object2.b);// Expected output: 42const object3 = { a, b, c };console.log(object3.a);// Expected output: "foo"構文
o = { a: "foo", b: 42, c: {}, 1: "number literal property", "foo:bar": "string literal property", shorthandProperty, method(parameters) { // … }, get property() {}, set property(value) {}, [expression]: "computed property", __proto__: prototype, ...spreadProperty,};解説
オブジェクトリテラル構文と JSON
オブジェクトリテラル構文はJavaScriptObjectNotation (JSON) とは異なります。両者は似ていますが、違いがあります。
- JSON は、
"property": value構文を使用するプロパティ定義のみを許可します。プロパティ名は二重引用符で囲まなければなりません。そして、その定義を略記にすることはできません。計算されたプロパティ名も許されません。 - JSON オブジェクトプロパティの値で取りうるのは、文字列、数値、
true、false、null、配列、他の JSON オブジェクトのみです。これはJSONがメソッドや、プレーンでないオブジェクト、例えばDateやRegExpを表現できないことを意味しています。 - JSON では、
"__proto__"は通常のプロパティキーです。オブジェクトリテラルでは、オブジェクトのプロトタイプを設定します。
JSON はオブジェクトリテラル構文の厳格なサブセット であり、有効な JSON テキストはすべてオブジェクトリテラルとして解釈でき、構文エラーを発生させないことを意味しています。唯一の例外は、オブジェクトリテラル構文では__proto__ キーの重複を禁止していることです。これはJSON.parse() には適用されません。後者は__proto__ を通常のプロパティのように扱い、最後に出現した値をプロパティの値として導きます。オブジェクトリテラルではオブジェクトのプロトタイプを設定し、 JSON では通常のプロパティを設定します。
console.log(JSON.parse('{ "__proto__": 0, "__proto__": 1 }')); // {__proto__: 1}console.log({ "__proto__": 0, "__proto__": 1 }); // SyntaxError: Duplicate __proto__ fields are not allowed in object literalsconsole.log(JSON.parse('{ "__proto__": {} }')); // { __proto__: {} }console.log({ "__proto__": {} }); // {} (with {} as prototype)例
オブジェクトの生成
プロパティを持たない空のオブジェクトは、下記のように中括弧を記述することで生成されます。
const object = {};しかし、リテラル記法、初期化子記法の利点は、中括弧内にプロパティをもつオブジェクトを簡潔に生成できる点です。key: value の組をカンマで区切ったリストで記述することができます。
以下のコードでは、"foo"、"age"、"baz" の 3 つのプロパティをもつオブジェクトを生成します。これらのキーの値はそれぞれ、文字列の"bar"、数値の42、そして他のオブジェクトです。
const object = { foo: "bar", age: 42, baz: { myProp: 12 },};プロパティへのアクセス
オブジェクトを生成すると、読み取ったり変更したりしたくなるでしょう。オブジェクトのプロパティには、ドット記法またはブラケット記法でアクセスすることができます。（詳細については、プロパティアクセサーをご覧ください。）
object.foo; // "bar"object["age"]; // 42object.baz; // {myProp: 12}object.baz.myProp; //12プロパティの定義
初期化構文を使用してプロパティを記述する方法について既に学びました。多くの場合、コード内には、オブジェクトに設定したい変数があります。下記のコードをご覧ください。
const a = "foo";const b = 42;const c = {};const o = { a: a, b: b, c: c,};同じことを実現するために利用できる短い記法があります。
const a = "foo";const b = 42;const c = {};// 略記プロパティ名const o = { a, b, c };// In other words,console.log(o.a === { a }.a); // true重複したプロパティ名
プロパティに対して同じ名前を使用するとき、二番目のプロパティは最初のプロパティを上書きします。
const a = { x: 1, x: 2 };console.log(a); // {x: 2}ES2015 以降、厳格モードを含むあらゆる場所でプロパティ名の重複が許されるようになりました。また、クラス内でプロパティ名の重複を保有することもできます。ただし、プライベート要素だけは例外で、クラス本体で固有のプロパティでなければなりません。
メソッドの定義
オブジェクトのプロパティは関数、ゲッターメソッド、セッターメソッドも参照することができます。
const o = { property: function (parameters) {}, get property() {}, set property(value) {},};略記法が利用可能ですので、キーワード "function" は必要なくなりました。
// メソッド名の略記法const o = { property(parameters) {},};ジェネレーター関数であるプロパティを簡潔に定義する方法があります。
const o = { *generator() { // … },};これは ES5 のような記法と同じです（ただし、 ES5 にはジェネレーターがないことに注意してください）。
const o = { generator: function* () { // … },};メソッドの詳細や例については、メソッド定義をご覧ください。
計算プロパティ名
オブジェクト初期化子構文でも、計算プロパティ名に対応します。角括弧[] の中に式を記述することができ、それが計算されてプロパティ名として使用されます。これは、プロパティの読み込みと設定に使用したことのある、プロパティアクセサー構文のブラケット表記を彷彿とさせるものです。
今では、オブジェクトリテラルでも同様な構文を使うことができます。
// 計算プロパティ名let i = 0;const a = { [`foo${++i}`]: i, [`foo${++i}`]: i, [`foo${++i}`]: i,};console.log(a.foo1); // 1console.log(a.foo2); // 2console.log(a.foo3); // 3const items = ["A", "B", "C"];const obj = { [items]: "Hello",};console.log(obj); // A,B,C: "Hello"console.log(obj["A,B,C"]); // "Hello"const param = "size";const config = { [param]: 12, [`mobile${param.charAt(0).toUpperCase()}${param.slice(1)}`]: 4,};console.log(config); // {size: 12, mobileSize: 4}スプレッドプロパティ
オブジェクトリテラルはスプレッド構文に対応しています。これは、指定されたオブジェクトから新しいオブジェクトに自分自身で列挙可能なプロパティをコピーされます。
Object.assign() を使うよりも短いコードでprototype を除いたシャロークローンの作成や、マージしたオブジェクトの作成を書くことができます。
const obj1 = { foo: "bar", x: 42 };const obj2 = { foo: "baz", y: 13 };const clonedObj = { ...obj1 };// { foo: "bar", x: 42 }const mergedObj = { ...obj1, ...obj2 };// { foo: "baz", x: 42, y: 13 }警告:Object.assign() はセッターを起動しますが、スプレッド構文は起動しません。
プロトタイプセッター
__proto__: value 形式、または"__proto__": value 形式でプロパティを定義しても、__proto__ という名をもつプロパティを生成しません。代わりに、与えられた値がオブジェクトまたはnull の場合、その値に生成されたオブジェクトの[[Prototype]] を変更します（その値がオブジェクト、またはnull ではない場合、オブジェクトは変更されません）。
__proto__ キーは標準化された構文であり、標準外でパフォーマンスの低いObject.prototype.__proto__ アクセサーとは対照的であることに注意してください。プロトタイプチェーンを変更する代わりに、Object.create と同様にオブジェクト作成時に[[Prototype]] を設定します。
const obj1 = {};console.log(Object.getPrototypeOf(obj1) === Object.prototype); // trueconst obj2 = { __proto__: null };console.log(Object.getPrototypeOf(obj2)); // nullconst protoObj = {};const obj3 = { "__proto__": protoObj };console.log(Object.getPrototypeOf(obj3) === protoObj); // trueconst obj4 = { __proto__: "not an object or null" };console.log(Object.getPrototypeOf(obj4) === Object.prototype); // trueconsole.log(Object.hasOwn(obj4, "__proto__")); // falseオブジェクトリテラルでは、単一のプロトタイプセッターのみが許可されています。すなわち、複数のプロトタイプセッターがあると構文エラーになります。
「コロン」表記法を使用しないプロパティ定義は、プロトタイプセッターにはなりません。任意の他の名称を使用する同様の定義と同じように動作するプロパティ定義です。
const __proto__ = "variable";const obj1 = { __proto__ };console.log(Object.getPrototypeOf(obj1) === Object.prototype); // trueconsole.log(Object.hasOwn(obj1, "__proto__")); // trueconsole.log(obj1.__proto__); // "variable"const obj2 = { __proto__() { return "hello"; } };console.log(obj2.__proto__()); // "hello"const obj3 = { ["__proto__"]: 17 };console.log(obj3.__proto__); // 17// プロトタイプセッターと "__proto__" キーによる通常の自分自身のプロパティの混合const obj4 = { ["__proto__"]: 17, __proto__: {} }; // {__proto__: 17} (with {} as prototype)const obj5 = { ["__proto__"]: 17, __proto__: {}, __proto__: null, // SyntaxError: 複数の __proto__ フィールドはオブジェクトリテラルでは許可されていない};const obj6 = { ["__proto__"]: 17, ["__proto__"]: "hello", __proto__: null,}; // {__proto__: "hello"} (null プロトタイプ)const obj7 = { ["__proto__"]: 17, __proto__, __proto__: null,}; // {__proto__: "variable"} (null プロトタイプ)仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-object-initializer |