Javascript의 객체와 생성자 함수

앞선 포스트에서 설명한 것 처럼, 객체 리터럴을 이용하여 객체를 만들 수 있었다.

const user1 = {
  name: "user1",
  age: 10,
};

const user2 = {
  name: "user2",
  age: 12,
};

const user3 = {
  name: "user3",
  age: 21,
};
...

유저별로 객체를 여러개 만들어 유저들의 이름과 나이를 저장하는 경우를 생각해보자. 위 처럼 3명의 유저라면 3개만 만들면 되지만 100명 1000명.. 유저마다 이러한 객체를 만들 수는 없는 노릇이다.

생성자 함수

우리는 이럴때 생성자 함수를 사용할 수 있다.

function User(name, age) {
  this.name = name;
  this.age = 20;
}

var user1 = new User("minwoo", 20);

생성자 함수는 일반 함수와 다른 것은 없다 하지만 함수 이름의 첫 글자는 대문자로 시작하고, 반드시 'new' 연산자를 붙여 인스턴스를 만들어야 한다.

this

function User(name, age) {
  // this = {};
  
  this.name = name;
  this.age = 20;
  
  // return this;
}

var user1 = new User("minwoo", 20);

일반 함수와 다르게 대문자로 시작하는 생성자 함수에 new를 붙혀 인스턴스를 만들면 빈 객체를 만들어져 this에 자동으로 할당되고, this에 새로운 프로퍼티를 추가해 this를 수정하고, 마지막으로 this가 자동으로 반환된다.

생성자의 return문

function User(name, age) {
  // this = {};
  
  this.name = name;
  this.age = 20;
  
  // return this;
}

var user1 = new User("minwoo", 20);
console.log(user1); // User {name: 'minwoo', age: 20}

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

function User(name, age) {
  // this = {};
  
  this.name = name;
  this.age = 20;
  
  return { what: "why" };
}

var user1 = new User("minwoo", 20); 
console.log(user1); // { what: "why" }

이렇게 다른 객체를 return하면 해당 객체가 return 된다.

function User(name, age) {
  // this = {};
  
  this.name = name;
  this.age = 20;
  
  return 1;
}

var user1 = new User("minwoo", 20); 
console.log(user1); // {name: 'minwoo', age: 20}

하지만 객체가 아닌 원시형을 return하면 return문은 무시되고 원래의 객체가 return된다.
이처럼 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하는 것이므로 return문을 반드시 생략해야 한다.