ES5 자바스크립트에서 Class는 어떻게 동작할까?

📢 Class란?

ES5에서 Class는 "특별한 함수"다. 함수를 함수 표현식과 함수 선언문으로 정의하듯 class 문법도 class 표현식과 선언 두 가지 방법을 통해 정의한다.
Class는 객체를 생성하기 위한 템플릿으로 데이터와 코드를 하나로 추상화한다. JavaScript에서는 class가 생성자 함수역할을 대신하는데 이는 하나의 틀에서 같은 모양의 붕어빵을 찍어내는 붕어빵 틀과 비교할 수 있다! (TMI. 실무에서도 class를 붕어빵틀이라고 표현한다고 한다!)

class 생성자 함수는 일반함수와의 구분을 위해 보통 대문자로 시작하며 this가 존재함으로 fucntion 이 class 역할을 해줄 수 있다.
여기서 this란 기계로부터 생성되는 Object들을 의미한다.(=멋있게 말해서 instance라고 함.)

간단히 말하면 class는 object를 뽑아쓰는 틀(붕어빵 기계)이라고 할 수 있다.

💡 추상화란?

추상화란 내부 구현은 복잡한데 실제 노출되는 부분은 단순하게 보이도록 만든다는 개념으로 추상화를 통해 인터페이스가 단순해진다. 클래스 정의 시 메소드와 속성만 정의한 것을 인터페이스라고 부르는데 이것이 추상화의 본질이다.
대개 추상화와 캡슐화를 비교하여 헷갈려하는데 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

💡 static member, instance member?

자바스크립트의 클래스는
인스턴스에 상속되는지의 여부에 따라 두 가지로 구분이 되는데 자바스크립트에서는 인스턴스에서도 직접 메소드를 정의할 수 있기 때문에 프로토타입 메소드라고 부른다.

• 스태틱 멤버: 프로토타입 프로퍼티 내부에 할당되지 않고 Array 생성자 함수 객체에 직접 할당되어 있는 프로퍼티

• 인스턴스 멤버: 프로토타입 내부에 정의되어있는 메서드들
  
  

var array = new Array(1, 2, 3);

// 인스턴스 멤버 (프로토타입 메서드)
array.concat([4]); // [1, 2, 3, 4]

// 스태틱 멤버
array.isArray(array); // Uncaught TypeError: array.isArray is not a function
Array.isArray(array); // true

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

• 클래스❓
  인스턴스의 공통 속성을 모은 추상적인 개념
  과일은 음식이라는 집단에 포함이 되는데 따라서 과일 클래스는 음식 클래스의 하위 클래스가 된다.

• 인스턴스❓
  클래스의 속성을 지니는 실존하는 객체
  자몽, 사과, 귤... 등은 과일이라는 집단에 속하고 여기서 과일은 ‘클래스’이고 자몽, 사과 귤 등은 클래스에 속하는 인스턴스들이다.
  과일, 음식은 추상적인 개념이고 자몽, 사과, 귤 등은 눈으로 볼 수도 있고 만질 수도 있고 먹을 수도 있는 구체적인 물체라는 차이가 있다.

인스턴스로 부터 공통점을 찾아 정의되는 현실에서의 클래스와 달리 프로그래밍에서는 클래스가 먼저 정의되어야 공통적인 요소를 지니는 인스턴스를 생성할 수 있다.

프로토타입을 일반적인 의미에서의 클래스 관점에서 접근해보면 비슷하게 해설할 수 있는 요소가 있는데 아래와 같다.

생성자 함수 Array 를 new 연산자와 함께 호출하면 인스턴스가 생성된다.

var array = new Array(1, 2, 3);

생성자 함수 Array 를 클래스라고 할 때 Array.prototype 객체 내부의 요소들이 인스턴스에 상속된다고 볼 수 있다. (엄밀히 말하면 상속이 아닌 프로토타입 체이닝에 인한 참조.)

💡 클래스 상속

자바스크립트에서 상속을 구현했다는 것은 결국 프로토타입 체이닝을 잘 연결한 것으로 이해하면 된다.(ES5 기준.)
프로토타입 체이닝으로 인해 자바스크립트는 타언어에서의 상속과 다른 동작을 합니다. 따라서 타언어에서의 상속을 구현하기 위해서 여러 작업이 필요하다.

🤔 ES6 Class is Syntatic Sugar?

ES6에서 class 문법을 지원해주기 시작했다. 그러나 MDN에도 class 가 “syntactical sugar”라고 표현했었을만큼 Class 는 문법설탕일뿐이라는 이야기가 많다.

Syntatic Sugar

인데 위키디피아에서는 문법설탕이라는 말을 다음과 같이 정의한다.

"무엇인가를 만들기에 읽거나 표현하기 쉽게 만들어진 문법.
사람이 사용하기에 언어를 더 “sweeter”하게 해주는 문법.
더욱 간결하고 명확하게 표현이 가능한 문법."

프로그래밍 입장에서는 문법설탕은 “언어에서 제거하더라도 그 언어가 제공하는 기능과 표현을 똑같이 유지하는데 아무런 노력이 필요하지 않은 구조” 인 것이다.
프로토타입언어인 자바스크립트에 클래스가 구현된 것에 대한 반감일 수도 있고 기존 ES5이하의 문법에서도 클래스와 같이 동작하도록 개발하는 것이 가능했기때문에 ES6 클래스를 문법설탕이라고 표현할 수도 있다.

참고: ES6 Class는 단지 prototype 상속의 문법설탕일 뿐인가?