자바스크립트(JavaScript) 클래스 상속 구조와 메서드 오버라이딩

자바스크립트(JavaScript) 클래스 상속 구조와 메서드 오버라이딩

자바스크립트(JavaScript)에서 객체 지향 프로그래밍(OOP)을 구현하는 데 있어 클래스와 상속은 중요한 개념입니다. 이 글에서는 자바스크립트 클래스(class)의 기본 개념을 이해하고, 상속 구조와 메서드 오버라이딩을 통해 클래스를 확장하는 방법을 알아보겠습니다.

 

 

목차

1. 클래스와 상속의 기본 개념
2. 자바스크립트에서 클래스 정의하기
3. 상속 구조 만들기
4. 메서드 오버라이딩
5. 실전 예제
6. 결론

 

1. 클래스와 상속의 기본 개념

클래스는 객체를 생성하기 위한 청사진입니다. 상속은 기존 클래스(부모 클래스)의 속성과 메서드를 새로운 클래스(자식 클래스)가 이어받아 사용할 수 있게 하는 기능입니다. 이를 통해 코드 재사용성을 높이고, 객체 지향 프로그래밍의 원칙을 따를 수 있습니다.

 

 

2. 자바스크립트에서 클래스 정의하기

ES6(ECMAScript 2015)부터 자바스크립트는 class 키워드를 사용하여 클래스를 정의할 수 있게 되었습니다. 기본적인 클래스 정의는 다음과 같습니다:

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

    greet() {
        console.log(`안녕하세요, ${this.name}입니다.`);
    }
}

이렇게 정의된 클래스를 통해 객체를 생성할 수 있습니다:

const person1 = new Person('홍길동', 30);
person1.greet();  // 출력: 안녕하세요, 홍길동입니다.

 

 

3. 상속 구조 만들기

자바스크립트에서는 extends 키워드를 사용하여 상속을 구현할 수 있습니다. 아래 예제는 Person 클래스를 상속받는 Student 클래스를 정의한 것입니다:

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

    study() {
        console.log(`${this.name}은/는 ${this.grade}학년입니다.`);
    }
}

이제 Student 클래스로 객체를 생성할 수 있습니다:

const student1 = new Student('김철수', 20, '2학년');
student1.greet();  // 출력: 안녕하세요, 김철수입니다.
student1.study();  // 출력: 김철수은/는 2학년입니다.

 

 

4. 메서드 오버라이딩

메서드 오버라이딩은 자식 클래스에서 부모 클래스의 메서드를 재정의하는 것입니다. 자식 클래스에서 부모 클래스의 메서드를 오버라이딩하려면 동일한 이름으로 메서드를 정의하면 됩니다. Student 클래스에서 greet 메서드를 오버라이딩해 보겠습니다:

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

    greet() {
        console.log(`안녕하세요, ${this.name}입니다. 저는 ${this.grade}학년입니다.`);
    }

    study() {
        console.log(`${this.name}은/는 ${this.grade}학년입니다.`);
    }
}

이제 greet 메서드를 호출하면 오버라이딩된 메서드가 실행됩니다:

const student1 = new Student('김철수', 20, '2학년');
student1.greet();  // 출력: 안녕하세요, 김철수입니다. 저는 2학년입니다.
student1.study();  // 출력: 김철수은/는 2학년입니다.

 

 

 

 

5. 실전 예제

실전 예제를 통해 클래스 상속과 메서드 오버라이딩의 활용 방법을 이해해 봅시다. 예를 들어, 다양한 종류의 동물 클래스를 만들어 보겠습니다:

class Animal {
    constructor(name) {
        this.name = name;
    }

    sound() {
        console.log(`${this.name}이/가 소리를 냅니다.`);
    }
}

class Dog extends Animal {
    sound() {
        console.log(`${this.name}이/가 멍멍 소리를 냅니다.`);
    }
}

class Cat extends Animal {
    sound() {
        console.log(`${this.name}이/가 야옹 소리를 냅니다.`);
    }
}

const dog = new Dog('바둑이');
dog.sound();  // 출력: 바둑이이/가 멍멍 소리를 냅니다.

const cat = new Cat('나비');
cat.sound();  // 출력: 나비이/가 야옹 소리를 냅니다.

 

 

6. 결론

이 글에서는 자바스크립트(JavaScript)의 클래스 상속과 메서드 오버라이딩에 대해 알아보았습니다. 상속을 통해 코드를 재사용하고, 오버라이딩을 통해 자식 클래스에서 부모 클래스의 메서드를 재정의하는 방법을 익혔습니다. 이를 통해 보다 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.