객체는 객체 리터럴 이외의 생성자 함수를 사용하여 객체를 생성할 수 있다.
객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 방식이지만 단점이 있다. 이를 보완해주는 생성자 함수를 사용해 객체를 생성하는 방식에 대해 알아보자 🧐
생성자 함수로 객체를 생성하는 방식의 장점
객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 만약 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우에는 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.
const circle1 = {
radius: 5,
getDiameter() {
return 2 * this.radius;
}
};
console.log(circle1.getDiameter()); // 10
const circle2 = {
radius: 10,
getDiameter() {
return 2 * this.radius;
}
};
console.log(circle2.getDiameter()); // 20원을 표현한 객체인 circle1 객체와 circle2 객체는 프로퍼티 구조가 동일하다. radius 프로퍼티의 값은 다르지만, getDiameter 메서드는 완전히 동일하다.
이렇게 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야 한다. 만약 수십 개의 객체를 생성해야 한다면 문제는 커진다.
위의 코드를 생성자 함수를 이용해 다시 작성하면 다음과 같다.
// 생성자 함수
function Circle(radius) {
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생성자 함수로 객체를 생성하면 템플릿처럼 프로퍼티의 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
생성자 함수의 인스턴스 생성 과정
생성자 함수는 어떤 식으로 동작하는 지 위의 예제와 같이 살펴 보자.
function Circle(radius) {
// 인스턴스 초기화
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
// 인스턴스 생성
const circle1 = new Circle(5);코드를 살펴보면 인스턴스를 생성하고 반환하는 코드는 보이지 않는 걸 알 수 있다.
new연산자와 함께 함수를 호출하면 자바스크립트 엔진은 암묵적으로 인스턴스를 생성하고 반환한다.
📙 인스턴스 생성
function Circle(radius) {
// 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
// 즉, this는 생성자 함수가 생성할 인스턴스를 가리킨다.
console.log(this); // Circle {}
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}암묵적으로 빈 객체가 생성되고 이 객체가 생성자 함수가 생성한 인스턴스이다. 그리고 이 인스턴스는 this에 바인딩이 된다. 이 모든 처리들은 런타임 이전에 실행된다.
📙 인스턴스 초기화
function Circle(radius) {
// 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
// 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 초기값을 프로퍼티에 할당해 주는 것이다.
📙 인스턴스 반환
function Circle(radius) {
// 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
// 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
// 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
}함수 내부의 모든 처리가 끝나면 인스턴스가 바인딩된 this가 암묵적으로 반환된다. 만약 this가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return 문에 명시한 객체가 반환된다.
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
return {}; // 명시적 반환
}
const circle = new Circle(1);
console.log(circle) // {}하지만 객체가 아닌 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다.
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
return 100; // 명시적으로 원시 값을 반환
}
const circle = new Circle(1);
console.log(circle) // Circle {radius: 1, getDiameter: f}이처럼 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하기 때문에, 생성자 함수 내부에서는 return 문을 반드시 생략해야 한다.
일반 함수와 생성자 함수의 구분
생성자 함수는 일반 함수와 동일한 방법으로 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다. 만약 new 연산자와 함께 호출하지 않으면 생성자 함수가 아니라 일반 함수로 동작한다.
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
// 일반 함수로서 호출된다.
const circle = Circle(15);
// 반환문이 없으므로 undefined를 반환한다.
console.log(circle); // undefined
// 일반 함수로 호출된 Circle 내 this는 전역 객체 window를 가리킨다.
console.log(radius); // 15
console.log(getDiameter()); // 30
circle.getDiameter(); // TypeError: Cannnot read property 'getDiameter' of undefinedCircle은 일반 함수로서 호출되었기 때문에 Circle 함수 내부의 this는 전역 객체 window를 가리킨다. 즉, radius와 getDiameter는 전역 객체의 프로퍼티와 메서드가 된다.
일반 함수와 생성자 함수에 특변한 형식적 차이는 없기에, 일반적으로 생성자 함수는 첫 문자를 대문자로 기술하여 일반 함수와 구별할 수 있도록 한다.
📙 new.target
첫 문자를 대문자로 기술하는 파스칼 케이스로 명명했다 할지라도 실수는 언제나 발생할 수 있다. 이런 실수를 방지하기 위해 ES6에서는 new.target을 지원하고 있다.
new.target은 this와 비슷하게 함수 내부에서 암묵적인 지역 변수와 같이 사용되며, 메타 프로퍼티라고 부른다.
new연산자와 함께 생성자 함수로서 호출되면 함수 내부의new.target은 함수 자신을 가리킨다. 일반 함수로서 호출된 함수 내부의new.target의 경우에는 undefined다.
function Circle(radius) {
// new 연산자와 함께 호출되지 않았다면 undefined다.
if(!new.target) {
// 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환
return new Circle(radius);
}
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
// 일반 함수로서 호출되더라도 new.target을 통해 생성자 함수로서 호출된다.
const circle = Circle(5);
console.log(circle.getDiameter()); // 10함수 내부에서 new.target을 사용하면 생성자 함수로서 호출되었는지 확인할 수 있다.
또한 new.target을 사용해 클래스를 추상 클래스처럼 흉내를 낼 수 있다.
class A { // 추상 클래스처럼 쓰기
constructor() {
if(new.target === A) {
throw new Error('A는 추상 클래스');
}
}
}
class B extends A {
constructor() {
super();
}
}
const b = new B();
const a = new A(); // Error: A는 추상 클래스
console.log(b); // B {}
console.log(a); // ReferenceError: a is not defined클래스 A 생성자 내부에 new.target을 사용해, 인스턴스를 생성하려는 경우 에러를 던지도록 작성했다.
const a = new A(); 결과에서 볼 수 있듯이 클래스 A 자체를 호출할 수 없고 오직 클래스 B를 통해서만 인스턴스 생성이 가능하다. 클래스 B의 인스턴스 b는 존재하지만, 클래스 A의 인스턴스 a는 존재하지 않는다.
JavaScript에서는 추상클래스가 없기 때문에, new.target을 사용해 상위 클래스의 호출을 못하게 하고 오직 하위 클래스에서만 동작할수 있게끔 기능을 제한할 수 있다.
📙 빌트인 생성자 함수
Object, Function 등의 대부분의 빌트인 생성자 함수는 기본적으로 new 연산자와 함께 호출되었는지를 확인하고 적절한 값을 반환한다. 즉, new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하게 동작한다.
let obj = new Object();
console.log(obj); // {}
obj = Object();
console.log(obj); // {}
let f = new Function('x', 'return x ** x');
console.log(f); // f anonymous(x) { return x ** x }
f = Function('x', 'return x ** x');
console.log(f); // f anonymous(x) { return x ** x }📙 스코프 세이프 생성자 패턴
다만 IE에서는 new.target을 지원하지 않기 때문에, new.target을 쓸 수 없다면 스코프 생성자 패턴(scope-safe constructor)을 사용해 생성자 함수로서 호출되었는지 확인할 수 있다.
function Circle(radius) {
// this와 Circle은 연결되지 않는다.
if(!(this instanceof Circle)) {
// 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환
return new Circle(radius);
}
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
const circle = Circle(5);
console.log(circle.getDiameter()); // 10생성자 함수가 new 연산자와 함께 호출되면 함수의 선두에서 빈 객체를 생성하고 this에 바인딩되어 인스턴스와 생성자 함수는 서로 연결된다. 이를 이용해 new 연산자와 함께 호출되었는지 확인할 수 있다.
