TIL 72 (클래스)

지난 주에 한 회사의 인턴에 지원하기 위해 자판기 로직을 자바스크립트 코드나 수도코드로 구현하는 과제를 수행했습니다.

 

저는 코드스테이츠를 수료하면서 처음부터 함수형 프로그래밍을 집중적으로 학습하고 클래스 기반 객체지향 프로그래밍은 아주 간단하게 학습했습니다. 그래서 자연스럽게 함수형으로 과제를 진행했는데 코딩 테스트나 알고리즘처럼 특정한 인수를 넣고 값을 기대하는 것이 아니라 동전을 넣고 음료를 선택하거나 반환을 받거나 등 절차를 밟을 수 있는 코드를 구현하고 싶었습니다. 아직 배움이 부족해서인지 함수형으로 구현하는 것이 쉽지 않아서 class를 이용해서 로직을 구현했습니다.

 

다행스럽게도 학습했던 경험으로 나름 괜찮게 구현했었습니다. 그래서 이 기회를 통해 클래스를 정리하는 시간을 가져봤습니다.

 

먼저, 객체지향 프로그래밍은 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말합니다.

 

자바스크립트는 프로토타입 기반의 객체 지향 언어입니다. 다른 클래스 기반 객체지향 프로그래밍 언어와 차이가 있었는데 ES6에서 클래스를 도입하면서 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제공했습니다.

 

하지만 자바스크립트의 클래스는 함수입니다. 그래서 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 제공된 것이여서 문법적 설탕이라고 볼 수 있습니다. 문법적 설탕이라고 해서 클래스가 객체를 생성하는 생성자 함수와 동일하게 작동하는 것은 아닙니다. 

 

먼저 클래스의 정의입니다. 클래스는 class 키워드를 사용해서 정의합니다. 그리고 파스칼 케이스로 사용하는 것이 일반적입니다.

class Human {}

클래스 몸체에는 constructor(생성자), 프로토타입 메서드, 정적 메서드 3가지의 메서드를 정의할 수 있습니다.

class Human {
  constructor(name) { // 생성자함수
    this.name = name;
  }
  
  introduceMyself() { // 프로토타입 메서드
    console.log(`안녕하세요 저는${this.name}입니다.`);
  }
  
  static sayHello() { // 정적 메서드
    console.log('Hello');
  }
}

const sangkwon = new Human('sangkwon')

constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드입니다.

 

constructor는 클래스에 한 개만 존재할 수 있으며, 생략할 수 있습니다. 클래스 외부에서 인스턴스 프로퍼티 값을 전달하려면 constructor에 매개변수를 선언할 수 있습니다. (여기서 인스턴스는 class를 이용해서 만들어지는 객체입니다. 다시 인스턴스에 대해서 설명하도록 하겠습니다.)

 

위의 코드에서는 new Human('sangkwon')의 sangkwon이 class의 name이 되는 것입니다. 외부에서 값을 전달할 필요가 없다면 constructor의 매개변수를 넣지 않아도 됩니다.

 

프로토타입 메서드는 인스턴스가 상속 받아서 호출할 수 있는 메서드입니다. 반면 static이 들어간 정적 메서드는 인스턴스가 호출할 수 없는 메서드로 클래스로만 호출할 수 있습니다. 그래서 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있습니다.

 

이러한 class에 new 연산자를 통해서 인스턴스를 생성할 수 있습니다. 위의 코드 마지막 줄에서 sangkwon이라는 인스턴스를 생성하고 있습니다.

 

인스턴스 생성 시에는 반드시 new 연산자와 함께 호출해야 합니다. 이렇게 만들어진 인스턴스는 class의 프로토타입 메서드를 호출 할 수 있습니다.

const sangkwon = new Human('sangkwon');

sangkwon.introduceMyself(); // '안녕하세요 저는sangkwon입니다.'

 

먼저 정의된 class를 이용해서 새로운 class를 만들 수 있습니다. 여기서 먼저 정의된 class가 부모 클래스 혹은 수퍼 클래스가 되며, 새로운 class는 자식 클래스 혹은 서브 클래스로, 부모로 부터 자식이 상속 받을 수 있습니다.

 

이렇게 부모 클래스를 이용해서 자식 클래스를 만들기 위해서는 extends 키워드를 사용합니다.

class Car {
};

class Avante extends Car {
};

Car 클래스를 상속 받아서 Avante 클래스를 만들었습니다.

 

그리고 super 키워드를 통해서 부모 클래스의 constructor를 호출할 수 있습니다.

class Car {
  constructor(brand, size) {
    this.brand = brand;
    this.size = size;
  }
};

class Avante extends Car {
  constructor(brand, size, color) {
    super(brand, size);
    this.color = color
  }
};

const myCar = new Avante('hyundai', 'middle', 'white');
console.log(myCar.brand); // 'hyundai'
console.log(myCar.size); // 'middle'
console.log(myCar.color); // 'white'

이처럼 extends와 super 키워드를 통해서 부모 클래스를 상속 받아서 호출하고 사용할 수 있습니다.

 

오늘은 비교적 간단하게 class에 대해서 알아봤습니다. class의 호이스팅이나 생성되는 과정 등 깊이 있게 학습하는 것은 조만간에 진행해보도록 하겠습니다.