JS 에서 오브젝트를 만드는 방법을 아는대로 말해보세요.

1. Object 생성자

let object = new Object();

다만 퍼포먼스도 안좋고, Object 를 오버라이드하는 경우 예상치 못한 결과가 나올 수 있으니 사용하지 않는 게 좋다. Object lietral notation 이라 불리는 {} 를 사용하는 게 훨씬 퍼포먼스도 좋고 코드도 깔끔하다.

2. Object.create() 메서드

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  },
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

• create() 메서드는 오브젝트에 프로토타입을 설정해줄 때 유용하다.
• 파라미터는 총 2개가 있다.
  • 새 오브젝트의 프로토타입 (proto)
  • 프로퍼티 오브젝트 (propertiesObject)
    • Object.defineProperties() 에 파라미터로 들어가는 오브젝트와 같다고 보면 된다.
• 반환 값은 새 오브젝트이다.
• 예외는 proto 의 타입이 null 도 Object 도 아니라면 TypeError 가 날 수 있다.

3. Object literal notation({}) 이용하기

var object = {
  name: "Sudheer",
  age: 34,
};

• 가장 쉬운 방법이다.
• new Object 를 이용하는 것보다는 Object literal notation 을 이용하는 게 퍼포먼스 측면에서도 낫고, 코드도 깔끔해진다.
• 또한 Object 객체 자체를 오버라이드하는 멍청이도 막을 수 있다.

참고: Object 리터럴('{}')이 new Object() 보다 빠른 이유

4. new 키워드와 function

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car("Eagle", "Talon TSi", 1993);

형식이 비슷한 오브젝트를 많이 생성해야 하는 경우, 도움이 될 수 있다.

5. new 키워드와 function prototype

function Person() {
  this.age = 21;
}
Person.prototype.name = "Sudheer";
var object = new Person();

직접적으로 프로퍼티를 넣지 않고, prototype 을 이용하는 방법이다. object.name 값을 확인해보면, 프로토타입 체인에 의해서 결국 "Sudheer" 를 가져오게 된다.

6. ES6 클래스 문법

class Person {
  constructor(name) {
    this.name = name;
  }
}

var object = new Person("Sudheer");

클래스 문법은 함수를 선언하고, new 키워드를 이용하는 방법과 다르게 호이스팅이 되지 않는다. 반드시 클래스 선언을 먼저한 후에 new 키워드를 통해 오브젝트를 만들 수 있다.

반면, new 키워드와 function 을 이용한 방법은 function 을 아래에 선언하고, new 키워드를 위에서 사용해도 호이스팅을 이용해 오브젝트를 만들 수 있다.

만일 이 규칙을 어긴다면, ReferenceError 를 던지게 된다.

7. 싱글톤으로 생성하는 방법

var object = new (function () {
  this.name = "Sudheer";
})();

IIFE 를 이용해 function 정의와 new 를 이용한 오브젝트 생성을 한번에 할 수 있다. 이 방법을 사용하는 경우, 제한된 스코프를 이용하게 되고 딱 한번만 인스턴스화를 할 수 있다.

레퍼런스

• https://github.com/sudheerj/javascript-interview-questions#what-are-the-possible-ways-to-create-objects-in-javascript
• expando property란? - MDN
• new Object vs Object literal notation
• Object.create() - MDN