자바스크립트는 왜 prototype 기반 언어라고 불릴까?

자바스크립트는 본래 프로토타입(prototype)을 이용해서 클래스를 만들었습니다. 그리고 es6부터 Class가 추가 되었습니다.

 

일단 그 전에 Object에 대해 아시나요?

 

Class가 템플릿, 즉 객체 공장이라고 생각한다면 Object는 그 객체공장에서 만들어지 실체입니다. 정말 많이 드는 예시로는 붕어빵틀과 붕어빵이 있습니다. 붕어빵틀은 클래스이고 붕어빵을 Object로 비유하면 초보자에게 이해가 정말 쉽습니다. 

 

let person = {name: 'kimtaejin', age: 1};

자바스크립트에서는 위와 같이  Object를 생성할 수 있습니다. 

 

또한, 자바스크립트에서는 함수를 통해  Object를 생성할 수 있는데요.

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

let kim = new Person('taejinkim',1); 

 

이렇듯, Obejct를 통해 서로 다른 종류의 값들을 하나로 묶을 수 있다는 장점이 있고, 이는 하나의 자료형만을 저장할 수 있는 배열과의 차이이기도 합니다. 자바스크립트에서 배열에 서로 다른 자료형을 넣어도 오류가 생기지는 않지만, 그렇게 하면 안됩니다... 그냥 안됩니다. 절대...

 

다만 앞서 new같은 경우는 저렇게 함수에만 쓸 수 있을 겁니다.

 

저는 이때부터 궁금한게 생겨서 MDN을 찾아봤습니다. 자바스크립트는 분명 프로토타입기반의 언어라고 설명을 들어왔고, 윗 부분까지의 지식만 가진 상태에서는 그 말을 이해할 수 가 없었습니다. 

MDN사이트를 본 결과 아래와 같이 나와있습니다.

 

출처:mdn(https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes)

이를 통해서 자바스크립트의 모든 객체는 프로토타입을 통해 상속을 할 수 있다는 것을 알 수 있습니다. 그렇다면 당연히 근본이 되는 개념이겠죠. 또한 객체를 상속하고 상위 프로토타입과의 관계를 프로토타입 체인이라고 부른다고 합니다.

 

그렇다면 프로토타입을 통해 상속을 한다는 것은 무슨 의미일까요?

 

그전에 프로토타입의 장점을 한 번 알아봅시다. 프로토타입의 장점 중 하나는 아래와 같습니다.

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

Person.prototype.gender = 'male';

let kim = new Person('taejin', 1);
let oh = new Person('oh ha yeong',2);
oh.gender = 'female';


console.log(kim.gender);
console.log(oh.gender);


console.log(Object);
console.log(Person);
console.log(kim);
console.log(oh);

 

우선, 위의 코드를 보시면 prototype을 통해 gender를 공유하게 하고, oh같은 경우는 여자이기에 추후에 female로 변경한 것을 확인할 수 있습니다. 무슨말이냐면 예시가 좀 억지스러운 감이 없지 않아있는데 성별은 Person의 필수요소 이지만 무조건 male로 초기화 한다고 합시다. 그렇다면 Person 객체 안에서 정하기 보다는 Person으로 만든 모든 객체가 공유하게끔 설정하는 겁니다. 즉 메모리를 절약하는 셈이죠. 또한 예외가 있다면 male이 아닌 female로 바꿀 수도 있습니다. 서로 다른 Obejct인데도 불구하고 같은 공장의 한 자원을 참조할 수 있게 된다는 것이죠!!

 

 

여기까지만 배워서는 그래 prototype은 그런 장점을 가지고 있네...로만 끝날 가능성이 높습니다. 하지만 위에서 mdn사이트에 글을 기억하세요!! prototype이 원형이고 그것은 상속을 가능하게 한답니다!! 

 

이게 무슨... 소리지??

 

일단 브라우저를 통해 바로 위의 코드의 결과값을 살펴봅시다.

 

여기서 3번째 줄을 보시면 Object()는 native code 즉, 내장된 코드라고 합니다.

그 뒤로 제가 출력한 Person 함수가 나오고 , 그 뒤로는 kim과 oh의 값이 나오는 것을 확인할 수 있습니다.

 

그런데 뭐가 보이시지 않나요?? 내 __proto__입니다. __proto__: Object라고 나와있네요 무슨 의미일까요?

 

자세히 줌인을 해봅시다. 내 __proto__ 를 여니 무엇이 나왔나요.. 바로 prototype.gender = 'male'로 지정해 놓은 부분과 함께 __proto__:Object가 나오게 됩니다.!!!!!

 

이 말은 즉 Person의 객체는 Object의 prototype.함수 로 정의된 모든 것을 사용할 수 있다는 의미로 해석 됩니다.(참고로 Object는 모든 객체가 참조할 수 있는 조상입니다. 포인트는 저 __proto__를 통해서 가능하다는 것!! 그렇지 않다면 저렇게 __proto__안에 __proto__가 chain의 형태로 연결되지는 않았겠죠.)

 

전 여기까지 공부했을때 mdn의 그 글귀를 이해하게 되어 정말 끼뻤습니다. 이래서 prototype 체인이라고 불렀고 이를 이용해서 상속의 기능을 구현했던 것입니다.

 

우선 여기까지만 이해하면 됩니다. 다음 포스팅에서는 이를 더 깊게 다루고, prototype 상속도 다루겠습니다.

어떻게 prototype의 속성들이 출력되는지 또한 알아볼겁니다.

 

 

developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes

developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

상속과 프로토타입

추가적으로 프로토타입을 정말 잘 설명한 블로그가 있어서 링크를 남겨 봅니다.

medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기