생성자 함수

박재성·2022년 1월 19일

생성자 함수와 리터럴에 의한 객체 생성의 차이는 무엇인가??

// new 연산자
const obj = new Object(); 

//리터럴
const o = { 
	name: 'park',
    age: 10;
}

생성자 함수란 new 연산자와 함께 호출해 인스턴스를 생성하는 함수를 의미합니다.

인스턴스는 생성자 함수에 의해 생성된 객체입니다.

그렇다면 인스턴스와 리터럴로 생성된 객체는 다른 객체일까요?

객체지향 언어인 '자바'에서는 클래스로 선언했을 때는 객체, 그 객체가 메모리에 할당되어 사용될 때는 인스턴스입니다.

좀 더 현실적인 예를 들자면, 사람이라는 객체와 학생이라는 인스턴스, 엄마라는 인스턴스를 생각할 수 있습니다.

자바스크립트도 같습니다. new 연산자를 사용한 생성자 함수에 의한 객체 생성은 인스턴스 개념과 일치합니다.

function Circle(radius) {
	this.radius = radius;
    this.getDiameter = function () {
    	return 2 * this.radius;
	}
}

자바스크립트의 생성자 함수입니다. 뭔가 많이 봤던 형식이라 생각하셨다면 맞습니다. 일반 함수랑 똑같습니다. 다만 생성자 함수는 new 연산자와 함께 호출 된다는 차이가 있습니다.

생성자 함수를 new연산자 없이 사용하면 일반 함수로 사용할 수 있습니다.

const circle1 = Circle(2) // circle1 = 4

const circle = new Circle(5) 

//circle.getDiameter() = 4

뭔가 이상해 보인다. 생성자 함수로 호출 했을 때 Circle은 인스턴스를 반환하지 않는다. 이상하지만 이는 자바스크립트 엔진이 암묵적으로 인스턴스를 반환한다... ~~자바스크립트의 비밀...~~

암묵적으로 생성된 인스턴스는 this에 바인딩 된다. 바인딩이란 식별자와 값이 연결됨을 의미한다.

생성자 함수 내부의 this가 생성자 함수가 생선한 인스턴스를 가르키는 이유는 이것이다.

function Circle(radius){
	console.log(this) // Circle {}
    this.radius = radius;
}

const circle = new Circle(3);

이처럼 함수 선언문, 함수 표현식으로 정의한 함수는 일반 함수로 호출할 수 있지만, new 연산자와 함께 호출하면 생성자 함수로 호출할 수 있습니다.

즉, 함수는 객체이면서 일반 객체와는 다르다. 일반 함수로 호출된 함수는 내부 매서드'[[call]]'이 호출되고, 생성자 함수로 호출되면 내부 매서드 '[[Construct]]'가 호출됩니다.

다시 말해, 호출이 가능한 객체는 call 매서드를 가지고, 생성자 함수로서 호출할 수 있는 함수는 Construct 매서드를, Construct 매서드를 가지지 않은 객체를 생성자로 호출할 수 없는 함수를 non-construct라고 합니다.

함수 객체는 반드시 callable이고 contruct일 수도 아닐 수도 있다.

두 매서드를 구분하는 방법은 함수를 어떤 방식으로 정의했는가이다.

non-construct 매서드는 매서드 축약표현, arrow fcuntion만 해당한다.

화살표 함수에 대해서는 추후에 자세하게 다루기로 한다.

결론

자바스크립트는 뭐가 이렇게 복잡한가 생각이 든다. 객체를 더 알아야지 자바스크립트를 잘 이해했다고 생각한다. 아직 와닿는 느낌이 없어서인지 좀 뜬구름 잡는 느낌이 크다..
객체에 대해 어떻게 더 알아볼까 고민해봐야겠다. 지금 바로...

개발, 정복