Object 생성자와 new 연산자 알아보기 [모던 자바스크립트 Deep Dive : 17장]

조성원·2023년 3월 24일
0
post-thumbnail

모던 자바스크립트 Deep Dive의 10장 "객체 리터럴" 부분에서,
객체 리터럴에 의한 객체 생성 방식을 알아봤습니다.

이번 17장에서는 생성자 함수에 의한 객체 생성 방식을 알아보겠습니다.


Object 생성자 함수

우선 생성자 함수로 객체를 만들어보겠습니다.

// 객체 생성
const person = new Object();

// 프로퍼티 추가
person.name = 'Lee';
person.age = 20;

console.log(person) // {name: "Lee", age: 20}

객체를 생성할 때,
new Object();로 만들 수 있습니다.

이외에도 new 연산자를 사용하면,
String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 객체를 만들 수 있습니다.


그러나 반드시 Object 생성자 함수를 사용해 객체를 만들 필요는 없습니다.
오히려 객체 리터럴을 사용하는 것이 더 간편해 보입니다.
그렇다면 왜 Object 생성자 함수를 사용해 객체를 생성할까요?




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

객체 리터럴로 객체를 새성하면, 단 하나의 객체만 생성합니다.
따라서 동일한 프로퍼티를 갖는 객체를 여러 번 생성해야 할 경우, 비효율적입니다.

// 반지름이 5인 원의 객체
const circle1 = {
  radius: 5;
  getDiameter() {
    return 2 * this.radius;
  }
};

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

// 반지름이 10인 원의 객체
const circle2 = {
  radius: 10,
  getDiameter() {
    return 2 * this.radius;
  }
};

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

위 코드에서 두 객체는 radius 부분만 다른 것을 확인할 수 있습니다.
그러나 radius 부분만 다르게 하여 객체를 여러 번 생성해야 할 경우, 코드가 비효율적입니다.

이러한 방식으로 수십 개의 객체를 생성해야 한다면 어떻게 해야 할까요?




생성자 함수에 의한 객체 생성 방식의 장점

이번에는 똑같은 코드를 생성자 함수 방식으로 바꿔보겠습니다.

// 원의 객체
function circle(radius) {
  this.radius = radius;
  this.getDiameter = function() {
    return 2 * this.radius;
  }
};

// 인스턴스 생성
const circle1 = new Circle(5); // radius = 5
const circle2 = new Circle(10); // radius = 10

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

위 코드에서, 생성자 함수에 의한 객체 생성 방식은
객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼
프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있습니다.




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

생성자 함수의 역할은
프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로서 동작하여

  1. 인스턴스를 생성하는 것
  2. 생성된 인스턴스를 초기화

하는 것입니다.


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

// 인스턴스 생성
const circle = new Circle(1);
console.log(circle); // Circle {radius: 1, getDiameter: f}
};

위 코드에서 암묵적으로 인스턴스가 생성되고, this에 바인딩 됩니다.

바인딩이란 식별자와 값을 연결하는 과정으로,
this 바인딩은 this 키워드와 this가 가리킬 객체를 연결합니다.

이후 인스턴스가 초기화 및 할당되어, 이후 반환됩니다.




profile
IT 트렌드에 관심이 많은 프론트엔드 개발자

0개의 댓글