ES6 Class

**ES6(ECMAScript 2015)**는 2015년 만들어진 자바스크립트의 표준 문법 스펙입니다. 그 다음에 나온 ES7, ES8 등이 있지만 Class가 포함된 것은 ES6 입니다. Class가 나오기 이전의 자바스크립트에서는 클래스 대신 4가지 instantiation pattern을 이용해 클래스를 구현해 냈습니다. 그 과정이 번거로웠는지 ES6에서 Class라는 함수가 나오게 됐습니다.

ES6 이전의 클래스 구현방식

Functional, Functional-shared, Prototypal, Pseudoclassical의 4가지 방식 중 가장 많이 쓰였던 Pseudoclassical로 클래스를 구현해 봅시다.

var Car = function(name, speed) {
  this.name = name;
  this.speed = speed;
  this.position = 0;
};

Car.prototype.move = function() {
  this.position += this.speed;
};

var car = new Car('My car', 5);
console.log(car.position);
car.move();
console.log(car.position);

위와 같이 작성하며, console.log에 의해 0, 5라는 값이 찍힐 것 입니다. 사실 이렇게 사용해도 문제는 없지만 더 원활한 사용을 위해 클래스가 탄생했습니다.

ES6 이후의 클래스 구현방식

위에서 만들었던 Car 클래스를 ES6 방식으로 구현하면 다음과 같습니다.

class Car {
  constructor(name, speed) {
    this.name = name;
    this.speed = speed;
    this.position = 0;
  }

  move() {
    this.position += this.speed;
  }
}

const car = new Car('My car', 5);
console.log(car.position);
car.move();
console.log(car.position);

위와 같이 작성할 수 있으며, 이번에도 마찬가지로 console.log에 의해 0, 5라는 값이 찍히게 됩니다. 먼저, 한눈에 Class라는 것을 알 수 있고, 그 내부에 메소드를 작성하기 때문에 가독성이 좋습니다.

기본적인 구조를 한번 살펴보겠습니다.

class 클래스이름 {
  constructor(속성들) {
    this.속성1 = 속성1;
    this.속성2 = 속성2;
    ...
  }

  메소드() {
    ...
  }
}

먼저 constructor 메소드로 클래스를 초기화 해줍니다. 그리고 그 아래에 다른 메소드들을 작성합니다. 정말 간단하죠?

Subclass

사실 클래스 선언만 한다면 ES6 이전이나 이후나 많이 다른 부분은 없습니다. 하지만, 상속을 받게 된다면 말이 달라지죠. 자식 클래스를 만드는 방법을 ES6 이전과 이후로 비교해 봅시다.

ES6 이전

var SuperCar = function(name, speed) {
  Car.call(this, name, speed);
};

SuperCar.prototype = Object.create(Car.prototype);
SuperCar.prototype.constructor = Car;

SuperCar.prototype.move = function() {
  this.position += this.speed * 2;
};

ES6 이후

class SuperCar extends Car {
  constructor(name, speed) {
    super(name, speed);
  }

  move() {
    this.position += this.speed * 2;
  }
}

위의 예제를 보면 알 수 있듯이, ES6의 클래스가 명료하고 간단합니다. extends 키워드를 통해 부모를 정할 수 있고, constructor 내부에서 super함수로 부모의 생성자를 호출할 수 있습니다. 그러면 모든 상속이 끝나게 되죠.

앞으로도 Class를 사용할 일이 많으니 확실히 숙지해 두도록 합시다.