javascript

JavaScript 자바스크립트 클래스 (Class) 개념 정리 및 사용법

by

자바스크립트 클래스란?

자바스크립트에서 클래스란 객체를 생성하는 템플릿입니다. 클래스를 사용하면 비슷한 객체를 쉽게 여러 개 만들 수 있으며, 코드의 재사용성과 유지보수가 용이해집니다. ES6 이전에는 프로토타입 기반 상속을 사용했지만, ES6부터는 클래스 기반의 문법이 도입되어 객체 지향 프로그래밍이 더욱 명확하고 직관적으로 이루어지게 되었습니다.

클래스의 특징

자바스크립트에서 클래스는 객체 지향 프로그래밍을 구현하는 데 사용되는 구조입니다. 클래스는 데이터와 이 데이터를 조작하는 메서드를 캡슐화합니다. 자바스크립트의 클래스는 다음과 같은 특징들을 가지고 있습니다.

  1. 생성자와 인스턴스화: 클래스는 constructor 메서드를 포함할 수 있으며, 이 메서드는 객체의 인스턴스를 생성하고 초기화하는 데 사용됩니다. new 키워드를 사용하여 클래스의 인스턴스를 생성할 수 있습니다.
  2. 상속: 자바스크립트 클래스는 상속을 지원합니다. extends 키워드를 사용하여 한 클래스가 다른 클래스로부터 속성과 메서드를 상속받을 수 있습니다. 이를 통해 코드의 재사용성과 유지보수성이 향상됩니다.
  3. 메서드: 클래스 내부에는 데이터를 조작하는 함수인 메서드가 포함될 수 있습니다. 이 메서드들은 클래스의 인스턴스에 대해 호출될 수 있습니다.
  4. 정적 메서드와 속성: static 키워드를 사용하여 클래스 자체에 속하는 정적 메서드와 속성을 정의할 수 있습니다. 이러한 정적 멤버들은 인스턴스화 없이 클래스 이름을 통해 직접 접근할 수 있습니다.
  5. 캡슐화와 접근 제어자: 자바스크립트는 기본적으로 캡슐화를 제공하지만, ES6 이후부터는 private 키워드를 통해 필드의 접근을 제한할 수 있게 되었습니다. 이를 통해 객체의 상세 구현을 숨기고 외부에서의 접근을 제어할 수 있습니다.
  6. 프로토타입 기반 상속: 자바스크립트의 클래스는 내부적으로 프로토타입 기반 상속을 사용합니다. 이는 모든 자바스크립트 객체가 다른 객체의 프로토타입을 상속받을 수 있다는 것을 의미합니다.
  7. 메서드 체이닝: 클래스의 메서드는 this 키워드를 반환함으로써 메서드 체이닝을 지원할 수 있습니다. 이는 여러 메서드 호출을 연쇄적으로 연결할 수 있게 해줍니다.
  8. 생성자의 오버로딩: 자바스크립트는 전통적인 의미의 생성자 오버로딩을 지원하지 않습니다. 그러나 기본 매개변수 값이나 조건문을 사용하여 유사한 기능을 구현할 수 있습니다.

클래스 사용법

클래스 선언 (Class Declarations)

자바스크립트에서 클래스는 class 키워드를 사용하여 선언합니다. 클래스 이름은 대문자로 시작하는 것이 일반적인 관례입니다. 클래스 선언은 호이스팅(hoisting)되지 않으므로, 선언 전에 클래스를 사용할 수 없습니다.

JavaScript
class MyClass {
  // 클래스 정의
}
JavaScript

생성자 (Constructor)

클래스 내부에는 constructor 메서드를 정의할 수 있습니다. 이 메서드는 클래스로부터 객체가 생성될 때 자동으로 호출되며, 객체의 초기 속성을 설정하는데 사용됩니다.

JavaScript
class MyClass {
  constructor(value) {
    this.property = value;
  }
}
JavaScript

메서드 (Methods)

클래스 안에서 메서드를 정의할 수 있습니다. 이 메서드들은 클래스의 인스턴스에 대한 작업을 수행하거나, 클래스 또는 인스턴스의 속성 값을 조작할 때 사용됩니다.

JavaScript
class MyClass {
  constructor(value) {
    this.property = value;
  }

  myMethod() {
    return this.property;
  }
}
JavaScript

상속 (Inheritance)

자바스크립트 클래스는 상속을 지원합니다. extends 키워드를 사용하여 다른 클래스를 상속받을 수 있으며, 이를 통해 부모 클래스의 속성과 메서드를 활용할 수 있습니다.

JavaScript
class ParentClass {
  parentMethod() {
    return '부모 메서드';
  }
}

class ChildClass extends ParentClass {
  childMethod() {
    return '자식 메서드';
  }
}
JavaScript

정적 메서드 (Static Methods)

static 키워드를 사용하여 정적 메서드를 선언할 수 있습니다. 정적 메서드는 인스턴스가 아닌 클래스 자체에 바인딩됩니다. 인스턴스를 생성하지 않고도 호출할 수 있는 메서드입니다.

JavaScript
class MyClass {
  static staticMethod() {
    return '정적 메서드';
  }
}
JavaScript

캡슐화 (Encapsulation)

자바스크립트 클래스는 캡슐화를 통해 객체의 데이터를 숨기고, 외부에서 직접 접근하는 것을 제한할 수 있습니다. 이는 일반적으로 private 키워드 또는 클로저를 사용하여 구현됩니다.

