자바스크립트 클래스

들어가며

자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않습니다.

*본 블로그에 자바스크립트의 프로토타입을 정리한 게시글이 있습니다.

이는 클래스 기반의 다른 언어에 익숙한 많은 개발자들을 혼란스럽게 했고, 자바스크립트에서는 클래스와 비슷하게 동작하게끔 흉내 내는 여러 기법들이 탄생했습니다. 이러한 니즈에 따라 결국 ES6에는 클래스 문법이 추가되었습니다.

 

클래스와 인스턴스의 개념 이해

객체지향 프로그래밍에서 거의 반드시 등장하는 제1요소인 클래스라는 단어의 의미는 일반적으로 쓰이는 의미와 거의 흡사합니다.영어 사전에서 class는 "계급, 집단, 집합" 등으로 번역하는데, 프로그래밍 언어적으로도 이와 동일한 개념에서 접근하면 된다는 말입니다.

 

클래스의 개념을 이해하는건 정말 쉽습니다.

* 객체를 바라보며 상위, 하위를 정확히 나눌 수 있다면...

예를 들어, 어떤 가게에 다양한 음식이 있다고 했을 때, '음식'이라는 범주 안에는 고기, 채소, 과일 등등 다양한 것들이 들어갈 수 있습니다. 이들 역시 다시 하위에서 각 분류에 속하는 대상들로 나눌 수 있을 것입니다. 

과일 범주 아래에는 배, 사과, 바나나, 감, 오렌지 등등이 포함될 것입니다.

 

여기서 중요한건 가게에 있는 배, 사과, 바나나 등은 직접 만질 수 있고 볼 수 있고 먹을 수 있는 구체적이고 실존하는 사물(객체)에 해당합니다. 반면, 음식이나 과일은 어떤 사물들의 공통 속성을 모아 정의한 것일 뿐 직접 만질 수도 볼 수도 없는 추상적인 개념입니다.

 

한편 음식은 과일과의 관계에서 상위의 개념이고, 과일은 음식과의 관계에서 하위의 개념입니다.

이를 그림으로 표현하면 다음과 같습니다.

 

슈퍼 클래스와 서브 클래스

그림에서와 같이 음식, 과일은 모두 집단, 즉 클래스입니다. 음식은 과일보다 상위의 개념이고, 과일은 음식보다 하위의 개념입니다. 여기서 앞의 super, sub를 접목해서 상위 클래스(superclass)/하위 클래스(subclass)로 표현합니다.

 

이처럼 클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가 또는 변경됩니다.

* 물론 하위 클래스가 아무리 구체화되더라도 이들은 결국 추상적인 개념일 뿐입니다.

 

한편 배, 사과, 바나나 등은 음식에 음식에 속해 먹을 수 있고, 과일에 속해 나무에서 열리는 구체적인 개체들입니다.

앞의 클래스들의 속성을 지니는, 실제로 먹을 수 있고 만질 수 있는 실존하는 개체입니다.

 

이처럼 어떤 클래스의 속성을 지니는 실존하는 개체를 일컬어 인스턴스(instance)라고 합니다.

 

컴퓨터는 사용자가 직접 클래스를 정의해야 하며, 클래스를 바탕으로 인스턴스를 만들 때 비로소 어떤 개체가 클래스의 속성을 가지게 됩니다. 또한 한 인스턴스는 하나의 클래스만을 바탕으로 만들어집니다. 어떤 인스턴스가 다양한 클래스에 속할 수는 있지만 이 클래스들은 모두 인스턴스 입장에서는 '직계존속'입니다. 다중상속을 지원하는 언어이든 그렇지 않은 언어이든 결국 인스턴스를 생성할 때 호출할 수 있는 클래스는 오직 하나뿐일 수밖에 없기 때문입니다.

 

그러니까 프로그래밍 언어에서의 클래스는 현실세계에서의 클래스와 마찬가지로 '공통 요소를 지니는 집단을 분류하기 위한 개념'이라는 측면에서는 일치하지만 인스턴스들로부터 공통점을 발견해서 클래스를 정의하는 현실과 달리, 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체들을 생성할 수 있습니다.

 

나아가 현실세계에서의 클래스는 추상적인 개념이지만, 프로그래밍 언어에서의 클래스는 사용하기에 따라 추상적인 대상일 수도 있고 구체적인 개체가 될 수 있습니다!

 

자바스크립트의 클래스

자바스크립트는 프토토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다고 설명드린 바 있습니다. 그렇지만 프로토타입을 일반적인 의미에서의 클래스 관점에서 접근해 보면 비슷하게 해석할 수 있는 요소가 없지 않습니다.

 

생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성됩니다. 이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 '상속'된다고 볼 수 있습니다. 

정확히 상속이라기보단 참조에 가깝지만 실행했을 때 결과적으로는 동일하게 동작하므로 '상속'의 개념으로 이해해도 괜찮을 거 같습니다.

 

코어 자바스크립트: 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍을

공부하며 이해한 내용을 기반으로 정리한 게시글입니다.