생성자 함수에 의한 객체 생성(객체 리터럴의 단점, Object 빌트인 생성자 함수)

객체를 생성하기 위한 방법은 다양합니다.

• 객체 리터럴
• 생성자 함수

오늘은 생성자 함수로 객체를 생성하는 방식에 대해 알아보려고 합니다.

---

객체 리터럴 생성 방식의 문제점

객체 리터럴 생성 방식은 간편하지만 문제점이 존재한다! 바로 동일한 프로퍼티/매서드를 가지는 객체를 여러개 생성해야 할때 매번 중복되는 코드를 작성해야 한다는 것이다. 만약 이렇게 동일한 구조를 가지는 객체가 한 두개 라면 문제가 되지 않지만 수십, 수천개의 객체라면 문제가 된다.

보통 프로퍼티는 객체의 고유한 상태를 의미하고 매서드는 동작(프로퍼티를 조작하고 참조)을 의미합니다. 따라서 프로퍼티 값을 다를 수 있지만 메서드는 동일한 경우가 일반적입니다.

const circle1 = {
	radius: 5;
  	getDiameter() {
    	return 2 * this.radius;
    }
}

const circle2 = {
	radius: 10;
  	getDiameter() {
    	return 2 * this.radius;
    }
}

이러한 문제점을 생성자 함수에 의한 객체 생성으로 해결해보자!!

생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하는 것 처럼 보입니다. 이를 통해 동일한 프로퍼티 구조를 가지는 객체를 간편하게 생성할 수 있습니다.

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

const circle1 = new Circle(5);
const circle2 = new Circle(10);

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

---

생성자 함수

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

const circle1 = new Circle(5);

생성자 함수는 일반 함수와 동일한 방법으로 정의한다. 그리고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작합니다.

만약 new 연산자와 함께 생성자 함수를 호출하지 않으면, 생성자 함수가 아니라 일반 함수로 동작한다.

생성자 함수의 인스턴스 생성 과정

자바스크립트 엔진은 만약 new 연산자와 함께 생성자 함수를 호출하면 암묵적으로 인스턴스를 생성하고 (인스턴스를 초기화 한 후) 반환한다.

인스턴스가 생성되면 생성자 함수 내부의 this에 바인딩이 된다.(이 처리는 런타임 이전에 실행된다.) 그 이후 한줄씩 실행하면서 인스턴스를 초기화한다.

그리고 모든 처리가 끝나면 this(완성된 인스턴스가 바인딩된)를 암묵적으로 반환한다.

function Circle(radius) {
	//1. 암묵적으로 인스턴스가 생성되고 this에 바인딩 된다.
    
    //2. 인스턴스를 초기화한다.
    this.radius = radius;
    this.getDiameter = function () {
    	return 2 * this.radius;
    }
	
    //3. 완성된 인스턴스가 바인딩된 this를 반환한다.
}

⛔⛔ 주의할점!!

생성자 함수 내부에서 this가 아닌 다른 값을 명시적으로 반환하는것은 기본동작을 훼손하는 것이다. 따라서 반드시 생성자 함수 내부에서는 return문을 생략해야 한다.

1. ⛔ 암묵적으로 객체를 반환하면 this가 무시된다.

function Circle(radius) {
    this.radius = radius;
	
  	//명시적으로 return한 객체가 반환된다.(this는 무시)
    return {};
}
const circle = newCircle(1);
console.log(circle) // {}

2. ⛔ 암묵적으로 원시 값을 반환하면 this가 반환된다.

function Circle(radius) {
    this.radius = radius;
	
  	//명시적으로 return한 원시값이 무시된다.(this는 무시 X)
    return 100;
}

const circle = newCircle(1);
console.log(circle.radius) // {radius: 1}

---

(+)빌트인 생성자 함수

자바스크립트에서는 빌트인 생성자 함수를 제공합니다.
Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise ...

위의 빌트인 생성자 함수 중에서 Object 생성자 함수를 new와 함께 호출하면 빈 객체가 생성됩니다.

이렇게 생성자 함수에 의해 생성된 객체를 인스턴스라고 합니다.

const person = new Object();
console.log(person); //{}

그리고 생성된 빈 객체의 프로퍼티와 매서드를 추가할 수 있습니다.

person.name = "Lee";
person.sayHello = funciton () {
	console.log('Hi! My name is' + this.name);
}

console.log(person) //{name: 'Lee', sayHello: f}

---