JavaScript
class MyClass {
  #privateProperty;

  constructor(value) {
    this.#privateProperty = value;
  }

  getPrivateProperty() {
    return this.#privateProperty;
  }
}
JavaScript

메서드 체이닝 (Method Chaining)

클래스의 메서드에서 클래스 자신의 인스턴스(this)를 반환함으로써, 메서드 체이닝을 구현할 수 있습니다. 이를 통해 여러 메서드 호출을 연쇄적으로 연결할 수 있습니다.

JavaScript
class MyClass {
  setValue(value) {
    this.property = value;
    return this;
  }

  displayValue() {
    console.log(this.property);
    return this;
  }
}
JavaScript

다형성 (Polymorphism)

자바스크립트 클래스에서는 다형성도 구현할 수 있습니다. 상속받은 클래스에서 부모 클래스의 메서드를 재정의(오버라이딩)하여, 다양한 형태의 객체에서 같은 인터페이스를 갖지만 다른 작업을 수행할 수 있도록 합니다.

JavaScript
class ParentClass {
  display() {
    return '부모 클래스의 display 메서드';
  }
}

class ChildClass extends ParentClass {
  display() {
    return '자식 클래스에서 오버라이딩된 display 메서드';
  }
}
JavaScript

활용 예제

이 예제에서는 자동차를 나타내는 Car 클래스를 만들고, 다양한 기능을 구현해 볼 것입니다. Car 클래스는 기본적인 속성과 메서드를 가지며, 이를 확장하여 전기차를 나타내는 ElectricCar 클래스도 만들어보겠습니다.

기본 자동차 클래스 정의

JavaScript
class Car {
  constructor(brand, model, year) {
    this.brand = brand;  // 브랜드
    this.model = model;  // 모델
    this.year = year;    // 제조년도
  }

  displayInfo() {
    return `${this.year}년식 ${this.brand} ${this.model}`;
  }

  startEngine() {
    return `${this.model}의 엔진이 켜졌습니다.`;
  }
}
JavaScript

  • constructor 메서드에서는 자동차의 브랜드, 모델, 제조년도를 초기화합니다.
  • displayInfo 메서드는 자동차 정보를 문자열로 반환합니다.
  • startEngine 메서드는 엔진을 시작하는 행위를 나타냅니다.

전기차 클래스 정의 (상속 활용)

JavaScript
class ElectricCar extends Car {
  constructor(brand, model, year, batteryLife) {
    super(brand, model, year);  // 부모 클래스의 생성자 호출
    this.batteryLife = batteryLife;  // 배터리 수명
  }

  chargeBattery() {
    return `${this.model}의 배터리를 충전합니다. 충전 시간: ${this.batteryLife}시간`;
  }

  startEngine() {
    return `${this.model}의 전기 모터가 작동합니다.`;
  }
}
JavaScript

  • ElectricCar 클래스는 Car 클래스를 상속받습니다.
  • super 키워드를 사용해 부모 클래스의 생성자를 호출하고, 추가적인 속성인 batteryLife를 초기화합니다.
  • chargeBattery 메서드는 배터리 충전을 나타냅니다.
  • startEngine 메서드는 오버라이딩되어 전기차에 맞게 변경되었습니다.

클래스 사용 예제

JavaScript
let myCar = new Car('Hyundai', 'Sonata', 2020);
console.log(myCar.displayInfo());  // "2020년식 Hyundai Sonata"
console.log(myCar.startEngine());  // "Sonata의 엔진이 켜졌습니다."

let myElectricCar = new ElectricCar('Tesla', 'Model 3', 2021, 24);
console.log(myElectricCar.displayInfo());  // "2021년식 Tesla Model 3"
console.log(myElectricCar.chargeBattery()); // "Model 3의 배터리를 충전합니다. 충전 시간: 24시간"
console.log(myElectricCar.startEngine());   // "Model 3의 전기 모터가 작동합니다."
JavaScript

  • myCar 객체는 일반 자동차를 나타내며, Car 클래스의 인스턴스입니다.
  • myElectricCar 객체는 전기차를 나타내며, ElectricCar 클래스의 인스턴스입니다.
  • 두 객체 모두 displayInfo와 startEngine 메서드를 사용할 수 있지만, startEngine 메서드는 ElectricCar 클래스에서 오버라이딩되어 다른 결과를 출력합니다.

결론

자바스크립트의 클래스(Class)는 객체 지향 프로그래밍(OOP)의 중요한 개념을 구현하는 데 필수적인 요소입니다. 이러한 클래스는 데이터와 함수를 하나의 단위로 묶어 관리함으로써, 코드의 재사용성과 유지보수성을 향상시킵니다. 특히 ES6 이후 도입된 클래스 기반 문법은 자바스크립트 프로그래밍을 더욱 직관적이고 효율적으로 만들어 줍니다.

클래스의 주요 특징으로는 생성자와 인스턴스화, 상속, 메서드, 정적 메서드와 속성, 캡슐화와 접근 제어자, 프로토타입 기반 상속, 메서드 체이닝, 그리고 다형성 등이 있습니다. 이러한 특징들을 적절히 활용함으로써, 복잡한 로직을 간결하고 명확하게 표현할 수 있으며, 다양한 프로그래밍 문제에 효과적으로 대응할 수 있습니다.

Leave a Comment