導入

JavaScript でオブジェクトを作成する方法はかなりあります。

1. オブジェクト リテラル
2. Object() コンストラクター
3. Object.create()
4. コンストラクター関数
5. ES6クラス

オブジェクトリテラル

おそらく、これが JavaScript でオブジェクトを作成する最も速くて簡単な方法です。これはオブジェクト初期化子とも呼ばれ、中括弧 ({}) で囲まれたオブジェクトのプロパティ名と関連する値の 0 個以上のペアのカンマ区切りのリストです。

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

オブジェクト値は、プリミティブ データ型または他のオブジェクトのいずれかになります。

Object() コンストラクター

組み込みの Object コンストラクターを使用してオブジェクトを作成できます。
渡された値が null または未定義の場合、または値が渡されなかった場合は、空のオブジェクトを作成して返します。
値がすでにオブジェクトである場合は、同じ値を返します。

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same. 

Object.create()

このメソッドを使用すると、特定のプロトタイプを使用して新しいオブジェクトを作成できます。このアプローチにより、新しいオブジェクトがプロトタイプからプロパティとメソッドを継承できるようになり、継承のような動作が容易になります。

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John

コンストラクター関数

ES6 より前は、これは複数の同様のオブジェクトを作成する一般的な方法でした。コンストラクターは単なる関数であり、新しいキーワードを使用してオブジェクトを作成できます。

「new」キーワードを使用してオブジェクトを作成するときは、関数名の最初の文字を大文字にすることをお勧めします。

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland

ES6クラス

より現代的なアプローチは、プロパティとメソッドを初期化するコンストラクター関数を持つクラスを使用して、他の OOP プログラミング言語と同じようにオブジェクトを作成するのに役立ちます。

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth

参考文献:

• MDN - JavaScript
• javascript.info