객체 - new 연산자와 생성자 함수

객체 리터럴 {} 를 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다 보면 메뉴 내 다양한 아이템을 객체로 표현하는 경우 등 유사한 객체를 여러 개 만들어야 하는 경우가 생긴다. 이럴 때 ‘new’ 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.

생성자 함수

생성자 함수와 일반 함수에 기술적인 차이는 없으나, 생성자 함수는 아래 두 관례를 따른다.

1. 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 new 연산자를 붙여 실행한다.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}
// User 는 user 객체를 만드는 생성자 함수! 

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

alert(user.name); // 보라
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(”보라") 는 아래 코드를 입력한 것과 동일하게 동작한다.

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

new + User 의 조합으로 여러 개의 객체를 손쉽게 만들 수 있다. 객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다!

생성자의 의의가 바로 여기에 있다. 즉 재사용할 수 있는 객체 생성 코드를 구현하는 것!!

단, 모든 함수는 생성자 함수가 될 수 있다. new 를 붙여 실행하면 어떤 함수라도 위에서 언급한 알고리즘이 실행된다. 이름의 첫 글자가 대문자인 함수는 new 를 붙여 실행해야 한다는 점도 잊지 말자!

💡 재사용할 필요 없는 복잡한 객체를 만들어야 한다면? new function() 을 사용해 객체를 만든다.

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

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등
};

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

new.target 과 생성자 함수

new.target 프로퍼티를 사용하면 함수가 new 와 함께 호출되었는지 아닌지를 알 수 있다. 일반적인 방법으로 함수를 호출했다면 new.target 은 undefined 를 반환한다. 반면 new 와 함께 호출한 경우 new.target 은 함수 자체를 반환한다.

function User() {
  alert(new.target);
}

// 'new' 없이 호출함
User(); // undefined

// 'new'를 붙여 호출함
new User(); // function User { ... }

함수 본문에서 new.target 을 사용하면 해당 함수가 new 와 함께 호출되었는지 아닌지를 확인할 수 있다. 이를 통해 일반적인 방법으로 함수를 호출했을 때 new 를 붙여 호출한 것처럼 동작하도록 만들 수 있다.

function User(name) {
  if (!new.target) { // new 없이 호출해도
    return new User(name); // new를 붙여줍니다.
  }

  this.name = name;
}

let bora = User("보라"); // 'new User'를 쓴 것처럼 바꿔줍니다.
alert(bora.name); // 보라

라이브러리를 분석하다 보면 위와 같은 방식이 쓰인 것을 종종 볼 수 있는데, new 를 붙여 함수를 호출하지 않아도 코드가 동일하게 동작하기 때문에 좀 더 유연하게 코드를 작성할 수 있다는 장점이 있다.

그러나 new 를 생략하면 코드가 정확히 무슨 일을 하는지 알기 어려워진다. new 가 붙어있어야 새로운 객체를 만드는 것임을 누구나 알 수 있기 때문에, new 를 생략해서 객체를 만드는 것은 정말 필요한 경우에만 사용하는 것이 좋다!

생성자와 return 문

생성자 함수에는 보통 return 문이 없다. 반환해야 할 모든 것들이 this 에 저장되고, this는 자동으로 반환되기 때문에 굳이 써 줄 필요가 없다.

만약 return 문이 있다면 어떻게 될까?

• 객체를 return 한다면 this 대신 return 으로 명시된 객체가 반환된다.
• 원시형을 return 한다면 return 문이 무시된다.

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

this 를 무시하고 객체를 반환하는 경우

function BigUser() {

  this.name = "원숭이";

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

alert( new BigUser().name );  // 고릴라

return 을 무시하고 this 를 반환하는 경우

function SmallUser() {

  this.name = "원숭이";

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

alert( new SmallUser().name );  // 원숭이

생성자 내 메서드

생성자 함수를 사용하면 매개변수를 사용해 객체 내부를 자유롭게 구성할 수 있다. 이는 엄청난 유연성을 확보할 수 있는 방법이다. 생성자 함수를 통해 this 에 메서드를 더해주는 것도 가능하다.

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

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

class 문법을 사용하면 생성자 함수를 사용하는 것과 마찬가지로 복잡한 객체를 만들 수 있다! 이는 추후 더 알아보기로 하자.

자바스크립트 내장 객체들

자바스크립트는 언어 차원에서 다양한 생성자 함수를 제공한다. 날짜를 나타내는 데 쓰이는 Date, 집합을 나타내는 데 쓰이는 Set 등의 내장 객체는 이런 생성자 함수를 이용해 만들 수 있다.