자바스크립트 클래스 Class의 모든 것

OOP(Object Oriented Programming) 객체 지향 프로그래밍을 배울 때 꼭 따라오는 것이 클래스(Class)입니다. Class는 Object 객체의 청사진과 같은 역할을 하기 위해 사용합니다. 청사진, 미래에 대한 희망적인 계획이나 구상을 의미하는데, 코드를 짤 때 Object가 어떤 프로퍼티(property)와 메서드(method)를 가질지 미리 구상한다는 의미입니다.

Javascript class

자바스크립트 클래스

클래스 생성

자바스크립트에서 클래스를 생성하려면 class 키워드를 사용하면 됩니다. 이때 클래스 선언문은 사용하기 전에 정의되어 있어야 합니다. 먼저 사용했으면 referenceError가 발생할 수 있어요. constructor 메서드는 클래스에서 단 한 번만 사용해야 하며, 다수의 constructor 메서드를 사용했다면 에러가 발생할 수 있습니다. constructor안에 super() 키워드를 사용하여 부모 클래스의 constructor를 사용할 수 있습니다. 

아래 코드는 Artwork라는 클래스를 정의하고, 가로 세로의 길이를 10으로 설정한 Artwork를 art 인스턴스에 담는 예제입니다.

class Artwork{
  constructor(height, width){
    this.height = height;
    this.width = width;
  }
}

const art = new Artwork(10,10);

---

Object vs Class 차이

Object	Class
코드에서 사용하는 것	객체를 대신할 수 없지만, 객체를 위한 청사진을 정의한 것
클래스를 실체화 한 것(Instances of classes)	Instances 인스턴스의 기본이 되는 뼈대
: , 사용	= ; 사용

Class를 사용하면 같은 구조를 가지는 Object 객체를 많이 만들 수 있다는 장점을 가집니다. 

아래 예제는 artworkList 내부를 artworks Object 객체로 구성한 예제입니다. Object에서 프로퍼티를 구성할 때 :을 사용하는 것을 확인할 수 있고, 구분은 쉼표(,)로 되는 것을 볼 수 있습니다. 

const artworkList = {
  artworks: [
    {
      title:'Start',
      width: 10,
      height: 10,
      price:100
    },
    {
      title: 'Dark',
      width:30,
      height:50,
      price:500
    }
  ]
};

Object를 사용해서 만든 코드를 아래처럼 클래스를 사용한 코드로 바꿀 수 있습니다. 

title, width, height, price는 클래스 필드(field)인데, let, const와 같은 키워드를 사용하지 않아도 됩니다. 아래 예제에서 프로퍼티는 =와 ;를 사용하여 구성됐습니다. 이 부분은 Object와 Class 차이점 중 하나입니다. 

class Artwork {
  title = 'DEFAULT';
  width;
  height;
  price;

  constructor(title, width, height, price) {
    this.title = title;
    this.width = width;
    this.height = height;
    this.price = price;
  }
}

const artworkList = {
  artworks: [
    new Artwork('Start', 10, 10, 100),
    new Artwork('Dark', 30, 50, 500),
  ],
};

---

Class 메서드 사용

클래스 안에 함수를 만들 수 있는데, 그 이름이 바로 메서드(method)입니다. 아래 코드는 자동차 클래스 안에 start 메서드를 생성하는 코드입니다. function 키워드는 따로 사용하지 않고, 함수 이름 () {  함수 내용 } 형식으로 작성하면 메서드를 만들 수 있습니다. 

class Car{
  constructor(name){
    this.name = name;
  }

  start(){
    console.log(`${this.name}: start an engine`);
  }
}

const car = new Car('my car');
car.start(); //my car: start an engine

---

자바스크립트 상속

extends 키워드를 이용하여 상속받을 수 있습니다. 부모 클래스에 constructor가 있는 경우라면 this를 사용하기 전에 super()를 사용해주어야 합니다. 

class Car{
  constructor(name){
    this.name = name;
  }

  start(){
    console.log(`${this.name}: start an engine`);
  }
}

class Sedan extends Car{
  constructor(name){
    super(name);
  }

  start(){
    console.log(`${this.name}: start an engin(sedan)`);
  }
}

const avante = new Sedan('Avante');
avante.start(); //Avante: start an engin(sedan)