객체 생성 방법

<aside> 💡 자바스크립트에서 객체는 항상 함수를 이용해 생성한다. obj = {...} 같은 객체 리터럴은 Object 생성자 함수로 객체를 생성하는 과정을 단순화 시킨 축약 표현이다.

</aside>

1. Object 생성자 함수

new 연산자와 Object 생성자(constructor) 함수를 이용한 객체 생성 방법. 빈 객체 생성 후 프로퍼티나 메소드를 추가하여 객체를 완성한다.

const student = new Object();
console.log(student); // {}

student.name = 'John';
student.age = 30;
student.sayHi = function () {
  console.log('Hello ' + this.name);
};

console.log(student); // { name: 'John', age: 30, sayHi: ƒ }
student.sayHi(); // Hello John

• 생성자는 new 키워드를 이용해 객체를 생성하고 초기화하는 함수를 말한다.
• 생성자 함수로 만든 객체는 인스턴스라고 부른다.
• 일반 함수와 구분하기 위해 생성자 함수 이름의 첫글자는 대문자(파스칼 케이스)를 사용한다.
• 없는 프로퍼티 키에 값을 할당하면 해당 프로퍼티를 추가하고, 이미 존재하는 프로퍼티면 할당한 값으로 변경.

2. 객체 리터럴

<aside> 💡 obj = new Object()를 줄이면 obj = {...}가 되고 이를 객체 리터럴이라 부른다.

</aside>

가장 일반적인 객체 생성 방식. {} 중괄호를 이용해, 1개 이상의 프로퍼티를 적으면, 해당 프로퍼티가 추가된 객체 생성 가능. 아무것도 안적으면 빈 객체 생성. 객체 리터럴은 Object 생성자 함수로 객체를 생성하는 과정을 단순화 시킨 축약 표현(short-hand)이다. 즉 객체 리터럴을 이용한 객체 생성은, 내부적으로 Object 생성자 함수를 이용해 객체를 생성한다. Object는 자바스크립트에서 기본적으로 제공하는 함수다(native code)

const students = {
  name: 'John',
  age: 30,
  sayHi() {
    console.log('Hello ' + this.name);
  },
};

students.sayHi() // Hello John

객체 리터럴로 생성한 객체 역시 constructor 생성자로 생성한 인스턴스라고도 볼 수 있다.

3. 생성자 함수

객체 리터럴과 Object 생성자 방식의 객체 생성은 프로퍼티 값이 다른 여러 객체를 만들 때 불편하다. 동일한 프로퍼티로 구성된 객체지만, 매번 같은 프로퍼티를 기술해야하는 번거로움이 있다. 생성자 함수를 사용하면 템플릿(클래스)처럼 프로퍼티가 같은 여러 객체를 간편하게 생성할 수 있다.

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function () {
    console.log('Hello ' + this.name);
  };
}

const student1 = new Student('John', 30);
const student2 = new Student('Smith', 40);
console.log(student1);
console.log(student2);

생성자를 통해 생성된 인스턴스인 것을 알 수 있다.