new연산자와 생성자 함수

객체 리터럴 {...}를 사용하면 객체를 쉽게 만들 수 있다.
복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하기 위해서는 어떻게 해야할까?

new 연산자와 생성자 함수를 사용하면 유사한 객체 여러개를 쉽게 만들 수 있다.

생성자 함수

일반함수와 생성자 함수는 기술적인 차이는 없다.
다만 생성자 함수에는 두가지 관례가 있다.

• 함수 이름의 첫글자는 대문자로 시작
• 반드시 new라는 연산자를 붙여 실행

다음 예시로 살펴보자

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

new User를 사용해 함수를 실행하고 인자로name에 "보라"를 넣어주었다.

new가 붙어 실행이 되면 빈 객체를 암시적으로 만들어 this에 할당하고, 이 this에는 User라는 객체의 프로퍼티가 들어간다.(this.name, this.isAdmin 부분)
그리고 this를 암시적으로 반환한다.
아래와 같이 말이다.

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

따라서 결국

let user = new User("보라");

이것은

let user = {
  name: "보라",
  isAdmin: false
};

얘와 동일하게 작동한다!!

생성자와 return

생성자 함수에는 보통 return 문이 없다.
반환해야할 것은 모두 this에 저장되고, this는 자동으로 반환되기때문이다.

만약 return문이 있는경우...

• 객체를 return 한다면 this대신 객체가 반환됨.
• 원시형(숫자, 문자, 불린형 등)을 return한다면 return 문은 무시됨.

return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환함.
이 외,this가 반환됨.

생성자 함수는 new User() 이렇게 괄호를 넣고 호출하거나 new User이렇게 괄호를 생략해 호출할 수 있음.

생성자 내 메서드

생성자 함수를 사용하면 매개변수를 사용해 객체 내부를 자유롭게 구성할 수 있음.
(유연성이 확보된다.)

this에는 프로퍼티 뿐만 아니라 메서드도 넣을수 있다!!
메서드는 이전에 언급했듯 프로퍼티의 값에 있는 함수를 말한다