[Javascript] 프로토타입 (Prototype)

최근 이전에 공부했던 내용이 잘 기억이 나지 않음을 깨닫고 자바스크립트 기본 중의 기본 프로토타입에 대해서 재학습했다.

 

🧐 프로토타입이란?

자바스크립트는 흔히 사용하는 클래스개념이 ES6(2015)에 도입이 되었다. 그렇다면 코드 재사용, 캡슐화를 어떻게 했을까? 자바스크립트는 프로토타입을 기반으로 상속과 캡슐화를 지원할 수 있다.

 

자바스크립트의 모든 객체에는 해당 생성자 함수를 사용하여 생성된 인스턴스의 상위 역할을 하는 객체인 프로토타입이 존재한다. 따라서 모든 객체는 [[Prototype]]이라는 인터널 슬롯(internal slot)을 가지고 있다. [[Prototype]]의 값은 null 또는 객체로 프로토타입 체인을 이용해 프로토타입의 메서드를 사용할 수 있다.

 

브라우저에서 객체를 출력해보면 다음과 같은 내용을 볼 수 있다.

obj라는 객체를 객체리터럴을 통해 생성하고 console.log()를 통해 출력했다. 내부의 값을 보면 [[Prototype]]이라는 것을 볼 수 있는데 이는 내가 선언한 obj 객체의 프로토타입을 의미한다. 객체 리터럴을 통해 선언했지만 내부적으로 생성자함수를 호출했으며, 호출한 생성자함수는 Object의 생성자 함수로 내가 선언한 객체의 프로토타입이다.

 

객체가 아닌 배열을 통한 예시를 확인해봤다.

이번에는 리터럴이 아닌 Array 생성자 함수를 이용해서 arr에 할당했다. 출력된 값을 살펴보면 이번에는 [[Prototype]]에 Array가 있는 것을 볼 수 있다.

 

여기서 한번 더 생각해볼 수 있는 것이 있다. 자바스크립트의 배열은 실제로 객체로 구현이 되어 있다고 한다. 그렇다면 배열의 프로토타입은 Object가 되어야 하는 것이 아닐까?

맞다! Array를 펼쳐서 살펴보면 Array의 메서드들이 쭉 나열되고 제일 아래에 [[Prototype]]이 있는 것을 볼 수 있는데 여기에는 Object가 있는 것을 확인 할 수 있다.

 

이렇게 모든 값들은 프로토타입을 이용한다. 그렇다면 프로토타입을 확인하는 방법은 또 뭐가 있을까?

 

__proto__라는 프로퍼티를 이용해 확인할 수 있다. __proto__ 프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다.

위에서 arr.__proto__를 이용해 선언했던 arr의 프로토타입 객체를 확인해봤다. 이 객체는 Array 객체이다.

 

🧑🏻‍💻 prototype을 이용하는 이유는 무엇일까?

위의 예시처럼 생성자 함수를 이용해서 인스턴스를 생성하면 해당 인스턴스에는 age, address, getInfo라는 프로퍼티 및 메서드를 가지고 있다. 이때 인스턴스를 여러개 만든다면 불필요한 리소스를 낭비하게 된다. 왜냐하면 getInfo를 매번 생성하지 않아도 됨에도 불구하고 getInfo가 매번 생성되기 때문이다.

 

jb를 출력해보면 age, address, getInfo가 존재하는 것을 알 수 있다. 

 

prototype을 이용하면 다음과 같은 방법이 가능하다.

prototype을 이용해 getInfo를 추가했을 때 jb에는 getInfo 메서드가 존재하지 않는다. 하지만 prototype의 메서드에 getInfo가 존재한다. 처음 Jongbin을 이용한 방법은 매번 getInfo라는 함수를 메모리에 할당하지만 두 번째로 prototype을 이용한 방법은 prototype의 메서드로 등록되어 단 한번만 할당된다.

 

이런 방법이 가능한 이유는 프로토타입 체인 때문이다. 프로토타입 체인이란 요구하는 값이 자신에게 존재하지 않는 경우 상위 요소를 탐색하는 것을 말하는데 위의 경우에는 다음과 같다.

jb 인스턴스에는 getInfo가 존재하지 않는다 따라서 상위요소인 [[prototype]]을 확인한다. Jongbin.prototype에는 getInfo라는 메서드가 있기 때문에 이를 사용할 수 있다. 

 

또한 위에서 봤듯이 배열이 객체로 이루어져 있듯이 함수 또한 객체로 이루어져 있다.  

jb에는 toString()이라는 메서드가 없음에도 불구하고 정상적으로 동작한다. 왜냐하면 위의 그림에 덧붙여 Jongbin.prototype의 상위 프로토타입으로 Object가 있기 때문이다.

실제로 출력해보면 다음과 같다.

 

우리는 이런 프로토타입을 이용해서 클래스를 사용하지 않더라도 상속을 구현하고 코드의 재사용을 할 수 있다!