모던자바스크립트 딥다이브

17.생성자 함수에 의한 객체 생성

객체를 생성하는 방법에는 여러가지가있는데 객체 리터럴에의한 생성방법이 가장 일반적이다.

ex) const object = {a:1,b:2} 

객체를 생성하는 일반적인 방법외에 생성자 함수에 의한 생성방법이나오는데,여기서 생성자함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다.

ex) const person = new Object();

자바스크립트는 Object 생성자 함수 외에도 String,Number,Boolean등의 빌트인(자바스크립트 내장) 생성자 함수를 제공한다.

굳이 왜 객체리터럴에의한 방식이아닌 생성자함수에의한 방식으로 객체를 생성하느냐라는 질문을 할 수있을것같다.
그이유는 객체리터럴에의한 방식은 단 하나의 객체만 생성한다는것이다. 따라서 동일한 프로퍼티를 갖는 객체를 여러개 생성해야하는 경우엔 코드작성에 있어 효율성이 떨어진다.

생성자함수에의한 객체 생성방식은 객체를 생성하기위한 템플릿을 미리 만들어 놓고 프로퍼티가 동일한 객체를 간편하게 생성할 수 있다.

생성자함수로 객체를 여러개 생성하는 예를 들어보자.

//생성자 함수
function Circle(radus) {
	this.radius = radius; 
	this.getDiameter = function () {
	 return 2*this.radius;
	};
}
//인스턴스 생성
const circle1 = new Circle(5); //반지름이 5인 Circle객체를 생성
const circle2 = new Circle(10); //반지름이 10인 Circle객체를 생성

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

위의 코드를 보면 생성자함수의 코드블록에 this라는 키워드가 나오는데,여기서 사용된 this는 생성자함수에의해 생설될 인스턴스를 가리킨다. 따라서 위 코드내용에선 생성자함수에의해 생성된 인스턴스인 circle1, circle2가 this에 해당되겠다.

생성자함수를 정의한 부분을보면 우리가 일반적으로 함수를 정의하는 부분과 다른바가 없어보인다. 그렇다. 우리가 함수를 정의한후 new연산자를 붙여서 호출할경우 객체를 생성할 수있다. (통상 맨 첫글자로 대문자를 사용하여 함수를 정의한 목적이 객체를 생성하기위한 생성자함수로써 정의한것임을 임의로 구분짓는다.) 그렇다고해서 모든 함수 정의방법이 객체를 생성할 수있는 생성자함수로 정의될 수있는건 아닌데,

생성자 함수를 생성할 수있는 함수 정의법 : 함수 선언문, 함수 표현식, 클래스
생성자 함수를 생성할 수없는 함수 정의법 : 메서드(ES6 메서드 축약 표현),화살표 함수

이런식으로, 함수를 정의한 방식에따라 객체를 생성할 수있는 생성자함수로써 역할을 할수 있냐 없냐가 나뉘게된다. 물론 우리가 일반적으로 알고있는 함수 호출은 어느방식으로 선언하든 호출 할 수있다.
한가지 주의할점으로 메서드로써 선언한 부분인데 일반적으로 메서드는 객체의 프로퍼티 값이 함수일경우 이를 일반함수와 구분짓기위해 메서드라 부른다. 하지만 ECMAScript사양에서 메서드로인정하는 범위는 객체의 프로퍼티의값에 할당하는 함수는 일반함수로써 취급하고 ES6의 메서드 축약 표현만을 메서드로 인정한다.

//일반 함수 정의 : 함수 선언문,함수 표현식
function foo() {};
const bar = function () {};
//프로퍼티 x의 값으로 할당된 것은 일반함수로 정의된 함수다. 이는 메서드로 인정되지않음.
const baz = {
	x: function () {}
};
// 일반 함수로 정의된 함수만이 객체로써 선언할 수있는 생성자함수로써의 역할을한다.
new foo(); // foo {}
new bar(); // bar {}
new baz.x(); // x {}

// 화살표 함수 정의
const arrow = () => {};
new arrow(); // typeError

// 메서드 정의 : ES6의 메서드 축약 표현만 메서드로 인정한다.
const obj = { 
	x() {}
    };
new obj.x(); // typeError