JavaScript 4.05

new 연산자와 생성자 함수

• 객체 리터럴 {…}을 사용하면 객체를 쉽게 만들 수 있다.
• 개발을 하다보면 유사한 객체를 여러개 만들어야 할 때가 생긴다.
  • 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우.
• new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.

생성자 함수

• 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다.
• 다만 생성자 함수는 아래 두 관례를 따른다.
  • 1) 함수 이름의 첫 글자는 대문자로 시작한다.
  • 2) 반드시 new 연산자를 붙여 실행한다.

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

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

• new user(…)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다.
  • 1) 빈 객체를 만들어 this에 할당한다.
  • 2) 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다.
  • 3) this를 반환한다.

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

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

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

• let user = new User(“jack”)는 아래 코드를 입력한 것과 동일하게 동작한다.

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

• new User(“Jack”) 이외에도 new User(“Ann”), new User(“Alice”) 등을 이용하면 손쉽게 사용자 객체를 만들 수 있다.
• 객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다.
• 생성자의 의의는 여기에 있다.
  • 재사용할 수 있는 객체 생성 코드를 구현하는 것이다.
• 모든 함수는 생성자 함수가 될 수 있다.
  • new 를 붙여 실행한다면 어떤 어떤 함수라도 위에 언급된 알고리즘이 실행된다.
  • 이름 첫글자가 대문자인 함수는 new를 붙여 실행해야 한다.

new function() {…}

• 재사용할 필요가 없는 복잡한 객체를 만들어야 할 때, 많은 양의 코드가 필요하다.
• 이럴 땐 아래와 같이 코드를 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

• 위 생성자 함수는 익명 함수이기 때문에 어디에도 저장되지 않는다.
• 처음 만들 때부터 단 한 번만 호출할 목적으로 만들었기 때문에 재사용이 불가능하다.
• 이렇게 익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화 할 수 있다.

new.target과 생성자 함수

• 자주 사용하지 않기 때문에 우선 스킵한다.(추후 추가 예정)

생성자와 return문

• 생성자 함수엔 보통 return문이 없다.
  • 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.
• 만약 return문이 있다면?
  • 객체를 return 한다면, this 대신 객체가 반환된다.
  • 원시형을 return 한다면, return문이 무시된다.
• return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다.
• 아래 예시에선 첫번째 규칙이 적용돼, return은 this를 무시하고 객체를 반환한다.

function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name );  // Godzilla

• 아무것도 return하지 않는 예시를 살펴보자.
  • 원시형을 반환하는 경우와 마찬가지로 두번째 규칙이 적용된다.

function SmallUser() {

  this.name = "John";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // John

• return문이 있는 생성자 함수는 거의 없다.
• 특이케이스이다.
• 인수가 없는 생성자 함수는 괄호를 생략해 호출할 수 있다.

• let user = new User; // <-- 괄호가 없음
  // 아래 코드는 위 코드와 똑같이 동작합니다.
  let user = new User();
  

• 명세서엔 괄호를 생략해도 된다고 정의되어 있지만, 좋은 스타일은 아니다.

생성자 내 메서드

• 생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.
• 메서드를 더해주는 것도 가능하다

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}

let john = new User("John");

john.sayHi(); // My name is: John

/*
john = {
   name: "John",
   sayHi: function() { ... }
}
*/

• new User(name)는 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어준다.
• class 문법을 사용하면 생성자 함수를 사용하는 것과 마찬가지로 복잡한 객체를 만들 수 있다.