[1장] 3.4.1 객체 연결 장치

[originchoi]

96페이지

자바스크립트에서 Object.create()와 new 연산자를 사용하여 객체를 생성할 때의 주된 차이점은 무엇이며, 특히 프로토타입 체인과 상속 패턴에 어떤 영향을 미치나요?

[sunghankwon]

Object.create()

Object.create() 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다. 이 방법은 생성자 함수를 사용하지 않고도 객체의 프로토타입을 직접 설정할 수 있습니다.

Object.create() 메서드는 두개의 매개변수를 받는데 프로토타입으로 설정할 객체와 생성될 객체에 추가할 속성들을 정의하는 객체를 받습니다. 두번째 매개변수를 통해 객체 리터럴과 유사하게 속성을 추가할 수 있고 각 속성에 속성 기술자를 포함할수도 있습니다.

const vaco = {
  generation: '16기',
  describe: function() {
    return `My name is ${this.name}, and I am from ${this.generation}.`;
  }
};

const sunghan = Object.create(vaco, {
  name: { value: '성한' }
});

console.log(sunghan.describe()); // "My name is 성한, and I am from 16기."

위 코드에서 sunghan 객체는 vaco객체를 프로토타입으로 사용합니다. Object.create()를 통해 sunghan은 vaco의 모든 속성과 메소드를 상속받고, 동시에 name 속성을 '성한'으로 재정의합니다.

이렇게 생성된 sunghan 객체는 vaco의 generation 속성인 '16기'를 상속받는 동시에 자신의 고유한 name 속성을 가지게 되어, 이를 통해 자신의 정체성을 나타내는 설명을 할 수 있습니다. 이로써 sunghan 객체는 vaco의 일원이면서도 개별적인 특성을 갖춘 객체로 기능합니다.

Object.create()는 프로토타입 체인을 직접 조작할 수 있게 해 주어, JavaScript에서 강력한 상속 메커니즘을 제공하고 어떤 객체든지 프로토타입으로 설정할 수 있어 상속 구조를 유연하게 설계할수 있습니다.

또한 다중 상속과 같이 복잡한 상속 구조를 구현하기 유리합니다.

new 연산자

new 연산자는 생성자 함수를 사용하여 새로운 객체를 생성하는 데 사용됩니다. new 연산자는 생성자 함수와 함께 사용되어 새로운 객체의 메모리를 할당하고, 생성자 함수를 통해 객체를 초기화한 후, 생성된 객체를 반환합니다.

new 연산자를 사용할 때의 과정을 설명하자면, 처음에는 new 연산자가 빈 객체를 만듭니다. 이 빈 객체는 생성자 함수가 가진 prototype 속성에 연결된 객체를 자신의 프로토타입으로 상속 받습니다. 이로인해 객체는 생성자 함수의 프로토타입에 정의된 모든 메소드와 속성을 사용할 수 있게 됩니다.

생성된 객체는 이제 생성자 함수의 컨텍스트로 설정되며, 이 컨텍스트 내에서 this 키워드는 새로 생성된 객체를 참조하게 됩니다. 생성자 함수가 실행되면서, this를 통해 새 객체에 여러 속성이 추가되며, 이러한 속성들은 함수가 실행될 때 직접 설정됩니다.

마지막으로, 생성자 함수의 작업이 끝나면, new 연산자는 최종적으로 this에 의해 참조된 객체를 반환합니다. 이 객체는 이제 생성자 함수에서 추가된 속성과 함께 프로토타입 체인을 통해 상속받은 모든 메서드와 속성을 포함하고 있습니다. 생성자 함수에서 다른 객체를 반환하는 경우가 아니라면, 보통 this가 가리키는 이 객체가 반환되어 외부에서 사용할 수 있게 됩니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  };
}

const sunghan = new Person('성한', 33);
console.log(sunghan.greet()); // "Hello, my name is 성한 and I am 33 years old."

위 코드에서 Person 함수는 생성자 함수로 사용되며, new를 통해 sunghan객체를 생성합니다. sunghan는 Person의 프로토타입을 상속받고, 생성자에서 정의된 속성과 메소드를 초기화 받습니다.

new 연산자를 사용해 객체를 생성할 때, 해당 객체는 생성자 함수의 prototype 속성이 가리키는 객체를 자신의 프로토타입으로 설정하게 됩니다. 이렇게 설정된 프로토타입을 통해 생성자 함수에 정의된 메소드와 속성들을 상속받습니다. 이는 자바스크립트에서 클래스 기반 언어의 상속 메커니즘을 모방하는 방식으로, 객체 지향 프로그래밍 스타일을 가능하게 합니다.

Object.create()와 new의 차이

new 연산자와 Object.create()는 각각 다른 상황에 맞춰 객체를 생성하는 데 사용됩니다.

new 연산자를 사용하는 것은 특히 객체의 타입이 명확하게 정의되어야 할 때 유용합니다.

이는 주로 생성자 함수를 통해 구체적인 객체 타입을 생성하고 싶을 때 적합한 방법입니다.

예를 들어, '사람', '동물', '자동차'와 같이 특정 클래스 또는 생성자 함수로부터 객체를 생성하여, 이 객체들이 공통의 속성과 메소드를 가지길 원할 때 사용합니다. new를 사용하면 생성자 함수에서 정의된 로직을 바탕으로 객체의 초기 상태를 설정할 수 있어, 객체 생성과 초기화를 동시에 수행할 수 있습니다.

이 방법은 객체가 생성될 때 특정한 구조와 값을 가져야 하는 경우에 매우 적합합니다.

function Car(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
}

const myCar = new Car("Genesis", "G90", 2023);

console.log(`My car is a ${myCar.year} ${myCar.brand} ${myCar.model}.`);
// My car is a 2023 Genesis G90.

반면, Object.create()는 더 유연하고 섬세한 방법으로 객체의 프로토타입을 직접 설정할 수 있습니다.

이는 특히 생성자 함수의 로직 없이 순수하게 프로토타입을 통한 상속만을 구현하고 싶을 때 유리합니다.

예를 들어, 이미 존재하는 객체를 기반으로 새로운 객체를 만들고 싶을 때 Object.create()를 사용하면, 원본 객체의 속성과 메소드를 그대로 상속받으면서도, 필요에 따라 새로운 속성을 추가할 수 있습니다.

이 방법은 객체 간의 관계를 보다 유연하게 설정할 수 있게 해주며, 복잡한 상속 체계를 간단히 구현할 수 있는 장점이 있습니다.

따라서, 객체를 생성할 때 객체의 타입과 초기화 과정이 중요하다면 new를, 프로토타입의 유연한 설정과 순수한 상속을 원한다면 Object.create()를 사용하는 것이 바람직합니다. 이렇게 각기 다른 상황과 요구에 맞춰 적절한 객체 생성 방법을 선택하면, 코드의 명확성과 유지보수성을 높일 수 있습니다.

const car = {
    type: "Car",
    display: function() {
        return `This is a ${this.type}.`;
    }
};

const sportsCar = Object.create(car, {
    type: { value: "Sports Car" },
    turbo: { value: true }
});

console.log(sportsCar.display());  // "This is a Sports Car."
console.log(`Turbo enabled: ${sportsCar.turbo}`);  // "Turbo enabled: true"