[JS] 클래스(class) 문법 정리(feat. 오버로딩, 오버라이딩)

리액트를 중점적으로 공부하다 보니 자바스크립트의 클래스에 대한 개념과 사용방법 등이 잘 기억이 나지 않아 다시 한번 복습하고 정리하는 글이다.

1. class

객체 지향 언어(OOP)에서 절대 빠질 수 없는 개념이다.
자바스크립트는 class에 대한 개념이 원래 없었다. 따라서 프로토타입으로 객체를 정의하곤 했다.

프로토타입 기반의 객체 지향 언어

하지만 class 개념이 나오면서 기존의 Java, C++ 등의 언어와 같이 객체지향을 사용할 수 있게 되었다.

2. 추상화

지드래곤을 객체화하여 나타낸다고 생각하자.

지드래곤이라는 사람은 연예인이고, 사람이다. 포함관계로 나타내면

사람 ⊃ 연예인 ⊃ 지드래곤 이다.

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

    toString() {
        console.log(this.name, this.age, this.gender);
    }
}

class entertainer extends person {
    job;
    entertainment;
    constructor(name, age, gender, job, entertainment) {
        super(name, age, gender);
        this.job = job;
        this.entertainment = entertainment;
    }

    toString() {
        console.log(`my job is ${this.job}`);
    }
}

class GD extends entertainer {
    constructor(name, age, gender, job, entertainment) {
        super(name, age, gender, job, entertainment);
    }
    toString() {
        console.log('my name is', this.name);
        console.log('And my company is ', this.entertainment);
    }
}


new GD('GD', '35', 'male', 'singer', 'YG').toString();

위의 코드와 같이 사람(person), 연예인(entertainer), 지드래곤(GD)를 추상화하여 각각 클래스로 정의하였다. 상속 관계 또한 살펴보면
사람 ⊃ 연예인 ⊃ 지드래곤 인 것을 알 수 있다.

마지막 코드 new GD('GD', '35', 'male', 'singer', 'YG').toString();의 결과는

인데, 메소드 오버라이딩을 통해 나온 결과이다.

3. 오버로딩, 오버라이딩

1. 오버로딩

오버로딩이란 같은 이름의 메서드를 여러 개를 가지면서 전달되는 매개변수의 타입과 개수를 다르게하여 메서드를 사용하는 기술을 말한다.

class tempClass {
    speak() {
        console.log('매개변수 없어요');
    }
    speak(a, b) {
        console.log('매개변수 2개나 있어요', a, b);
    }
    speak(a, b, c) {
        console.log('매개변수 3개나 있어요', a, b, c);
    }
}

2. 오버라이딩

상속관계에서 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 기술

간단하게 entertainer 클래스와 GD 클래스를 살펴보자.

class entertainer extends person {
    job;
    entertainment;
    constructor(name, age, gender, job, entertainment) {
        super(name, age, gender);
        this.job = job;
        this.entertainment = entertainment;
    }

    toString() {
        console.log(`my job is ${this.job}`);
    }
}

class GD extends entertainer {
    constructor(name, age, gender, job, entertainment) {
        super(name, age, gender, job, entertainment);
    }
    toString() {
        console.log('my name is', this.name);
        console.log('And my company is ', this.entertainment);
    }
}

entertainer 클래스가 GD클래스의 상위 클래스이다. GD클래스는 entertainer 클래스를 상속 받고 있는 상태이다.

두 클래스 다 toString()이라는 메서드를 가지고 있는데, 만약 GD클래스에 toString()이라는 메서드를 정의하지 않았다면
new GD('GD', '35', 'male', 'singer', 'YG').toString(); 코드를 실행 시켰을 때, entertainer클래스의 toString()이 실행되어 콘솔에는 my job is singer가 출력될 것이다.

하지만 GD클래스에서 오버라이딩, 즉 상위 클래스의 메서드를 덮어 씌우는, 재정의하였기 때문에 GD클래스의 toString()메소드가 실행된다.