🏗️ 자바스크립트의 Prototype

🤔 객체지향 프로그래밍이란 무엇인가?

자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍(OOP, Object Oriented Programming)을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어다.

객체지향 프로그래밍이란 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍(imperative programming)의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체(Object)의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.

객체지향 프로그래밍은 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성(attribute/property)을 가진다.

이 중에서 구현하려는 프로그램에 필요한 속성만 간추려 내는 것을 추상화(abstraction)라 한다. 사람의 여러 특성중 “이름”과 “나이"만을 속성으로 갖는 person이라는 객체를 만들어보자.

const crew = {
	name: "Harry"
	age: 23
};

console.log(console.log(crew)); // {name: "Harry", age: 23} 

이처럼 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.
객체는 상태를 나타내는 데이터와 데이터를 조작할 수 있는 동작으로 이루어지는데 이것이 각각 프로퍼티와 메서드이다. 객체들은 다른 객체들과 관계성을 가질 수 있다. 다른 객체와 메시지를 주고받거나 데이터를 처리할 수도 있다. 또는 다른 객체의 프로퍼티나 메서드를 상속받거나 하기도 한다.

상속(inheritance)은 어떤 객체의 프로퍼티, 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것이다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

예시코드를 보며 살펴보자

function Circle(radius) {
	this.radius = radius;
	this.getArea = function () {
		return Math.PI * this.radius ** 2;
	}
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea) // false

Circle 생성자 함수가 생성하는 모든 객체(인스턴스)는 radius 프로퍼티와 getArea 메서드를 갖는다. 그런데 여기서 getArea 메서드는 모든 인스턴스가 동일한 내용의 메서드를 사용하므로 단 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직이다.

하지만 위 그림을 보면 인스턴스 당 하나씩 모두 getArea 메서드를 가지고 있다.
우리는 프로토타입을 통해서 이 문제를 해결할 수 있다. 아래에서 살펴보자.

🧩 상속(inheritance)이란 용어에 대해서

위에서 상속이란 용어에 대해서 설명했는데, 사실 프로토타입에 '상속'이란 말을 쓰는 것은 혼란스러울 수도 있다. 클래스의 상속은 기본으로 복사를 수반하지만, 자바스크립트는 객체 프로퍼티를 복사하지 않는다. 대신 두 객체에 링크를 걸어두고 한쪽이 다른 쪽의 프로퍼티/함수에 접근할 수 있게 한다.

이에 대해 프로토타입과 상속에 대해서는 여러 책에 대해 다르게 표현하곤 한다.
코어 자바스크립트에서는

클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다.

라고 하며, YOU DON'T KNOW JS에서는

두 객체에 링크를 걸어두고 한쪽이 다른 쪽의 프로퍼티/함수에 접근할 수 있게 위임(Delegaton)한다. 위임이야말로 자바스크립트 객체-연결 체계를 훨씬 더 정확하게 나타낸 용어다.

라고 하며, 모던 자바스크립트 Deep Dive에서는 그냥 자바스크립트에서는 프로토타입으로 상속을 구현한다고 말한다. 나는 일단 상속이란 용어를 계속 사용하겠다.

어찌 됐든 위에 설명한대로 프로토타입의 동작이 클래스의 상속과는 다르다고 이해하고 프로토타입의 동작이 어떠한지 이해하는데에 초점을 맞춰보도록 하자.

🔗 프로토타입에 대한 이해

function Circle(radius) {
	this.radius = radius;
}

Circle.prototype.getArea = function () {
	return Math.PI * this.radius ** 2;
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea) // true

Circle 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 상위(부모) 객체 역할을 하는 Circle.prototype의 모든 프로퍼티와 메서드를 상속받는다. Circle 생성자 함수로 만든 모든 인스턴스는 getArea 메서드를 상속받아 사용할 수 있다.
생성자 함수가 생성한 모든 인스턴스가 공통으로 사용할 프로퍼티나 메서드를 프로토타입에 구현해 두면 인스턴스가 상속받아 사용할 수 있고 불필요한 중복을 줄일 수 있다.

프로토타입 객체

위에서 살펴봤듯이 프로토타입 객체는 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가진다. [[Prototype]]에 저장되는 프로토타입은 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다.

1. 모든 객체는 하나의 프로토타입을 갖는다
   ([[Prototype]] 내부 슬롯 값이 null인 객체는 프로토타입이 없다)
