자바스크립트와 prototype

자바스크립트는 프로토타입 기반의 언어이다.

일반적인 객체지향언어의 클래스 개념이 없다(클래스 만들고 인스턴스 생성하는 과정).

자바를 공부하면 클래스를 알아야 하듯 자바스크립트를 공부하면 프로토타입을 알아야 한다.

(ES6에서 클래스 문법이 추가되었다. 하지만 문법이 추가된 것이며 클래스 기반으로 바뀌었다는 것은 아니다).

많은 고수분들이 프로토타입이 무엇인지 알면 자바스크립트가 재밌어지고 숙련도가 높아진다고 하신다.

 

사실 자바스크립트는 웹사이트의 움직임을 담당하고 돔 조작을 통해 쉽게(?) 쓸 수 있기 때문에 깊이 있게 공부를 안하고 그때 그떄 기능 위주로 찾아봤었다. 프로토타입에 대해 알아보려 하지 않았고 1년 동안 document.getElementById와 제이쿼리 위주로 썼던 것 같다. 나를 반성하면서 프로토타입에 대해 배워본 것을 적어보고자 한다.

 

* prototype의 사전적 의미는 '원형'인데 사실 이것보다 '유전자'라고 이해하는게 더 좋을 것 같다.

 

먼저 배경지식, 자바스크립트에서 객체는 함수로 생성된다.

 

function Developer() {}
const d1 = new Developer();

 

d1 객체는 Developer라는 함수로 생성된 객체이다.

하지만 우리는 실무에서 new연산자도 쓰지만 리터럴 표기법을 많이 쓴다. 그럼 함수로 생성된게 아니지 않나?

아니다. 그것도 함수로 생성된 것이다.

 

const obj = {}; // 리터럴 표기법
// 위 코드는 아래와 같다.
const obj = new Object(); // Object는 자바스크립트에서 기본적으로 제공하는 함수이다.

콘솔에 Object를 치면 함수로 정의되어 있다

 

본론으로 들어가자.

자바스크립트에서 함수를 선언하면 두가지 일이 진행된다.

 

// Fruit라는 함수 선언. 내용은 비어 있다
function Fruit () {}

 

1. 해당 함수에 생성자 자격이 부여된다

2. 해당 함수의 prototype object가 생성되고 연결된다

 

1번 -> 함수 앞에 new 연산자를 붙여 객체를 만들어낼 수 있다.

const banana = new Fruit();

2번 -> 선언한 함수의 Prototype Object도 어딘가에 같이 생성된다. 그리고 선언한 함수와 연결된다.

 

보이지 않는 곳에 프로토타입 오브젝트도 생성된다

위 그림에서 알 수 있는 것처럼

Fruit 함수는 prototype이라는 속성이 있으며 Fruit Prototype Object를 참조하고 있다.

Fruit Prototype Object는 일반적인 객체와 같으며 기본 속성으로 constructor와 ___proto___를 갖고 있다. 그리고 constructor는 Fruit함수를 참조하고 있다.

 

코드를 통해 확인해보자.

 

이제 프로토타입을 사용하는 예를 살펴보자.

functon Fruit() {
	this.status = 'best';
	this.origin = 'korea';
}

const blueberry = new Fruit();
const tomato = new Fruit();

console.log(blueberry.status); // 'best'
console.log(blueberry.origin); // 'korea'

console.log(tomato.status); // 'best'
console.log(tomato.origin); // 'korea'

 

blueberry와 tomato는 status와 origin을 공통으로 갖고 있는데 메모리에는 status와 origin이 두개씩 총 4개 할당된다. 객체를 100개 만들면 200개의 변수가 메모리에 할당된다. 비효율적이다.

이것을 프로토타입을 사용해 해결할 수 있다.

 

function Fruit() {}

Fruit.prototype.status = 'best';
Fruit.prototype.origin = 'korea';

const blueberry = new Fruit();
const tomato = new Fruit();

console.log(blueberry.status); // 'best'
console.log(tomato.origin); // 'korea'

 

Fruit Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/수정/삭제할 수 있다.

위 코드에선 status와 origin속성을 추가했다. 그리고 blueberry와 tomato 객체는 Fruit함수를 통해 생성되었는데 Fruit Prototype Object의 속성을 모두 쓸 수 있다. Fruit Prototype Object를 공유해서 사용한다.

여기서 핵심이 나온다.

함수를 통해 만들어진 객체는 해당 함수의 프로토타입 객체를 참조한다. 

 

글의 처음 부분에서 프로토타입을 원형보다 유전자라고 이해하면 좋다고 얘기했었다. 위 코드에서 blueberry와 tomato는 Fruit 유전자를 갖고 있기에, 즉 Fruit Prototype Object를 참조하기에 Fruit 유전자의 속성(Fruit Prototype Object의 속성)을 쓸 수 있다. '원형'보다 '유전자'를 넣으면 이해가 더 잘된다.

 

 

그렇다면 의문이 든다. blueberry객체는 어떻게 Fruit Prototype Object를 참조할 수 있나? 바로 blueberry객체가 가진 속성, ___proto___가 있기 때문이다.

___proto___속성은 객체가 생성될 때 사용한 함수의 Prototype Object를 가리킨다.

 

지금까지 말한 프로토타입의 개념을 다시 도식화하면 아래와 같다.

 

 

자바스크립트 내부 로직에선 blueberry 객체가 status를 직접 가지고 있지 않기 때문에 status속성을 찾을 때까지 상위 프로토타입을 탐색한다. 최상위인 Object의 Prototype Object까지 도달했는데도 못찾으면 undefined를 리턴한다.

이렇게 ___proto___속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인이라고 한다.

 

- 끝 -