🤔 프로토타입의 장점은 무엇일까?

🚀 들어가며

얼마 전, 우아한형제들 기술면접에서 “프로토타입의 장점은 무엇인가요?” 라는 질문을 받았다. 나의 답변이 부족한 부분이 많았던 것 같아고 아무래도 자바스크립트의 코어한 개념이기도 한만큼 다시 깊게 파보려고 이 글을 쓰게 되었다.

프로토타입을 장단점을 살펴보기 위해 총 세 가지 파트로 나누어서 진행하려고 한다.

• Prototype vs Class, on OOP
• Prototype in JavaScript
• Prototype, Merits and Demerits

OOP에서의 두가지 컨셉의 개념과 지향하는 철학부터, 자바스크립트에서의 프로토타입을 가볍게 한 번 살펴보고 그리고 마지막으로 핵심인 “프로토타입의 장단점은 무엇인지”를 다시 대답해보도록 하겠다.

---

🥊 Prototype vs Class, on OOP

자바스크립트의 프로토타입은 1987년에 등장한 최초의 프로토타입 객체 지향 언어인 “Self”에서 가져온 개념이다. “Self”를 통해 기존의 클래스 기반 프로그래밍과 비교되는 “프로토타입 기반 프로그래밍”이라는 패러다임에 대해서 알아보자.

Class-based Programing

먼저, 클래스 기반 객체 지향 언어들의 문제를 살펴보자.

클래스 기반 객체 지향 언어는 뿌리 깊은 이중성을 기반으로 한다.

1. 클래스는 객체의 기본 “특징”과 “행동”을 정의한다.
2. 객체 인스턴스는 클래스의 특정 표현이다.

위에 대한 예시를 보자. Vehicle 이라는 클래스가 있다. Vehicle 클래스는 “직장까지 운전”, “건축 자재 배달” 과 같은 다양한 작업을 수행할 수 있는 기능이 있다.

그리고, 해리의 차를 위해 Vehicle 클래스의 ferrari 라는 이름을 가진 객체 인스턴스를 생성했다. 그런데 알고 보니 ferrari 는 스포츠카였다. Vehicle 클래스의 인스턴스인 ferrari 는 “건축 자재 배달”을 수행할 수 있어야 하지만, 실제론 할 수 없다.

이 문제를 해결하기 위해서는 Vehicle 의 서브클래스를 사용해 전문화할 수 있다.

Vehicle 이 서브클래스로 SportsCar , Truck 를 갖도록 모델링한다. 그리고, “건축 자재 배달”은 Truck 으로 생성된 인스턴스가 할 수 있도록, “고속 주행”은 SportsCar 로 생성된 인스턴스가 할 수 있도록 만들어야한다.

그러나, 이러한 심층 모델은 클래스 설계 시 더 많은 통찰력이 필요하다. 먼 미래에 객체와 클래스가 어떤 특성을 갖게 될지 확실하게 예측할 수 없다면 클래스 계층 구조를 제대로 설계할 수 없다.

또한 클래스를 변경하면 클래스를 기반으로 하는 객체의 동작이 변경된다. 이러한 변경은 해당 클래스를 기반으로 하는 다른 객체에 예상치 못한 문제가 발생할 수 있기 때문에 매우 신중하게 실시해야한다.

이러한 문제가 프로토타입을 만드는 동기 요인 중 하나이다.

---

Prototype-based Programing

Self에서는 “클래스”를 기반으로 하는 객체의 “인스턴스”를 갖는 대신 기존 객체의 복사본을 만들고 변경한다. 따라서 위의 예시에서 Vehicle 객체의 복사본을 만든 다음 “고속 주행” 동작을 추가하여 ferrari 로써 모델링된다. 서브클래스를 만드는 과정이 필요없는 것이다.

이렇게 객체의 복사본을 만들 때의 기존 객체를 “프로토타입”이라 한다.

프로토타입을 사용하면, 기존 객체가 부적절한 모델인 것인 판명되었을 때, 올바른 동작을 가지는 변경된 객체를 작성해 그것을 대신 사용할 수 있다. 기존 객체를 사용하는 코드가 변경되는 문제도 발생하지 않는다.

---

🐕🐩 Prototype in JavaScript

위에서 “프로토타입 기반 프로그래밍”과 “클래스 기반 프로그래밍”을 비교해봤으니, 실제로 자바스크립트의 프로토타입은 어떤 것인지를 살펴보자.

프로토타입 객체를 만든 다음 새 인스턴스를 만듭니다. 객체는 JavaScript에서 변경 가능하므로 새 인스턴스를 보강하여 새 필드와 메서드를 제공할 수 있습니다. 그런 다음 이들은 더 새로운 객체의 프로토타입 역할을 할 수 있습니다. 유사한 객체를 많이 만들기 위해 클래스가 필요하지 않습니다. 객체는 객체에서 상속됩니다. 그보다 더 객체지향적인 것이 있을까요?

