[TIL] 자바스크립트의 생성자와 new

객체 (Object)

객체란 서로 연관된 변수와 함수를 그룹핑한 것이라고 보면된다.
객체 내의 변수를 프로퍼티/ 함수를 메소드 라고 한다.

var person = { } // 먼저 person이라는 변수에 비어있는 객체를 만든다.
person.name = 'simplekey'; 
// person이라는 빈 객체에 name이라는 프로퍼티를 만들고 simplekey라는 값을 부여한다.
person.introduce = function(){
  return 'My name is ' + this.name;
}
// introduce라는 프로퍼티에는 함수 즉 메소드를 담는다.
// 여기서 this는 person이라는 객체를 가르킨다.

console.log(person.introduce());

⬆︎이렇게 객체를 만드는 과정에서는 객체를 정의하는 부분과 프로퍼티와 메소드가 분리되어 있어서 집중도가 떨어진다.

⬇︎이런 코드를 다시 아래 처럼 바꿀 수 있다.

var person = {
  'name' : 'simplekey',
  'intruduce' : function(){
    return 'My name is ' + this.name;
  }
}

이런 식으로 코드를 쓰면 객체{} 안에서 이루어지기 때문에 좀 더 안전하게 코드를 관리할 수 있다.

⬇︎만약 여러 사람에 대한 객체를 만든다고 한다면?

var person1 = {
  'name' : 'simplekey',
  'intruduce' : function(){
    return 'My name is ' + this.name;
  }
}
var person2 = {
  'name' : 'salgoo',
  'intruduce' : function(){
    return 'My name is ' + this.name;
  }
}

이렇게도 가능은 하지만 중복되는 코드가 발생하게 되고 유지보수에 매우 어려움을 겪게 된다.
이러한 중복을 제거하기 위해 필요한 것이 '생성자'와 'new' 다.

생성자 (Constructor)

생성자는 객체를 만드는 역할의 함수다. 자바스크립트에서 함수는 재사용이 가능한 로직의 묶음이 아니라 객체를 만드는 생성자라고 할 수 있다.

function person(){};
var p1 = person();
p1 // person()을 호출하면 undefined가 뜬다.
var p2 = new person(); //person() 앞에 new를 붙이면
p2 //person {} 객체가 리턴된다.

⬆︎new를 붙이면 person은 그냥 함수라고 하지않고 생성자 라고 부르게된다. 즉 객체를 생성하는 역할을 맡는다.

⬇︎여러 사람을 위한 객체를 만든다면 아래와 같은 코드를 작성해야한다

// 생성자를 정의한다.
function Person(name){
  this.name = name;
  this.introduce = function(){
    return 'My name is ' + this.name;
  }
}
// 생성자 함수에 인자 값을 넣으면 정의된 생성자에서 만들어져 객체가 된다.
var p1 = new Person('Simplekey');
var p2 = new Person('Salgoo');

이렇게 처음에 메소드를 정의하면 그 다음부터는 다시 정의할 필요가 없어지는데 이런 것을 초기화(initialize) 라고 한다.
함수를 호출할 때 new를 붙이면 함수는 객체를 만드는 생성자가 되고 객체를 리턴한다.