[코어자바스크립트] ES6 class 문법

📚 What is TIL?

ECMAScript 5 에서의 클래스 상속

var ES5 = function (name) {
	this.name = name;
};
ES5.staticmethod = function () {
	return this.name + ' staticMethod';
};
ES5.prototype.method = function () {
	return this.name + ' method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod());   // es5 staticMethod
console.log(es5Instance.method()); // es5 method

클래스를 구현하기 위해서

우선, 생성자 함수를 작성해야하기 때문에 ES5 이라는 생성자 함수를 정의하고
생성자 함수에 직접 staticmethod 라는 정적(static) 메서드와
생성자 함수의 프로토타입에 method 라는 인스턴스 메서드를 추가하는 등

💡 ES5 에서는 프로토타입 체인과 생성자 함수를 이용해서 직접적으로 상속을 구현해야하는 번거로움이 있다

그리고, 프로토타입 기반으로 클래스 상속을 구현하는 방식 안에서도
아래와 같이 좀 더 구조화된 형태로 상속을 구현할 수 있지만…

1) SubClass.prototype에 SuperClass의 인스턴스를 할당한 다음 프로퍼티를 모두 삭제하는 방법
2) 빈 함수(Bridge)를 활용하는 방법
3) Object.create를 이용하는 방법

💡 직관적이지 못하고 복잡해서 가독성이 떨어지는 큰 단점이 존재했다

ECMAScript 6 에서의 클래스

하지만 ES6 에서 부터 보다 직관적이고 구조화된 형태로
상속을 구현할 수 있는 클래스 문법이 도입되고 클래스 문법이 주로 사용되게 되었다

클래스 문법의 사용방법을 살펴보자

var MyClass = class  {
  constructor(prop) {
    this.prop = prop;
  }
  static staticMethod() {
    // 정적 메서드의 구현
  }
	instanceMethod() {
    // 인스턴스 메서드의 구현
  }
};

var Child Class = class extend MyClass{
	constructor(prop) {
		super(prop);
	}
}

1) class 키워드를 사용하여 클래스를 정의한다 클래스 이름은 보통 대문자로 시작한다

2) ES5에서의 생성자 함수와 동일한 역할을 하는 생성자 메서드를 정의한다
 constructor 메서드는 객체를 생성할 때 자동으로 호출되는 특별한 메서드이다

3) static 키워드를 사용하여 정적 메서드를 정의할 수 있다

4) extends 키워드를 사용하여 다른 클래스를 상속받을 수 있다

5) super 키워드를 사용해서 자식 클래스에서 부모 클래스의 생성자나 메서드를 호출할 수 있다
 부모 클래스의 생성자 호출은 자식 클래스의 생성자에서 첫 번째 줄에 위치해야 한다

var ES5 = function (name) {
	this.name = name;
};
ES5.staticmethod = function () {
	return this.name + ' staticMethod';
};
ES5.prototype.method = function () {
	return this.name + ' method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod());   // es5 staticMethod
console.log(es5Instance.method()); // es5 method

var ES6 = class {
	constructor (name) {
    this.name = name;
  }
  static staticMethod () {
    return this.name + ' staticMethod';
  }
  method () {
    return this.name + ' method';
  }
};
var es6Instance = new ES6('es6');
console.log(ES6.staticMethod());   // es6 staticMethod
console.log(es6Instance.method()); // es6 method

💡 그래서 프로토타입 기반으로 클래스를 구현한 코드를 클래스 문법으로 변경하면

 정적(static) 메서드와 인스턴스 메서드를 추가할 필요없이
 클래스 정의와 프로토타입 메서드 추가가 동시에 이루어면서,
 보다 직관적이고 간결하게 코드작성이 가능하다

ES6 클래스 상속

---

아래 코드는 직사각형(Rectangle)과 정사각형(Square) 클래스를 정의하고,
상속을 통해 정사각형 클래스를 확장한 코드이다

var Rectangle = class {
	consturctor (width, height) {
    this.width = width;
    this.height = height;
  }
  getArea () {
    return this.width * this.height;
  }
};
var Square = class extends Rectangle {
	constructor (width) {
    super (width, width)
  }
  getArea () {
    console.log('size is :', super.getArea());
  }
}

우선, extends를 통해 Square를
Rectangle 클래스 상속받는 SubClass로 만들고
constructor 내부에는 super 키워드를 통해 SuperClass
즉, Rectangle 의 constructor 을 실행하도록 하면
정상적으로 정사각형의 넓이를 구할 수 있을 것이다

💡 여기서 알아둘 것은

 constructor 메서드를 제외한 다른 메서드에서는
 super 키워드를 마치 객체처럼 사용할 수 있고,
 이때 객체는 SuperClass.prototype을 바라보는데,
 호출한 메서드의 this는 super 가 아닌 원래의 this를 그대로 따른다

var square = new Square(5);
square.getArea(); // size is: 25

✔️ 직접 확인해보자

 Square 클래스의 getArea 메서드 내부에서
 super.getArea()를 호출하면 Rectangle 클래스의 getArea 메서드가 실행된다
 이때 호출된 getArea 메서드 내부에서의 this는 square 인스턴스를 가리키므로
 size is : 25 라는 문구가 콘솔에 뜨는 것을 확인할 수 있다

요약

클래스 문법은 기능적인 측면에서는 프로토타입 기반의 객체 지향 프로그래밍과 동일하지만
그러한 기능들을 더 직관적이고 간결한 형태로
작성할 수 있게 도와주는 설탕문법이라고 할 수 있다

💡 기존에 프로토타입 기반으로 클래스 상속을 구현하는 방식에서의
 번거로움과 복잡성 때문에 클래스 문법이 도입 되었고

💡 보다 직관적이고 구조화된 형태로 코드를 작성할 수 있기 때문에,
 클래스 문법을 이용해서 코드를 모듈화하고,
 재사용성을 높이는 등의 객체 지향 프로그래밍을
 보다 편리하게 작성할 수 있도록 도와준다고 할 수 있다