이 글은 You Don't Know JS 서적을 참고하여 작성하였습니다.

[[Prototype]]

자바스크립트 모든 객체는 [[Prototype]] 내부 프로퍼티를 가진다.

그럼 [[Prototype]] 프로퍼티는 무엇일까?

[[Prototype]] 프로퍼티는 상위 객체와 연결을 해주는 역할을 한다.

그럼 [[Prototype]] 프로퍼티는 왜 필요한가?

앞서 [[Get]] 과정으로 객체에서 프로퍼티를 탐색한다고 말했었다. 찾고자 하는 프로퍼티가 현재 객체에 없으면, [[Prototype]]이 가리키는 객체를 연쇄적으로 따라가면서 탐색한다. 이와 같은 과정을 Prototype Chainning이라 부른다.

결론적으로, [[Prototype]] 프로퍼티는 Prototype Chainning으로 프로퍼티 탐색하기 위해 필요하다.

const foo = {
    name: '철수',
    bloodType: 'A'
};

const bar = Object.create(foo, {
    name: {
        value: '미애',
        writable: true,
        enumerable: true,
        configurable: true
    }
});

console.log(bar.name);
console.log(bar.bloodType);
// 미애
// A

Object.create() 함수는 두 번째 인자로 전달한 서술자로 새로운 객체를 생성하는 것 뿐 만 아니라, 새로운 객체의 [[Prototype]] 프로퍼티가 첫 번째 인자로 전달된 객체를 참조하도록 연결해 반환하는 함수이다. 뒤에서 자세하게 다룰 것이니 우선 이 정도로 이해하고 넘어가자.

어쨌거나 Object.create() 함수를 통해 반환된 새로운 객체를 bar 변수에 할당하고 있는 것이다.

또한, [[Prototype]] 프로퍼티는 foo 객체를 참조하고 있을 것이다. Chrome 브라우저를 통해 보면 좀 더 이해하기 쉬울 것이다.

그림을 통해서도 보이듯이, bar 객체는 name 프로퍼티를 가지고 있으므로 해당 프로퍼티의 값인 '미애' 텍스트가 출력된다. 하지만 bar 객체는 bloodType라는 프로퍼티가 없으므로, [[Prototype]] 프로퍼티가 참조하는 객체를 연쇄적으로 타고 올라가면서 bloodType 프로퍼티를 탐색한다.(Prototype Chainning) 결국, [[Prototype]] 프로토타입이 참조하는 foo 객체에서 bloodType 프로퍼티를 발견해 'A' 텍스트가 출력되는 것을 확인할 수 있다. 이러한 [[Get]] 과정은 프로퍼티을 찾을 때까지 연쇄적으로 [[Prototype]]을 타고 올라가 탐색한다. 만약 foo 객체에도 없었다면 결국 해당 프로퍼티를 찾지 못해 undefined를 출력했을 것이다.

Object.prototype

그럼 최종적으로 Prototype Chainning이 끝나는 시점은 어디일까?

Prototype Chainning 최종 종착역은 내장된 Object.prototype 객체이다. 즉, 자바스크립의 모든 객체는 Object.prototype 객체와 연결된 자손인 것이다.

자바스크립트 객체를 사용하다 보면 기본적으로 제공되는 공용 유틸리티를 보았을 것이다. toString(), hasOwnProperty() 함수들이 Object.prototype 객체에 포함되어 일반적인 객체들에게 제공되는 것이다.