자바스크립트는 ES6(ECMAScript 2015)부터 클래스(class) 와 상속(inheritance) 을 지원하기 시작했습니다. 이로 인해 객체 지향 프로그래밍 (OOP) 관점에서의 코드 작성이 더욱 편리해졌습니다.

클래스 정의하기

자바스크립트 클래스는 객체를 생성하기 위해 사용되는 템플릿(template) 입니다. 다음은 클래스를 정의하는 기본적인 구조입니다:

class ClassName {
  constructor(parameter) {
    // 생성자
  }

  methodName() {
    // 메서드
  }
}

클래스 이름은 PascalCase(constructor)로 작성되어야 합니다. 생성자 함수는 constructor 키워드와 함께 정의되며, 객체가 생성될 때 자동으로 호출됩니다. 클래스 내의 다른 메서드들은 원하는 만큼 추가할 수 있습니다.

클래스 인스턴스 생성하기

클래스를 사용하여 객체를 생성하는 것은 인스턴스화(instantiation)라고 합니다. 다음은 클래스를 인스턴스화하는 예제입니다:

const objectName = new ClassName(parameter);

new 키워드를 사용하여 클래스 이름을 호출하고, 생성자에 필요한 매개변수를 전달합니다. 이렇게 하면 새로운 클래스 인스턴스가 생성됩니다.

클래스 메서드 사용하기

클래스 내부에 정의된 메서드는 해당 클래스의 인스턴스에서 호출할 수 있습니다. 다음은 클래스 메서드를 사용하는 예제입니다:

objectName.methodName();

클래스 상속하기

자바스크립트의 클래스는 상속 구조도 지원합니다. 기존 클래스의 특성을 상속 받아 새로운 클래스를 정의할 수 있습니다. 상속을 이용하면 코드의 중복을 줄이고 코드의 재사용성을 높일 수 있습니다.

class ChildClassName extends ParentClassName {
  constructor(parameter) {
    super(parameter); // 부모 클래스의 생성자 호출
    // 새로운 클래스의 생성자 로직
  }

  methodName() {
    super.methodName(); // 부모 클래스의 메서드 호출
    // 새로운 클래스의 메서드 로직
  }
}

extends 키워드를 사용하여 상속 원하는 부모 클래스를 지정합니다. super()를 사용하여 부모 클래스의 생성자를 호출할 수 있고, super.methodName()을 사용하여 부모 클래스의 메서드를 호출할 수 있습니다.

이를 통해 기존 클래스의 특성을 그대로 유지하면서 필요한 로직을 추가한 새로운 클래스를 만들 수 있습니다.

마무리

자바스크립트의 클래스 및 상속 개념을 이용하면 객체 지향 프로그래밍의 특성을 더 쉽게 활용할 수 있습니다. 클래스를 사용하여 객체를 생성하고, 상속을 통해 기존 클래스의 특성을 재사용하거나 확장하는 것은 코드의 유지 보수성과 가독성을 높이는데 도움이 됩니다. 앞으로 자바스크립트를 사용할 때는 클래스와 상속을 적극적으로 활용해보세요!