2. 모든 프로토타입은 생성자 함수와 연결되어 있다.

객체와 프로토타입과 생성자 함수는 다음 그림과 같이 서로 연결되어있다. [[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만, 아래 그림처럼 __proto__ 접근자 프로퍼티를 통해 자신의 [[Prototype]] 내부 슬롯이 가리키는 프로토타입에 간접적으로 접근할 수 있다.

__proto__ 접근자 프로퍼티

__proto__는 접근자 프로퍼티이므로 접근자 프로퍼티의 특성을 지닌다. [[get]], [[Set]] 내부의 getter/setter 접근자 함수를 통해 프로토타입을 읽어오거나 저장할 수 있다.

혹시 접근자 프로퍼티를 모른다면 자바스크립트의 객체를 읽고 와라

__proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티다. 모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다.

__proto__ 접근자 프로퍼티는 서로가 서로의 프로토타입이 되는 등 단방향 링크드 리스트가 아닌 비정상적인 형태로 프로토타입 체인이 발생하지 않도록 하기 위한 목적도 있다. __proto__는 아무런 체크 없이 무조건적으로 프로토타입을 교체할 수 없도록 한다.

그러나 __proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것을 권장하지 않는다. 모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아니기 때문이다.

• Object.getPrototypeOf: 프로토타입의 참조를 취득
• Object.setPrototypeOf: 프로토타입 교체

목적에 따라 위의 메서드를 사용하도록 하자.

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다. 모든 객체가 가지고 있는 (엄밀히 말하면 Object.prototype으로부터 상속받은) __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토 타입을 가리킨다. (헷갈린다면 위의 그림을 가져와서 다시 한 번 보자.)

non-constructor 함수는 prototype 프로퍼티를 소유하지 않고, 프로토타입도 생성하지 않는다. 생성자 함수로서 호출되지 않는 constructor 함수는 prototype 프로퍼티를 소유하지만 아무런 의미가 없다.

프로토타입의 constructor 프로퍼티와 생성자 함수

모든 프로토타입은 constructor 프로퍼티를 갖는다. 이 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다. 이 연결은 생성자 함수가 생성될 때, 즉 함수 객체가 생성될 때 이뤄진다. (이것 또한 위의 그림을 통해 이해하면 편하자)

위 그림에서는 circle2.constructor가 circle2를 생성한 함수을 가리킨다. 그러나 constructor는 언제나 자신을 생성한 주체를 가리키지는 않는다. circle2.constructor는 매우 불안정하고 신뢰할 수 없는 레퍼런스이므로 될 수 있는 대로 코드에서 직접 사용하지 않는 것이 좋다. 여러모로 복잡한 뒷얘기들이 많지만 일단 이 글에서는 다루지 않겠다.

간단하게 constructor가 언제나 자신을 생성한 생성자를 의미하지 않는다고만 알고 있자

리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

생성자 함수가 아닌 리터럴 방식으로 생성된 객체는 어떻게 될까? 결론부터 지르고 가자면 리터럴 방식으로 생성된 객체도 상속이 필요하기 때문에 가상적인 생성자 함수를 갖고, 프로토타입은 생성자 함수와 더불어 생성되며 prototype, constructor 프로퍼티에 의해 서로 연결된다.

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍(pair)으로 존재한다

큰 틀에서 생각해보면 리터럴 표기법으로 생성한 객체도 생성자 함수로 생성한 객체와 본질적인 면에서 큰 차이는 없다. (생성 과정과 여러 가지에서 미묘한 차이가 있을 수도 있지만 결국 동일한 특성을 가진다)

리터럴 표기법에 의해 생성된 객체의 생성자 함수의 프로토타입은 아래와 같다.

프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 사용자 정의 함수와 빌트인 생성자 함수를 사용할 때 각각 프로토타입 생성시점은 언제일지 살펴보자.

• 빌트인 생성자 함수: 전역객체가 생성되는 시점 (전역객체가 생성될 때 빌트인 생성자 함수가 생성됌)
• 사용자 정의 함수: 함수 정의가 평가되어 함수 객체를 생성하는 시점

빌트인 생성자 함수의 경우 객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화되어 존재한다. 이후 생성자 함수 또는 리터럴 표기법으로 객체를 생성하면 프로토타입은 생성된 객체의 [[Prototype]] 내부 슬롯에 할당된다.

Object.create에 의한 직접 상속

Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다. 첫 번째 매개변수에는 생성할 객체의 프로토타입으로 지정할 객체를 전달한다. 두번째 객체에는 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체를 전달한다.

function Person(name) {
	this.name = name;
}

harry = Object.create(Person.prototype); // 두 번째 인수는 생략가능하다
harry.name = 'Harry';

이처럼 첫 번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 객체를 생성한다. Object.create를 활용한 방식의 장점은 다음과 같다

• new 연산자 없이도 객체를 생성할 수 있다
• 프로토타입을 지정하면서 객체를 생성할 수 있다.
• 객체 리터럴에 의해 생성된 객체도 상속받을 수 있다.

⛓️ 프로토타입 체인

프로토타입 체인이 무엇인지 알아보자.

function Person(name) {
	this.name = name;
}

const harry = new Person('Harry');
console.log(harry.hasOwnProperty('name'); // true

마지막 줄에 hasOwnProperty는 Object.prototype의 메서드이다. 이는 harry가 Person.prototype 뿐만 아니라 Object.prototype도 상속받았다는 것을 의미한다. 어떻게 된 일인지 그림을 통해 살펴보자. (ESLint는 위 코드처럼 Object.prototype의 빌트인 메서드를 객체가 직접 호출하는 것을 권장하지 않는다.)

console.log(Object.prototype.hasOwnProperty.call(harry, 'name');
// 위와 같이 간접적으로 호출하는 것이 좋다

자바스크립트는 객체의 프로퍼티에 접근 하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다. 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.

위 코드에서 harry 객체에서 hasOwnProperty를 호출하는 과정을 살펴보면서 위 과정이 어떻게 이루어지는지를 한 번 살펴보자.

1. harry 객체에서 hasOwnProperty 메서드를 검색한다.
2. 없으므로 [[Prototype]] 내부 슬롯에 바인딩 되어있는 Person.prototype으로 이동한다.
3. Person.prototype에서 hasOwnProperty 메서드를 검색한다.
4. 없으므로 [[Prototype]] 내부 슬롯에 바인딩 되어있는 Object.prototype으로 이동한다.
5. Object.prototype에서 hasOwnProperty 메서드를 검색한다.
6. 있으므로 자바스크립트 엔진은 Object.prototype.hasOwnProperty 메서드를 호출한다.

프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype이다. Object.prototype을 프로토타입 체인의 종점(end of protoptype chain)이라한다. 그러므로 Object.prototype의 내부 슬롯 [[Prototype]]의 값은 null이다.

결국, 프로토타입 체인이란 상속과 프로퍼티 검색을 위한 메커니즘이다.

오버라이딩과 프로퍼티 섀도잉

• 프로토타입 프로퍼티: 프로토타입이 소유한 프로퍼티(메서드 포함)
• 인스턴스 프로퍼티: 인스턴스가 소유한 프로퍼티
• 오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

이 때, 프로토타입 프로퍼티와 이름이 같은 프로퍼티를 인스턴스에 추가하면 프로토타입 체인에 따라 프로토타입 프로퍼티를 검색하여 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스 프로퍼티로 추가한다. 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉(property shadowing)이라고 한다.

둘을 아래의 코드를 통해 살펴보자.

function Person(name) {
	this.name = name;
} 

Person.prototype.greeting = function () {
	console.log(`Hi! I'm ${this.name}`);
}

const harry = new Person('Harry');

// 오버라이딩
harry.prototype.greeting = function () {
	console.log(`Hello! I'm ${this.name}`);
}

// Person.prototype의 프로퍼티가 프로퍼티 섀도잉되었다.
harry.greeting(); // Hello! I'm Harry

🧐 정리

• 객체지향 프로그래밍이란, 속성을 추상화해 하나의 단위로 구성한 자료구조인 객체의 집합으로 프로그래밍을 표현하려는 프로그래밍 패러다임이다.
• 프로토타입은 객체 간 상속을 구현하기 위해 사용된다.
• 프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘이다.

📖 참고자료

• 모던 자바스크립트 Deep Dive
  • 19. 프로토타입 (260p~311p)
• 코어 자바스크립트
  • 6. 프로토타입 (147p~173p)
• YOU DON’T KNOW JS
  • 5. 프로토타입 (113p~140p)
• 우테코 레벨1 학습자료
  • 로또 - 모델링과 설계 🏗️ Prototype 문서