JavaScript 프로토타입 개념 설명

JavaScript는 그 독특한 프로토타입 기반의 객체 지향 특성 덕분에 많은 개발자에게 유용하고 강력한 기능을 제공합니다. 이번 글에서는 JavaScript에서 프로토타입이 어떤 역할을 하며, 이를 활용하여 객체를 어떻게 생성하고 상속할 수 있는지를 살펴보겠습니다.

JavaScript의 프로토타입 개념

JavaScript는 모든 객체가 프로토타입을 통해 서로 연결되어 있는 구조를 가지고 있습니다. 이 프로토타입이란 원형이라는 의미를 내포하고 있으며, 객체가 메서드나 속성을 상속받기 위한 기준 역할을 합니다. 기본적으로 모든 객체는 자신의 프로토타입에 연결되며, 부모 역할을 하는 객체로부터 속성과 메서드를 가져올 수 있게 됩니다.

프로토타입의 확장과 활용

각 객체는 생성될 때 프로토타입을 가집니다. 예를 들어, 생성자 함수에서 새로운 객체를 만들면 해당 객체는 그 생성자 함수의 프로토타입 객체를 참조하게 되며, 이로 인해 객체 간의 공통 기능을 쉽게 정의하고 사용할 수 있습니다. 예를 들어, 다음과 같이 생성자 함수를 정의할 수 있습니다:

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

위 코드에서는 Animal이라는 생성자 함수를 만들고, 그 프로토타입에 speak이라는 메서드를 추가했습니다. 이 메서드는 모든 인스턴스에서 호출할 수 있습니다. 간단히 몇 개의 인스턴스를 생성해 보겠습니다:

const dog = new Animal('Dog');
const cat = new Animal('Cat');
dog.speak(); // Dog makes a noise.
cat.speak(); // Cat makes a noise.

프로토타입 체인

자바스크립트에서는 객체의 속성이나 메서드에 접근할 때, 해당 객체에 정의된 것이 없으면 상위 프로토타입에서 찾는 과정을 거칩니다. 이를 프로토타입 체인이라고 하며, 이 체인을 통해 중복된 코드 없이 다양한 기능을 재사용할 수 있습니다.

프로토타입 체인의 작동 원리

자바스크립트에서 객체가 생성될 때, 객체는 부모 객체의 프로퍼티나 메서드를 상속받습니다. 만약 객체에 요청한 프로퍼티가 존재하지 않으면, JavaScript 엔진은 객체의 프로토타입을 확인하고, 그곳에서 해당 프로퍼티를 찾게 됩니다. 이러한 메커니즘은:

• 객체가 직접 가지고 있는 프로퍼티가 없을 경우 프로토타입 체인 상위로 올라가며 확인합니다.
• 이 과정은 최종적으로 Object.prototype까지 이어져, 그곳에서도 찾지 못할 경우 undefined가 반환됩니다.

상속 구현하기

JavaScript에서 상속을 구현하기 위해서는 프로토타입을 활용합니다. 자식 객체가 부모 객체의 속성과 메서드를 활용할 수 있도록 하는 것이죠. 예를 들어, Dog라는 자식 클래스를 만들어 Animal 클래스를 상속받아 보겠습니다:

function Dog(name) {
  Animal.call(this, name); // 부모 생성자 호출
}
Dog.prototype = Object.create(Animal.prototype); // 상속
Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};
const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark(); // Rex barks.

위와 같이 Dog 클래스는 Animal 클래스의 모든 메서드를 사용할 수 있으며, 추가적으로 자신만의 메서드인 bark도 정의할 수 있습니다.

정리

JavaScript의 프로토타입은 객체 간의 상속과 메서드를 재사용할 수 있는 강력한 구조를 제공합니다. 프로토타입 체인과 이를 통한 상속은 코드를 효율적으로 만들고, 유지보수성을 높이는 데 큰 도움을 줍니다. 이번 포스트를 통해 프로토타입의 개념을 보다 명확히 이해하고, 실제 코드를 작성하는 데 적용할 수 있기를 바랍니다.

JavaScript의 프로토타입 대 전통적인 클래스 기반 상속 방식은 각각의 특성과 장단점이 존재하므로, 상황에 맞는 방식을 선택하여 사용하는 것이 중요합니다.

자주 물으시는 질문