생성자 함수를 사용한 객체 생성

생성자 함수

new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수

인스턴스 : 생성자 함수에 의해 생성된 객체

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하여 빈 객체를 생성하여 반환

// 빈 객체 생성
const person = new Object();

// 프로퍼티 추가
person.name = "Lee";
person.sayHello = function () {
  console.log(`Hi: My name is` + this.name);
};

console.log(person);
person.sayHello();

객체 리터럴을 사용한 객체 생성

• 직관적이고 간편한 방법
• 하나의 객체만 생성
• 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티 기술해야 하는 단점 존재

객체는 프로퍼티를 통해 고유의 상태를 표현하고, 메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작을 표현한다.

• 따라서 프로퍼티는 객체마다 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적

생성자 함수를 사용한 객체 생성의 장점

• 객체를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능함

생성자 함수는 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자를 사용해 호출하여 생성자 함수로 동작한다

생성자 함수의 역할

프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로서 동작하며

• 인스턴스 생성 (필수)
• 생성된 인스턴스를 초기화 (옵션)

하는 역할을 한다.

생성자 함수의 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩
   • 암묵적으로 빈 객체(인스턴스) 생성
   • 생성된 빈 객체를 this에 바인딩
2. 인스턴스 초기화
   • 생성자 함수에 기술되어 있는 코드가 한 줄 씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화 함
3. 인스턴스 반환
   • 생성자 함수 내부에서 모든 처리가 끝나면 완성된 인스턴스가 바인딩 된 this를 암묵적으로 반환
   • this가 아닌 다른 객체를 명시적으로 반환하면 return 문에 명시한 객체가 반환됨
   • 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환됨

Call과 Construct 메서드

함수가 일반 함수로 호출되면 함수 객체의 내부 메서드 [[Call]]이 호출되고 new 연산자와 함께 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출됨

callable : 내부 메서드 [[Call]]을 갖는 함수 객체
constructor : 내부 메서드 [[Construct]]를 갖는 함수 객체
non-constructor : [[Construct]]를 갖지 않는 함수 객체

costructor와 non-constructor의 구분

• constructor : 함수 선언문, 함수 표현식, 클래스
• non-constructor : 메서드(메서드 축약표현), 화살표 함수

non-constructor 함수 객체를 생성자 함수로서 호출하면 에러 발생

new 연산자

• new 연산자와 함께 함께 함수를 호출하면 내부 메서드 [[Construct]]가 호출
• 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴

생성자 함수는 주로 파스칼 케이스 사용

new.target

• new 연산자와 함께 생성자 함수로서 호출되었는지 확인할 수 있음
• 함수 내부의 new.target은 함수 자신을 가리킨다
• 일반 함수로서 호출된 함수 내부의 new.target은 undefined

Object와 생성자 함수는 new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하게 동작한다.

**String, Number, Boolean 생성자 함수는 new 연산자와 함께 호출했을 때 String, Number, Boolean 객체를 생성하여 반환 / new 연산자 없이 호출하면 문자열, 숫자, 불리언 값 반환