객체와 프로토타입 (Object and Prototype)

JavaScript의 객체(Object)는 키와 값의 쌍인 프로퍼티(Property)의 집합이며, 모든 객체는 프로토타입(Prototype)이라 불리는 또 다른 객체를 내부 링크로 참조한다. JavaScript는 클래스 기반 상속 대신 이 링크를 따라 프로퍼티를 탐색하는 프로토타입 체인(Prototype Chain)으로 상속을 구현하는 프로토타입 기반 언어다. class 문법 역시 내부적으로는 이 메커니즘 위에서 동작한다.

객체를 만드는 방법

객체는 객체 리터럴, 생성자 함수, Object.create, class 문법으로 만들 수 있다. 어떤 방법을 쓰든 만들어진 객체는 자신의 프로토타입에 대한 내부 슬롯 [[Prototype]]을 가진다. 리터럴로 만든 객체의 프로토타입은 Object.prototype이고, 생성자 함수로 만든 인스턴스의 프로토타입은 그 함수의 prototype 프로퍼티가 가리키는 객체다.

const literal = { name: "kim" };            // 프로토타입은 Object.prototype

function User(name) { this.name = name; }
const u = new User("lee");                  // 프로토타입은 User.prototype

const bare = Object.create(null);           // 프로토타입이 없는 순수 객체

prototype과 __proto__의 구분

면접에서 가장 많이 혼동하는 지점이 prototype 프로퍼티와 [[Prototype]] 링크의 구분이다. prototype은 생성자로 쓰일 함수만 갖는 프로퍼티로, 그 함수로 만들 인스턴스들의 프로토타입이 될 객체를 가리킨다. 반면 [[Prototype]]은 모든 객체가 갖는 내부 링크이며, 과거에는 __proto__ 접근자로 읽었지만 현재 표준은 Object.getPrototypeOf와 Object.setPrototypeOf 사용을 권장한다.

구분	prototype	[[Prototype]] (__proto__)
누가 갖는가	생성자 함수와 클래스	모든 객체
무엇을 가리키는가	미래 인스턴스들의 프로토타입이 될 객체	자신의 부모에 해당하는 프로토타입 객체
접근 방법	Func.prototype	Object.getPrototypeOf(obj)

따라서 new User("lee")로 만든 인스턴스 u에 대해 Object.getPrototypeOf(u) === User.prototype이 성립한다.

프로토타입 체인의 탐색 규칙

객체의 프로퍼티를 읽을 때 JavaScript 엔진은 먼저 객체 자신의 프로퍼티(Own Property)를 확인하고, 없으면 [[Prototype]] 링크를 따라 올라가며 찾는다. 체인의 끝은 Object.prototype이고 그 프로토타입은 null이다. 끝까지 찾지 못하면 undefined가 반환된다. 배열에서 map을 호출할 수 있는 이유도 배열 인스턴스에는 map이 없지만 Array.prototype에 정의되어 있고 체인을 통해 공유되기 때문이다.

const animal = {
  eat() { return "먹는다"; }
};
const dog = Object.create(animal);
dog.bark = function () { return "짖는다"; };

dog.bark(); // 자신의 프로퍼티에서 발견
dog.eat();  // animal에서 발견, 체인을 따라 탐색
dog.fly;    // undefined, 체인 끝까지 없음

중요한 점은 이것이 복사가 아니라 위임(Delegation)이라는 사실이다. 프로토타입의 메서드는 하나만 존재하고 모든 인스턴스가 공유하므로 메모리 효율이 좋고, 프로토타입을 수정하면 기존 인스턴스에도 즉시 반영된다. 반면 쓰기 연산은 체인을 따라 올라가지 않고 항상 객체 자신에게 프로퍼티를 만들기 때문에, 같은 이름의 프로퍼티가 프로토타입의 것을 가리는 섀도잉(Shadowing)이 일어난다.

class Animal {
  constructor(name) { this.name = name; }
  eat() { return `${this.name}가 먹는다`; }
}
class Dog extends Animal {
  bark() { return "멍멍"; }
}
const d = new Dog("초코");
d.eat();  // Animal.prototype에서 위임받아 실행