자바스크립트의 클래스 개념과 OOP에 대해 알아보겠습니다. 이 글은 MDN과 책 코어자바스크립트를 토대로 작성됐습니다.

클래스(class)

클래스란?

도마뱀과 뱀은 모두 파충류에 속한다. 여기서 파충류는 도마뱀보다 상위 개념이고, 도마뱀은 파충류보다 하위 개념이다. 그리고 도마뱀은 또 다른 상위 개념이 된다.
이를 클래스에선 상위 클래스와 하위 클래스로 표현한다.

하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가된다. 이구아나는 파충류의 개념과 도마뱀의 개념을 모두 가지는 동시에, 이구아나 자신만의 개성을 갖는다. 이처럼 클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가 또는 변경된다.

어떤 클래스의 속성을 지니는 실존하는 개체를 인스턴스라고 한다.

자바스크립트의 클래스

자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다. 따라서 자바스크립트에서의 상속은 엄밀히 상속이 아닌 프로토타입 체이닝에 의한 참조이다. 그러나 결과적으로는 똑같이 동작하므로 이렇게 이해해도 무방.

생성자의 어떤 프로퍼티가 인스턴스에 상속되는지 아닌지 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉜다. 사용에 혼동이 없기 위해 인스턴스 멤버보다는 프로토타입 메서드로 더 많이 불린다.

const Rectangle = function(width, height){
  this.width = width
  this.height = height
}

// 프로토타입 메서드
Rectangle.prototype.getArea = function (){
  return this.width * this.height
}

// 스태틱 메서드
Rectangle.isRectangle = function(instance){
  return instance instanceof Rectangle
}

클래스 상속

클래스 상속은 객체지향에서 가장 중요한 요소 중 하나이다.

결국 자바스크립트에서 클래스 상속을 구현했다는 것은 결국 프로토타입 체이닝을 잘 연결한 것으로 이해하면 된다.