JS 프로토타입이란

자바스크립트는 프로토타입(prototype) 기반의 독특한 프로그래밍 언어입니다. 클래스 기반의 객체 지향 프로그래밍도 가능하게 하는 이 프로토타입은 자바스크립트에서 객체 간의 상속을 이해하는 핵심 개념이죠. 이번 글에서는 자바스크립트에서 객체의 프로토타입을 어떻게 다뤄야 하는지, 프로토타입의 설정과 변경은 어떻게 이루어지는지 등을 살펴보겠습니다.

“proto” 속성: 프로토타입의 비밀 통로

자바스크립트에서 모든 객체는 자신의 프로토타입을 “proto”라는 비밀 속성에 저장하고 있습니다. 이 속성은 객체가 어디서 상속받았는지, 상속 체인의 상위에 무엇이 있는지를 알 수 있게 해주는 중요한 속성입니다.

하지만, 이 “proto”는 현재 폐기된(deprecated) 속성입니다. 따라서 애플리케이션 코드에서 직접적으로 참조하는 것은 권장되지 않아요. 그렇다면 어떻게 프로토타입에 접근할 수 있을까요? 웹 표준에 맞는 접근 방법을 살펴보겠습니다.

// 빈 객체 생성 후 __proto__ 확인하기
const obj = {};
console.log(obj.__proto__);  // 여러 속성이 포함된 객체가 출력됩니다

이렇게 출력된 객체는 모든 객체의 원형, 즉 프로토타입입니다. 여기에는 constructor, toString()과 같은 여러 기본 메서드들이 포함되어 있습니다.

“proto” 속성은 웹 표준이 아닙니다

“proto” 속성은 더 이상 사용을 권장하지 않으며, 이 속성에 접근하는 것은 웹 표준에 위배됩니다. 대신 Object 클래스의 메서드를 사용하는 것이 좋습니다.

프로토타입 설정하기

객체의 프로토타입은 주로 생성자 함수에 의해 설정됩니다. 생성자 함수의 prototype 속성이 객체의 프로토타입으로 사용됩니다.

// Date 객체를 생성하고 프로토타입 확인하기
const date = new Date();
console.log(date.__proto__ === Date.prototype);  // true

• const date = new Date(); — Date 객체를 생성합니다.
• date.__proto__ === Date.prototype — 생성된 객체의 프로토타입이 Date.prototype과 동일한지 확인합니다.

사용자가 정의한 클래스에서도 마찬가지입니다.

class Person {
  constructor(name) {
    this.name = name;  // 이름 속성 설정
  }

  getInfo() {
    return `Name: ${this.name}`;  // 이름 정보를 반환하는 메서드
  }
}

const person = new Person('Alice');
console.log(person.__proto__ === Person.prototype);  // true

• class Person — 사용자 정의 클래스 생성
• constructor(name) — 객체를 초기화하는 생성자
• getInfo() — 객체의 이름 정보를 반환하는 메서드
• person.__proto__ === Person.prototype — 생성된 객체의 프로토타입이 Person의 prototype과 동일한지 확인합니다.

Object.create()로 프로토타입 설정하기

프로토타입을 설정하는 또 다른 방법은 Object.create() 메서드를 사용하는 것입니다.

const newObject = Object.create(Date.prototype);
console.log(newObject.__proto__ === Date.prototype);  // true

• Object.create(Date.prototype) — Date.prototype을 프로토타입으로 가지는 새로운 객체를 생성합니다.

이 방법은 주로 커스텀 프로토타입을 설정할 때 사용됩니다.

프로토타입 확인하기

프로토타입을 확인할 때는 Object.getPrototypeOf() 메서드를 사용하는 것이 안전합니다.

const proto = Object.getPrototypeOf(date);  // date 객체의 프로토타입 가져오기
console.log(proto === Date.prototype);  // true

• Object.getPrototypeOf(date) — date 객체의 프로토타입을 가져옵니다.

이 메서드를 사용하면 **프로토타입 체인(prototype chain)**을 따라가며 상위 프로토타입도 확인할 수 있습니다.

console.log(Object.getPrototypeOf(Object.getPrototypeOf(new Date())) === Object.prototype);  // true

• Date 객체의 프로토타입이 Object.prototype과 동일한지를 확인합니다.

프로토타입 변경하기

생성된 객체의 프로토타입을 변경할 수 있지만, 이 역시 __proto__ 속성을 직접 수정하는 것은 웹 표준에 어긋납니다. 대신 Object 클래스의 setPrototypeOf() 메서드를 사용하는 것이 좋습니다.

const person = {};
Object.setPrototypeOf(person, Person.prototype);  // person 객체의 프로토타입을 Person.prototype으로 설정
person.name = 'Dale';
console.log(person.getInfo());  // 'Name: Dale'

• Object.setPrototypeOf(person, Person.prototype) — 이미 생성된 객체에 안전하게 프로토타입을 설정합니다.
• 하지만, 이미 생성된 객체의 프로토타입을 변경하는 것은 일반적으로 피해야 합니다. 성능 이슈가 발생할 수 있기 때문입니다.

마무리하며

이번 글에서는 자바스크립트에서 객체의 프로토타입을 설정하고 변경하는 다양한 방법에 대해 알아보았습니다. 핵심은 __proto__ 속성을 사용하지 않고, Object의 표준 메서드인 getPrototypeOf()와 setPrototypeOf()를 사용하는 것이었습니다.