자바스크립트의 프로토타입 상속에 관한 더글라스 크락포드의 설명이다.
초기의 자바스크립트는 프로토타입을 채택하면서도, 자바처럼 보이기 위해서 “생성자 함수”와 “new 키워드”를 사용했지만 클래스 기반 OOP로 보이지만 사실상 프로토타입 기반이기 때문에 더 큰 혼란을 초래했다.

JavaScript의 생성자 패턴은 고전적인 군중에게 호소력이 없었습니다. 또한 JavaScript의 진정한 프로토타입 특성을 모호하게 만들었습니다. 결과적으로 언어를 효과적으로 사용하는 방법을 아는 프로그래머는 거의 없습니다.

위는 생성자 패턴에 대한 더글라스 크락포드의 의견이다. 이후 Object.create() 를 ECMAScript5 부터 지원하면서 기존의 문제점을 해결할 수 있게 되었다.

자바스크립트의 프로토타입을 통해 객체를 생성하고 프로토타입을 활용하는 것을 간단하게만 살펴보자.

위 코드는 아까의 예시로 든 Vehicle 과 SportsCar 를 자바스크립트의 프로토타입을 통해 생성한 코드이다. ferrari 는 따로 서브클래스를 만들 필요 없이 Vehicle 를 프로토타입으로 지정하여 driveToCompony 메서드를 위임할 수 있고, 목적에 맞게 사용할 수 있도록 ferrari 객체에 따로 speedDrive 라는 메서드도 추가해주었다.

사실 여기서 Vehicle 직접 사용되는 객체라기보다 프로토타입으로써의 역할만 하는 것 같아서 좋은 방식이라는 생각이 들지는 않는다. 이건 아래에서 더 살펴보자.

이 글을 읽는 대상은 프로토타입에 대한 어느 정도의 이해가 있다고 생각하고 __proto__ , prototype 등등 내부적인 부분이나 자세한 사항까지는 다루지 않겠다.

이제 마지막으로 넘어가서 프로토타입의 장단점을 살펴보자!

---

👍 Merits

1️⃣ 점진적 학습

클래스와 상속, 프로토타입과 위임은 “구체적인 상황에서 얻은 지식을 일반화하는 방식”의 두 가지 메커니즘이다. 하나의 예시를 통해 두 가지를 비교해보자.

위에 Vehicle 관련 예시를 가져와보겠다. 나에게 ferrari 라는 자동차가 있다. 이는 새로운 자동차인 volvo 을 만났을 때 ferrari 에 대한 지식을 활용할 수 있다. 둘은 모두 자동차이기 때문에 공통점을 가지고 있을 것이고 이를 일반화시킬 수 있을 것이다.

클래스

이를 어떻게 하는지, 먼저 클래스를 살펴보자.

클래스에서는 Vehicle 이라는 클래스(집합)을 생성할 수 있다. 이러한 Vehicle 클래스는 나에게 있는 ferrari 와 충분히 유사한 모든 자동차에 대해 사실이라고 믿는 것을 추상화한 집합이다. ferrari 는 Vehicle 의 인스턴스(구성원)으로 볼 수 있다.

클래스(집합)는 모든 인스턴스(구성원)에 대해 사실을 나타내므로 이후에 자동차인 volvo 을 만나면 Vehicle 을 통해 volvo 를 설명할 수 있다.

그리고 각자가 다른 Vehicle 과 공유하지 않는 특성을 가지고 있다면 SportsCar , Truck 과 같은 서브클래스를 통해 구현할 수 있다.

---

프로토타입

다음은, 프로토타입은 지식의 일반화다.

프로토타입에서는 ferrari 를 자동차의 프로토타입(원형)을 나타내는 것으로 간주할 수 있다. 나에게 가장 친숙한 자동차가 ferrari 라면, 자동차는 ferrari 자체의 이미지일 수 있다.

“자동차의 바퀴가 몇 개인가?” 라는 질문에 달리 생각해야할 타당한 이유가 없는 한 질문에 대답하는 방식은 ferrari 의 바퀴가 몇 개인지와(4개 라고 가정) 답이 같다고 가정한다.

그리고 volvo 에 대해 설명하기 위해 프로토타입에서는 ferrari 를 volvo 의 프로토타입(원형)으로 지식을 활용할 수 있다.

“volvo 의 바퀴가 몇 개인가?” 라는 질문에는 반대 증거가 없는 이상 ferrari 와 같다고 대답한다. 그러나, 이후 volvo 의 바퀴가 8개라는 사실을 알게 되면, 이는 volvo 에 대한 지식으로 저장되고, 프로토타입에 대한 참조를 확인하기 전에 검색된다.

