[JAVASCRIPT] Class

클래스는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다.

Class 정의

클래스는 클래스명 앞에 class라는 키워드를 사용해서 정의할 수 있다. 그리고 반드시 constructor 함수를 가진다. constructor 함수는 class로 생성된 객체를 생성하고 초기화하기 위한 특수 함수이다.

class 클래스명{
  constructor(매개변수){//class로 생성된 객체를 생성하고 초기화하기 위한 특수 함수
    //초기화 코드
  }
}

다음 예제는 Car라는 클래스를 선언했다. 자동차를 정의하기 위한 기본 틀을 만드는 데 모델명, 모델 년도, 자동차 타입, 가격이라는 기본값을 가지도록 변수를 선언했다.

class Car{
  constructor(modelName, modelYear, type, price){
    this.modelName=modelName;
    this.modelYear=modelYear;
    this.type=type;
    this.price=price;
  }
}

constructor 함수는 class로 생성한 객체를 생성하고 초기화하기 위한 특수한 함수이다. constructor라는 이름을 가지는 함수는 클래스 안에 한 개만 존재할 수 있다.
클래스에서 constructor 함수는 클래스를 만들기 위해 실행되는 기본 함수이다.

constructor 함수에서는 클래스를 생성할 때 필요한 기본 값을 파라미터로 전달받고, 클래스 객체에 변수로 등록하는 코드를 구현한다. 이때 this 키워드를 사용해서 변수를 선언한다.

Class 사용

정의된 클래스는 new 키워드를 사용해서 클래스를 생성할 수 있다.

let ionic=new Car("아이오닉","2022","e", 4000);	//ionic 차량 생성
let genesis=new Car("제네시스", "2022", "g", 8000);	//genesis 차량 생성

Class 내부 함수 정의

클래스에 정의한 각 변수인 modelName, modelYear, type, price를 set, get할 수 있는 내부 함수를 추가할 수 있다.

class Car{
  constructor(modelName, modelYear, type, price){
    this.modelName=modelName;
    this.modelYear=modelYear;
    this.type=type;
    this.price=price;
  }
  
  getModelName(){
    return this.modelName;
  }
  getModelYear(){
    return this.modelYear;
  }
  getType(){
    return this.type;
  }
  getPrice(){
    return this.price;
  }
  setModelName(modelName){
    this.modelName=modelName;
  }
  setModelYear(modelYear){
    this.modelYear=modelYear;
  }
  setType(type){
    this.type=type;
  }
  setPrice(price){
    this.price=price;
  }
}

이렇게 내부 함수가 정의되면, 클래스를 생성해서 사용하는 곳에서 클래스에 정의된 변수 값에 대한 조회, 변경이 가능하다.

let ionic=new Car("아이오닉", "2022", "e", 4000);//아이오닉 차량 생성
let modelName=ionic.getModelName();	//차량 모델명 가져오기
ionic.setPrice(4300);	//차량 가격 변경

Class 상속

부모와 자식의 관계처럼 정의된 클래스를 상속받아서 새로운 클래스를 정의할 수 있다. 이때 상속받은 부모에 해당하는 클래스에 정의된 변수, 함수 등 모든 특성을 그대로 상속받아서 사용할 수 있게 되고, 자식에 해당하는 클래스에는 추가적인 부분만 정의하면 된다.

클래스의 상속 기능을 사용하면 부모 클래스를 상속받아 기본 틀은 동일하지만 조금씩 다른 특성을 갖는 다양한 클래스를 손쉽게 정의해서 사용할 수 있게 된다.

다음은 기본 자동차 클래스에 충전 시간만 추가한 새로운 자동차 타입인 전기 자동차를 정의했다. 이때 extends를 사용해서 Car 클래스의 특성을 모두 상속받을 수 있게 된다.

class ElectricCar extends Car{
  constructor(modelName, modelYear, price, chargeTime){
    super(modelName, modelYear, "e", price);
    this.chargeTime=chargeTime;
  }
  
  setChargeTime(time){
    this.chargeTime=time;
  }
  getChargeTime(){
    return this.chargeTime;
  }
}

클래스는 이처럼 템플릿을 생성하고 템플릿에 구조에 맞게 개발할 수 있게 해준다. 또한 상속을 이용하면 기본 구조는 똑같고, 특성이 조금 다른 클래스를 빠르게 생성해서 사용할 수 있다는 장점이 있다.