Javascript의 프로토타입이란?

 

자바스크립트는 함수형을 기반으로 하는 class-free 프로토타입 기반 객체지향 프로그래밍 언어다. ES6에서 class가 정식 문법이 되었지만 이 또한 결국 javascript 객체지향의 근간인 prototype 방식을 문법적으로 class처럼 보이게 만들어준 도구에 불과할 뿐이다. 그렇다면 프로토타입이란 무엇일까?

---

1. 자바스크립트의 탄생

Brendan Eich가 자바스크립트를 처음 설계할 당시, 웹브라우저에서 간단하게 돌아가는 작은 스크립트를 만들고자 했다. 때문에 복잡한 class 문법을 도입하지 않고 LISP 등의 함수형 언어에서 아이디어를 차용해 언어를 설계하고자 했다. 그러나 Netscape의 상사는 시대적으로 당시 인기가 많았던 Java와 유사한 언어를 만들길 원했고 결국 class 문법 특징과 함수형 언어의 특징을 혼합한 형태의 독특한 언어가 탄생하게 되었다. 그리고 이를 위해 프로토타입이라는 개념을 도입했다.

 

2. 프로토타입이란

Java와 달리 Javascript는 class 없이 바로 객체 생성이 가능하며, 상속을 받는 대신 프로토타입 체인을 통해 "있으면 내껄 쓰고 없으면 찾아간다".

 

프로토타입을 설명하기 위해 흔히 객체의 DNA라는 비유를 많이 쓴다. 어떤 객체의 DNA는 그 객체와 연관된 또 다른 객체들의 DNA가 되기도 한다. 개인적으로 척수라는 비유를 써도 좋을 것 같다. 프로토타입 체인이라는 척수를 통해 연결된 객체라는 신경들은 프로토타입을 공유할 수 있다. 물론 수평적인 공유는 아니며 수직적 계층 구조를 지닌다. 보다 구체적으로는, 단방향 링크드 리스트의 형태다.

 

다시 말해 모든 객체들은 메소드와 프로퍼티를 상속받기 위한 템플릿으로써 프로토타입 객체를 가진다. 어떤 객체에 특정 속성이 없어도 __proto__속성을 통해 상위 프로토타입과 연결시켜 해당 속성을 참조가능하다.

 

프로토타입을 사용함으로써 불필요한 낭비를 줄일 수 있다. 정사각형 한 변의 길이를 받아 넓이를 반환하는 square 생성자 함수를 예시로 살펴보자.

function Square(length){
  this.length = length;
  this.getArea = function(){
    return this.length*length;
  }
}
const square1 = new Square(2);
const square2 = new Square(3);

프로토타입을 활용하지 않을 경우, getArea가 불필요하게 square1과 square2에서 각각 호출되어 동일한 작업을 하게 된다. 프로토타입을 활용하면 이러한 낭비를 줄일 수 있다. 이때 getArea 메소드는 square1, square2에서 별도로 생성되지 않고, 프로토타입 __proto__에 저장되어 한 번 생성된다.

function Square(length){
  this.length = length;
}
Square.prototype.getArea = function(){
  return this.length*length;
}
const square1 = new Square(2);
const square2 = new Square(3);

 

3. 마무리

좋은 자바스크립트 코드는 결국 이러한 자바스크립트만의 독특한 특성을 잘 살린 코드일 것이다. 객체지향적으로 독립적인 작은 프로그램 단위로 코드를 제작하여 편리하게 재사용하는 장점을 취하되, 객체들의 결합이 높아져서 프로그램이 복잡해지는 문제를 방지하기 위해 굳이 객체로 만들지 않아도 될 부분들은 함수형으로 만드는 것, 이를 통해 간명함과 높은 가독성을 지닌 코드, 그리고 스케일이 커져도 유지보수하기 좋고 재사용이 편리한 코드를 만들어 내는 것, 이것이 좋은 자바스크립트 코드일 것이다.

---

더 자세히 알아보기

관련서적: 모던 자바스크립트 Deep Dive

 

 

 

 

-학습을 진행하며 남기는 지식 포스팅-

 

-부족한 설명이 있다면 부디 조언 부탁드립니다-

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다