17.1 Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.

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

// 프로퍼티 추가
person.name = 'Son';
person.sayHello = function() {
  console.log(`Hi! My name is ${this.name}`);
};

console.log(person);
person.sayHello;

// { name: 'Son', sayHello: [Function (anonymous)] }
// Hi! My name is Son

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수로 생성된 객체를 인스턴스라 한다.

자바스크립트는 Object 생성자 함수 이외에도 빌트인 생성자 함수를 제공한다.

// String
const strObj = new String('Son');
console.log(typeof strObj);
console.log(strObj); // [String : "Son"]

// Number
const numObj = new Number(123);
console.log(typeof numObj);
console.log(numObj); // [Number : 123]

// Boolean
const boolObj = new Boolean(true);
console.log(typeof boolObj);
console.log(boolObj); // [Boolean: true]

// Function
const func = new Function('x', 'return x * x');
console.log(typeof func); // function
console.dir(func);

// Array
const arr = new Array(1, 2, 3);
console.log(typeof arr);
console.log(arr); // [1, 2, 3]

// RegExp
const regExp = new RegExp(/ab+c/i);
console.log(typeof regExp);
console.log(regExp); // /ab+c/i

// Date
const date = new Date();
console.log(typeof date);
console.log(date); // 2023-08-03T04:11:37.506Z

객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다. 굳이 Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없다면 그다지 유용해 보이지 않는다.

17.2 생성자 함수

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

객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 동일한 프로퍼티를 가진 객체를 여러 개 생성하는 경우 매번 같은 프로퍼티를 기술해야 한다. 비효율적임

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

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

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

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

객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  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

new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.

// new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않는다.
// 일반 함수로 호출됨
const circle3 = Circle(15);  //new가 없음

console.log(circle3); // undefined

// 일반 함수로소 호출된 Circle 내의 this는 전역 객체를 가리킨다.
console.log(radius); // 15