[JavaScript] 클래스

클래스

ES6(2015)부터 자바스크립트에는 클래스(Class)가 추가되었습니다. 클래스는 객체 지향 프로그래밍에서 객체를 만들기 위한 일종의 설계도(template)입니다. 클래스를 이용하면 생성자 함수와 프로토타입을 이용하는 기존의 객체 생성 방식보다 간결하게 객체를 생성할 수 있습니다.

class User {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

let me = new User("Heesung");
me.sayName();	// "Heesung"

그렇다면 이 코드를 클래스를 사용하지 않고 만들어 본다면 어떨까요?

class User {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

let me = new User("Heesung");

function UserOld(name) {
    this.name = name;
}

UserOld.prototype.sayName = function() {
    console.log(this.name);
}

let meOld = new UserOld("Heesung");
meOld.sayName();	// "Heesung"

클래스는 정확히 생성자를 이용한 타입 생성과 그 결과가 일치합니다.

자바스크립트만의 사용자 정의 타입 생성 방법을 다른 언어의 클래스 문법처럼 바꿔준 것이 바로 자바스크립트 클래스입니다.

이처럼 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 슈가 신텍스(Syntactic sugar)라고 부릅니다. 그렇다면 타입 상속처럼 클래스도 상속이 가능하겠죠?

class Sausage {
    constructor(el1, el2) {
        this.inside1 = el1;
        this.inside2 = el2;
    }
    
    taste() {
        return this.inside1 + "와 " + this.inside2 + " 맛이 난다!";
    }
}

let classicSausage = new Sausage("닭고기", "양파");
console.log(classicSausage.taste());	// "닭고기와 양파 맛이 난다!"

class FlavoredSausage extends Sausage {
    
}

let classicFlavoredSausage = new FlavoredSausage("소고기", "파");
console.log(classicFlavoredSausage.taste());	// "소고기와 파 맛이 난다!"
console.log(classicFlavoredSausage.inside1);	// "소고기"
console.log(classicFlavoredSausage.inside1);	// "파"

이처럼 extends 연산자를 이용해 상위 타입의 프로퍼티를 상속 받는 것이 가능합니다.

class Sausage {
    constructor(el1, el2) {
        this.inside1 = el1;
        this.inside2 = el2;
    }
    
    taste() {
        return this.inside1 + "와 " + this.inside2 + " 맛이 난다!";
    }
}

let classicSausage = new Sausage("닭고기", "양파");

class FlavoredSausage extends Sausage {
    constructor(el1, el2, el3) {
        // super(el1, el2);
        this.inside3 = el3;
    }
    
    flavor() {
        return this.inside3 + "의 풍미도 있다!";
    }
}

let classicFlavoredSausage = new FlavoredSausage("소고기", "파", "불맛");

// super(el1, el2) 주석 제거할 것
console.log(classicFlavoredSausage.flavor());
console.log(classicFlavoredSausage.taste());

자식 클래스에 constructor 함수를 선언하면 부모클래스의 constructor 함수를 덮어 씁니다. 이를 해결하기 위해 super 메소드가 필요합니다! super 메소드는 슈퍼타입의 생성자를 호출합니다.