생성자 함수 및 객체 생성

객체 리터럴에 의한 객체 생성의 문제점

객체 리터럴에 의한 객체 생성은 한번에 하나의 객체만 생성한다.
동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.
따라서 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우 생성자 함수를 사용하면 편하다.

const 소현 = {
  name : '소현',
  age : '26'
};

const 나영 = {
  name : '나영',
  age : '28'
};

console.log(소현); // {name: "소현", age: "26"}
console.log(나영); // {name: "나영", age: "28"}

생성자 함수란?

new 연산자와 함께 호출하여 " 객체 ( 인스턴스 ) 를 생성 " 하는 함수를 말한다.
생성자 함수에 의해 생성된 객체를 인스턴스 ( instance ) 라 한다.

생성자 함수에 의한 객체 생성의 장점

생성자 함수에 의한 객체 생성은 객체(인스턴스)를 생성하기 위한 템플릿(생성자함수)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
붕어빵기계 ( 생성자함수 ) 를 이용해 붕어빵 ( 인스턴스 ) 를 찍어낸다.

// 생성자함수생성
function User ( name, age ) {
  this.name = name;
  this.age = age + 1;
}

// 객체생성
const 소현 = new User('소현',26);
const 나영 = new User('나영',28);

// 출력
console.log(소현); // {name: "소현", age: "27"}
console.log(나영); // {name: "나영", age: "29"}

# this 란?

객체 자신의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수이다.
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

생성자 함수 특징

1. 화살표 함수는 사용할 수 없다. ( 반드시 function을 사용 한다. )
2. Pascal Case로 네이밍 한다. ( user [ x ] , User [ o ] )
3. 매개변수 를 사용한다. ( age 등.. )
4. 프로퍼티 정의 시 this 를 사용하는데 이는 자기자신 을 가리킨다.
5. new 키워드 를 반드시 붙여야 한다. ( new 연산자 없이 생성자 함수를 호출하면 일반 함수로 호출된다. / this 가 지정이 안된다. )

빌트인 생성자 함수

자바스크립트는 사용자 정의 생성자 함수 이외에도String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.

대부분의 빌트인 생성자 함수 ( String, Number, Boolean, Function, Array, Date, RegExp, Promise )는 new 연산자와 함께 호출되었는지를 확인한 후 적절한 값을 반환한다.

// String 생성자 함수에 의한 String 객체 생성
const strObj = new String("hello");
console.log(strObj); // String {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"…}

// Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(123);
console.log(numObj); // Number {constructor: Object}

// Boolean 생성자 함수에 의한 Boolean 객체 생성
const boolObj = new Boolean(true);
console.log(boolObj); // Boolean {constructor: Object}

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

// 위 코드를 new 연산자 없이 사용했을 떄

const strObj = String("hello");
console.log(strObj); // hello

const numObj = Number(123);
console.log(numObj); // 123

const boolObj = Boolean(true);
console.log(boolObj); // true