또한 번거롭게 기존 수퍼클래스를 수정하거나, 서브클래스를 생성할 필요도 없다 .

아까 “Prototype in JavaScript” 파트에서 든 예시보다 이 예시가 프로토타입을 설명하기에, 사용하는 방식으로도 더 적합하다고 나는 생각한다.

---

💡 그래서 점진적 학습이 뭔데?

위에서 살펴본 바에 의하면, 프로토타입 접근 방식은 어떤 면에서 사람들이 구체적인 상황에서 지식을 습득하는 것처럼 보이는 방식에 더 가깝다.

사람들은 일반적인 추상 원리를 먼저 흡수하고 나중에 특정 사례에 적용하는 것보다 구체적인 예를 먼저 다룬 다음 그로부터 일반화하는 것을 훨씬 더 잘하는 것 같다.

그러나, 클래스(집합)에서는 개별 인스턴스(구성원)을 생성하기 전에 먼저 집합에 대한 추상화를 해야한다. 수학에서 집합은 구성원을 열거하거나, 집합의 구성원을 식별하는 통합 원칙을 설명해 정의한다.

그러나 우리는 모든 자동차를 열거할 수 없다. 10억번째까지 자동차의 바퀴는 4개였지만, 10억1번째 자동차의 바퀴는 8개일 수도 있다.

하지만 클래스(집합)의 개념은 이와 위배된다. 이와 같이 프로토타입은 사람들이 더욱 편하게 생각하는 방식인 구체적인 예시들을 통해 개념에 대한 “점진적 학습”을 하는 데에 유리하다.

---

2️⃣ 메모리

프로토타입은 클래스 방식에 비해 “메모리”를 아낄 수 있다는 장점이 있다. 클래스는 새로운 인스턴스를 만들 때 “복사”를 하지만, 프로토타입은 객체와 객체를 “연결”한다.

하나의 클래스에서 100개 인스턴스를 만든다면, 클래스의 메서드를 100개 복사한다. 그렇지만 프로토타입에서는 프로토타입 객체에 있는 메서드를 참조하고 있을 뿐임으로, 메서드 1개만 존재하게 된다.

그렇기 때문에 자바와 같은 클래스 기반 언어에서는 메모리를 아끼기 위해 하나의 클래스에서 하나의 인스턴스만 생성하는 싱글톤 패턴 등을 사용한다고 한다.

물론, 아래에서 다루겠지만 이로 인한 프로토타입의 단점도 존재한다.

---

👎 Demerits

1️⃣ 속도

프로토타입은 위임을 통해서 객체를 생성할 때 상위 객체의 메서드를 “연결” 하므로 객체의 크기를 줄여 메모리를 아낄 수 있는 대신, 메서드를 검색하기 위해 상위 프로토타입 체인을 따라 검색해야한다.

이는 속도 저하로 이어질 수 있다는 문제가 있다.

다행히도, 검색 시간을 줄이는 방식으로 조회 결과를 “캐싱”하는 방법이 있다고 한다. 크롬의 V8 엔진은 “히든 클래스”라는 개념을 통해 이러한 속도 문제를 해결했다.

---

🧐 정리

오늘은 프로토타입 방식의 장단점을 알아봤다.

• 장점: 구체적 예시를 통한 개념의 점진적 학습, 메모리를 효율적으로 사용
• 단점: 속도가 느림

로 끝났지만 나열된 장점이 더 많다고 프로토타입이 무조건 클래스보다 좋다거나, 그 반대라거나 한 것은 아니다. 아직까지도 논의가 활발한 것으로 알고 있다.

어찌됐든 자바스크립트가 프로토타입 방식을 채택한만큼, 프로토타입을 잘 활용하기 위해 프로토타입과 그 배경에 대한 공부를 열심히 하는 것이 좋아보인다.

사실 이 글을 쓰면서 본 자료에서 더 많은 비교와 장단점을 봤지만 도저히 이해를 했다는 생각이 들지 않아서 이 글에는 포함을 시키지 못했다. (여러 소스의 동작을 결합하기 위해 더 유연, 점진적이고 인터랙티브한 개발에 유리 등등 ...)

추후 업데이트하거나 토끼굴에 빠질까봐 미룰 것 같다.

---

📖 참고 자료

• Self
  • selflanguage.org
  • Self (programming language)
  • Self Handbook for Self 4.5.0 documentation

• prototype
  • Prototype-based programming
  • Prototypal Inheritance in JavaScript
    
  • Using Prototypical Objects
    to Implement Shared Behavior
    in Object Oriented Systems
  • Prototypal Object-Oriented Programming using JavaScript
    
    
• JavaScript Performance
  • 자바스크립트 성능의 비밀 (V8과 히든 클래스)
  • Secret Behind JavaScript Performance: V8 & Hidden Classes

• Singeleton
  • 싱글톤(Singleton) 패턴이란?