[자바스크립트] 프로토타입 (Prototype)

웹 개발의 표준 문서와 다름이 없는 MDN에서 배열이나 객체 등의 내장 메서드를 검색하다 보면 항상 나오는 단어가 있다.

 

 

배열 또는 객체의 내장 메서드를 검색했을 때 항상 .prototype이 나온다. 무엇을 의미하는 걸까?

 

---

프로토타입(Prototype)이란?

 

자바스크립트에서 프로토타입은 객체의 원형 객체를 의미한다. 

 

더 자세한 설명을 위해 이전 포스팅을 떠올려보자.

 

앞서 배웠듯 자바스크립트에서는 클래스라는 틀을 통해 인스턴스 객체를 생성할 수 있고, 또한 생성했던 클래스를 상속해 새로운 자식 클래스를 생성해 부모의 속성과 기능을 활용하고 추가할 수 있다. 그런데 우리가 인스턴스 객체를 생성하기도 전에 자바스크립트에서는 이미 부모 클래스를 상속하고 활용하고 있다. 대표적으로 우리가 사용하고 있던 문자열String, 배열Array, 객체Object 등이 이에 해당한다.

위처럼 배열을 생성했을 때, 우리가 지정하지 않아도 arr이라는 변수는 이미 수많은 기능과 속성을 [[Prototype]] 안에 가지고 있다. 앞서 말했듯 프로토타입은 객체의 원형 객체이다. 우리는 new 키워드를 통해 Array란 클래스를 활용한 인스턴스 객체를 생성했고, 해당 인스턴스 객체는 이미 저장된 프로토타입을 통해 "기본적으로" 탑재된 기능들과 속성들을 상속하고 있다. 

 

이를 그림을 통해 좀 더 직관적으로 구현해 보았다.

 

위 그림처럼 클래스와 인스턴스 사이를 프로토타입 매커니즘을 통해 다리를 놓고 서로를 연결 시키고 있다. 이로써 기존에 new 키워드를 통해 생성된 인스턴스 객체 arr은 .prototype 키워드를 통해 원형 객체(프로토타입)인 Array 클래스에 접근할 수 있으며 상속한 부모 클래스(Array)의 기능과 속성을 그대로 사용할 수 있게 되는 것이다.

---

프로토타입 체인

 

 

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

 

따라서 우리가 기존에 생성했던 고양이 클래스 또한 프로토타입을 기반으로 한 구조를 가지고 있다. 기본적으로 우리가 class 키워드를 통해 제공하는 속성과 기능(메서드)를 가지고 있지만, 클래스는 근본적으로 "객체"이기 때문에 자바스크립트에서 제공하는 기본적인 기능과 속성을 항상 상속하고 있다. 단, 위의 예시를 통해 보여주고 있는 프로토타입의 내장 메서드는 class 키워드의 프로토타입이다. 어떤 원리일까?

 

 

자바스크립트 객체는 기본적으로 객체 고유의 저장 공간(자기만의 속성)과 프로토타입 객체에 대한 연결고리(링크)를 가진다. 앞선 예시처럼 프로토타입은 또 다른 프로토타입을 가지고 있을 수 있는데, 하나의 객체를 통해 연결된 연속된 프로토타입들을 프로토타입 체인이라고 한다.

 

우리가 콘솔창 또는 자바스크립트 파일을 통해 객체의 속성에 접근할 때 자바스크립트는 객체 고유의 속성과 객체의 프로토타입, 프로토타입의 프로토타입 등 프로토타입 체인의 끝에 이를 때까지 그 속성을 탐색한다. 이 특성 때문에 위와 같은 자동완성 옵션이 주어지는 것이다.

 

 

프로토타입은 속성에서 파생된 __proto__ 속성(키)를 통해 해당 객체의 프로토타입을 비롯한 프로토타입 체인의 모든 프로토타입들을 확인할 수 있다. 이를 통해 새롭게 생성된 인스턴스가 프로토타입 체인이 어디까지 연결되어 있는지, 어떤 프로토타입들을 가지고 있는지 알 수 있다. __proto__ 키워드를 입력했을 때 null이 반환된다면 프로토타입 체인의 종단에 도달했다는 사실을 알 수 있다. 

---

DOM과 프로토타입

 

앞서 말했듯 자바스크립트는 프로토타입 기반 언어다.

 

이 말은 즉, 우리가 DOM을 이용해 HTML 요소를 생성할 경우 해당 요소 또한 프로토타입을 가지고 있다는 말이다.

 

 

예를 들어 브라우저에서 DOM을 이용해 document.createElement 메서드를 통해 div 요소를 생성한다면, 해당 요소에는 innerHTML, textContent 등의 속성을 비롯해 .append()와 같은 메서드도 사용할 수 있게 된다.

 

이처럼 프로토타입은 자바스크립트에서 매우 중요한 존재이기 때문에 어떤 기능과 특성을 가지고 있는지 알고 있는 것이 좋다.

 

마지막으로 프로토타입을 쓰는 이유를 정리해보겠다.

 

• 매번 새로운 객체를 생성하고 필요한 기능을 반복적으로 구현할 필요가 없다.
• 여러 번 상속할 수 있어 단계적으로 기능과 속성을 부여하고 사용할 수 있다.
• 하위 클래스로부터 상위 클래스(프로토타입)에 손쉽게 접근할 수 있다.
• 상속을 통해 반복적으로 생성하기 때문에 메모리 사용량이 적다.

---

참조

• MDN 프로토타입
• 프로토타입을 쓰는 이유: idalio 글, Quora 게시글