JS オブジェクトの定義

1. JavaScriptオブジェクトを定義する手法

JavaScriptでオブジェクトを定義するには、主に以下の方法があります。

• オブジェクトリテラルを使用する
• new キーワードを使用する
• オブジェクトコンストラクタを使用する
• Object.assign() を使用する
• Object.create() を使用する
• Object.fromEntries() を使用する

2. オブジェクトリテラルの使用

オブジェクトリテラルは、中括弧 { } の中に キー:値 (key:value) のペアをリスト化したものです。

{firstName:"太郎", lastName:"山田", age:50, eyeColor:"青"};

2.1 実装例

// オブジェクトを作成
const person = {
  firstName: "太郎",
  lastName: "山田",
  age: 50,
  eyeColor: "青"
};

3. new キーワードの使用

3.1 実装例

// オブジェクトを作成
const person = new Object({
  firstName: "太郎",
  lastName: "山田",
  age: 50,
  eyeColor: "青"
});

上記の2つの例（リテラルとnew）は、全く同じ結果をもたらします。
しかし、new Object() を使用する必要はありません。
可読性、シンプルさ、および実行速度の観点から、オブジェクトリテラルを使用することが推奨されます。

名前と値のペア（name-value pairs）で記述されるオブジェクトは、他言語の以下の概念に似ています。

• PHPの連想配列 (Associative arrays)
• Pythonの辞書 (Dictionaries)
• Cのハッシュテーブル (Hash tables)
• Javaのハッシュマップ (Hash maps)
• RubyやPerlのハッシュ (Hashes)

4. JavaScript Object.create()

Object.create() メソッドは、既存のオブジェクトをプロトタイプとして新しいオブジェクトを作成します。

4.1 実装例

// ベースとなるオブジェクトを作成:
const person = {
  firstName: "太郎",
  lastName: "山田"
};

// 新しいオブジェクトを作成
const man = Object.create(person);
man.firstName = "次郎";

5. JavaScript Object.fromEntries()

ES2019にて、Object.fromEntries() メソッドが追加されました。
このメソッドは、イテラブル（Iterable） なキー/値ペアのリストからオブジェクトを作成します。

5.1 実装例

const fruits = [
  ["apples", 300],
  ["pears", 900],
  ["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

5.2 ブラウザサポート

fromEntries() は ECMAScript 2019 (ES10) の機能です。
2020年1月以降、すべての主要なモダンブラウザでサポートされています：

• Chrome 66 (2018年4月)
• Edge 79 (2020年1月)
• Firefox 61 (2018年6月)
• Safari 12 (2018年9月)
• Opera 50 (2018年5月)

6. JavaScript Object.assign()

Object.assign() メソッドは、1つ以上のソースオブジェクトからターゲットオブジェクトへとプロパティをコピーします。

6.1 実装例

// ターゲットオブジェクトを作成
const person1 = {
  firstName: "太郎",
  lastName: "山田",
  age: 50,
  eyeColor: "青"
};

// ソースオブジェクトを作成
const person2 = {firstName: "花子", lastName: "佐藤"};

// ソースをターゲットにアサイン（コピー）
Object.assign(person1, person2);

7. JavaScriptにおいてオブジェクトは「王」である

「オブジェクトを理解することは、JavaScriptを理解すること」と言っても過言ではありません。
JavaScriptでは、ほぼ「すべて」がオブジェクトです。

• オブジェクトはオブジェクト
• Mathはオブジェクト
• 関数（Function）はオブジェクト
• 日付（Date）はオブジェクト
• 配列（Array）はオブジェクト
• マップ（Map）はオブジェクト
• セット（Set）はオブジェクト

プリミティブ型を除き、JavaScriptのすべての値はオブジェクトです。

8. JavaScriptのプリミティブ型 (Primitives)

プリミティブデータ型とは、単一のプリミティブ値のみを保持できるデータ型のことです。
JavaScriptでは、以下の7つのプリミティブデータ型が定義されています。

9. イミュータブル（不変）性

プリミティブ値は イミュータブル（Immutable） です（ハードコードされており、変更不可能です）。
例えば x = 3.14 のとき、x の値を変更することはできますが、3.14 という値そのものを書き換えることはできません。

10. JavaScriptオブジェクトは「ミュータブル（可変）」

オブジェクトは ミュータブル（Mutable） です。
オブジェクトは「値」としてではなく、「参照（Reference）」として扱われます。

もし person がオブジェクトである場合、以下のステートメントは person のコピーを作成するわけではありません。

const x = person;

オブジェクト x は person のコピーではなく、x そのものが person です。
x と person はメモリ上の同じアドレスを共有しています。
そのため、x に対して行った変更は person にも反映されます。

10.1 実例

// オブジェクトを作成
const person = {
  firstName: "太郎",
  lastName: "山田",
  age: 50,
  eyeColor: "青"
}

// コピーを作成しようとする（実際には参照のコピー）
const x = person;

// x の age を変更すると、person の age も変更される
x.age = 10;