[javascript] 자바스크립트 클래스와 객체 지향 패턴

15 Dec 2023

javascript

자바스크립트(JS)는 프로토타입 기반의 객체 지향 언어이지만 ES6 이후 클래스 기반의 문법을 도입하여 객체 지향 프로그래밍(OOP)을 지원하게 되었습니다. 이번 글에서는 JS에서의 클래스와 객체 지향 패턴에 대해 살펴보겠습니다.

클래스 정의와 인스턴스 생성

ES6부터는 class 키워드를 사용하여 클래스를 정의할 수 있습니다. 아래는 클래스의 간단한 예시입니다.

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

  calculateArea() {
    return this.width * this.height;
  }
}

const rect = new Rectangle(10, 20);
console.log(rect.calculateArea()); // 200

위의 코드에서 class 키워드를 사용하여 Rectangle 클래스를 정의하고, constructor 메서드를 사용하여 인스턴스 초기화를 수행하고 있습니다.

상속과 메서드 오버라이딩

자바스크립트에서는 extends 키워드를 사용하여 클래스 간에 상속을 정의할 수 있습니다.

class Square extends Rectangle {
  constructor(side) {
    super(side, side);
  }
}

const square = new Square(10);
console.log(square.calculateArea()); // 100

위의 코드에서 Rectangle 클래스를 상속하는 Square 클래스를 정의하고, calculateArea 메서드를 오버라이딩하여 정사각형의 넓이를 계산하고 있습니다.

객체 리터럴과 팩토리 패턴

때로는 클래스보다는 객체 리터럴 또는 팩토리 패턴을 사용하는 것이 더 적합한 경우가 있습니다.

const circle = {
  radius: 5,
  calculateArea: function() {
    return Math.PI * this.radius ** 2;
  }
};

console.log(circle.calculateArea()); // 78.54

위의 코드는 객체 리터럴을 사용하여 circle 객체를 정의하였습니다. 이를 통해 간단하게 객체를 생성하고 속성 및 메서드를 정의할 수 있습니다.

결론

자바스크립트는 ES6부터 클래스 기반의 객체 지향 프로그래밍을 위한 문법을 도입하였지만, 여전히 프로토타입 기반의 특징을 가지고 있습니다. 클래스, 상속, 메서드 오버라이딩과 같은 객체 지향 패턴을 적절히 활용하여 코드를 구조화하고 가독성을 높일 수 있습니다.

자바스크립트에서의 클래스와 객체 지향 패턴은 프로그램을 구조화하고 유지보수하기 쉽도록 도와주는 중요한 개념이며, 다양한 상황에 적합한 패턴을 선택하는 것이 중요합니다.

참고 자료

MDN web docs - MDN 웹 문서를 통해 ES6 이후의 자바스크립트 문법과 객체 지향 프로그래밍에 대해 더 자세히 알아보세요.
JavaScript Design Patterns - Addy Osmani의 “JavaScript Design Patterns” 책에서 객체 지향 디자인 패턴에 대해 더 알아보세요.