IM Sprint #5 - ES6 class

IM Sprint

IM Sprint 시리즈는, 코드 스테이츠의 웹 개발 심화 코스인 Immersive 코스에서 수강생들과 함께 이야기 나눌 주제에 대해 빠르게 학습하고 정리한 글이다.

---

ES6 - Class

[ Classes | MDN ]
[ 클래스 | JavaScript로 만나는 세상 ]

JavaScript class는 ECMAScript 2015을 통해 소개되었으며, 기존 prototype 기반의 상속보다 명료하게 사용할 수 있다. Class 문법은 새로운 객체지향 상속 모델을 제공하는 것은 아니다. JavaScript class는 객체를 생성하고 상속을 다루는 데 있어 훨씬 더 단순하고 명확한 문법을 제공한다.

Pseudoclassical로 Cat이라는 생성자 함수를 만들었다.

// Pseudoclassical
const Cat = function(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype.introduce = function () {
  return `나는 고양이 ${this.name}. ${this.color}색이다.`
}

이를 class 표현식으로 바꾸면 다음과 같다.

// Class
class Cat {
  // 기존 생성자 함수는 constructor라는 이름으로 class 블럭 안에 들어간다
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }

  // prototype에 생성하여 대입했던 메서드들은 이 자리에 입력한다
  introduce() {
    return `나는 고양이 ${this.name}. ${this.color}색이다.`    
  }
}

class 문법 역시 인스턴스를 만들 때는 new 생성자를 사용한다.

const black = new Cat('후추', '검정');
black.introduce();
// 나는 고양이 후추. 검정색이다.

extends

extends 키워드를 사용해서, 한 클래스의 기능을 다른 클래스에서 사용할 수 있다. 기능을 상속하는 클래스를 부모 클래스, 상속을 받는 클래스를 자식 클래스라고 부른다.

상속이 이루어지는지 확인하기 위해, extends 키워드로 Animal 클래스를 상속받는 Cat 클래스를 만들었다.

class Animal {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
}

class Cat extends Animal {
}

Cat 클래스에는 constructor를 적지 않았지만, Animal의 constructor와 같은 생성자 함수를 사용해서 cat 인스턴스를 만들 수 있다. 그리고 만들어진 인스턴스 cat을 들여다보면, __proto__가 Animal 클래스임을 확인할 수 있다. 즉 인스턴스 cat은 Animal클래스의 prototype에 접근할 수 있는 상태로, 상속이 이루어졌다.

const cat = new Cat('시루', '하얀색');

console.dir(cat);
// Cat
//   color: "하얀색"
//   name: "시루"
//  ▶ __proto__: Animal
//    ▶ constructor: class Cat

super

부모 클래스로부터 기능들을 상속받아 생성한 자식 클래스에, 부모 클래스와 동일한 이름으로 메서드나 속성을 만들 수도 있다(이를 메서드 오버라이딩 Method Overriding이라고 부른다). 이때 자식 클래스에서 자신의 메서드가 아닌 부모 클래스의 메서드에 접근하려면 super 키워드를 이용한다.

super 키워드를 사용하지 않고 메서드를 부른다면, 자바스크립트 엔진은 메서드를 호출한 객체 안에서 메서드 이름을 바로 찾을 수 있기 때문에 자식 클래스의 메서드가 실행된다.

class Cat {
  sayHi() {
    return '야옹';
  }
}

class Dog extends Cat {
  sayHi() {
    return '멍멍';
  }
}

const dog = new Dog();
dog.sayHi();
// "멍멍"

이때 super 키워드를 사용하면 메서드명이 중복되었더라도 부모 메서드에 접근할 수 있다.

class Cat {
  sayHi() {
    return '야옹';
  }
}

class Dog extends Cat {
  sayHi() {
    return `${super.sayHi()}? 멍멍!`;
  }
}

const dog = new Dog();
dog.sayHi();
// "야옹? 멍멍!"