[JavaScript 최신 기능 시리즈] 5일차: JavaScript 클래스와 상속 이해하기

5. 클래스와 상속

클래스란 무엇인가?

ES6에서 도입된 클래스(Class)는 JavaScript에서 객체 지향 프로그래밍(OOP)을 구현하는 새로운 방법입니다. 클래스는 프로토타입 기반 상속을 더 명확하고 간결하게 작성할 수 있게 해줍니다.

클래스 선언

클래스를 선언하는 방법은 다음과 같습니다.

1. 기본 클래스 선언

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const alice = new Person('Alice', 30);
alice.greet();  // 출력: Hello, my name is Alice and I am 30 years old.

2. 클래스 표현식

클래스를 표현식으로 선언할 수도 있습니다.

const Person = class {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const bob = new Person('Bob', 25);
bob.greet();  // 출력: Hello, my name is Bob and I am 25 years old.

상속

클래스 상속은 extends 키워드를 사용하여 구현할 수 있습니다. 하위 클래스는 상위 클래스의 속성과 메서드를 상속받을 수 있습니다.

1. 상속 기본 예제

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);  // 상위 클래스의 생성자를 호출
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const charlie = new Student('Charlie', 20, 'Sophomore');
charlie.greet();  // 출력: Hello, my name is Charlie and I am 20 years old.
charlie.study();  // 출력: Charlie is studying in grade Sophomore.

2. 메서드 오버라이딩

하위 클래스에서 상위 클래스의 메서드를 재정의할 수 있습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  greet() {
    console.log(`Hi, I'm ${this.name}, a ${this.grade} year student, and I'm ${this.age} years old.`);
  }
}

const dave = new Student('Dave', 22, 'Junior');
dave.greet();  // 출력: Hi, I'm Dave, a Junior year student, and I'm 22 years old.

정적 메서드와 정적 속성

클래스에는 인스턴스화하지 않고 호출할 수 있는 정적 메서드와 정적 속성을 정의할 수 있습니다. 정적 메서드는 static 키워드를 사용하여 정의합니다.

1. 정적 메서드

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtil.add(2, 3));  // 출력: 5

2. 정적 속성

정적 속성은 클래스 자체에 속합니다.

class Circle {
  static PI = 3.14;

  constructor(radius) {
    this.radius = radius;
  }

  getArea() {
    return Circle.PI * this.radius * this.radius;
  }
}

const circle = new Circle(5);
console.log(circle.getArea());  // 출력: 78.5
console.log(Circle.PI);         // 출력: 3.14

클래스 필드

ES6 이후, 클래스 필드 문법을 사용하여 클래스 내부에 속성을 정의할 수 있습니다.

1. 인스턴스 필드

class Person {
  name = 'Unknown';

  constructor(age) {
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const eva = new Person(28);
eva.greet();  // 출력: Hello, my name is Unknown and I am 28 years old.

2. 정적 필드

class Circle {
  static PI = 3.14;
}

console.log(Circle.PI);  // 출력: 3.14

결론

ES6에서 도입된 클래스와 상속 문법은 JavaScript에서 객체 지향 프로그래밍을 구현하는 새로운 방법을 제공합니다. 이를 통해 코드의 구조를 명확하게 하고, 상속과 정적 메서드, 정적 속성 등을 활용하여 더 강력하고 유연한 프로그램을 작성할 수 있습니다.

다음 글에서는 모듈 시스템에 대해 알아보겠습니다. 다음 글에서 만나요!