ES6 클래스

ES6(ECMAScript 6, ES2015)에 클래스를 사용하는 구문이 추가되었습니다. 기존에도 클래스를 사용할 수는 있었지만, 다음과 같이 function을 이용하거나 클래스 표현식을 이용해서 사용했었습니다.

기존 클래스 선언 방법

function Person(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
}

Person.prototype.id = function() {
    return id;
}

Person.prototype.name = function() {
    return "[name: " + this.name + 
        ", email: " + this.email + "]";
}

ES6 에서의 클래스 선언 방법

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

    id() {
        return id;
    }

    name() {
        return name;
    }

    info() {
        return "[name: " + this.name +
            ", email: " + this.email + "]";
    }
}

훨씬 더 Java의 문법과 비슷해졌습니다. 커다란 중괄호로 묶이기 때문에 기존 클래스 선언보다 가독성도 더 좋아졌습니다.

함수 선언문과 클래스 선언문의 차이

• 클래스 선언문은 자바스크립트 엔진이 미리 읽어들이지 않음. 따라서 생성자를 사용하기 전에 클래스 선언문이 먼저 호출되어야 함
• 클래스 선언문은 한 번만 작성되어져야 함

클래스 Property 접근자 작성하기

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

    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }
}

위에서 name() 메소드에 get, set 키워드를 사용했습니다. 따라서 다음과 같이 사용할 수 있습니다.

const p = new Person("snowdeer", "Seo", "snowdeer0314@gmail.com");
p.name = "Won";
console.log(p.info());

위에서 get 이나 set 키워드 함수 내부를 보면 this._name 변수를 사용하고 있는 것이 보입니다. 자바스크립트에서 게터나 세터와 같은 이름의 속성을 만들 수 없기 때문에 별도의 변수를 추가해서 이를 해결한 방법이며, 자바스크립트에서는 private 속성을 지원하지 않아서 prefix로 _을 추가해서 형식적으로 표현만 했습니다.

static 메소드 작성하기

export default class Person {
    constructor(name) {
        this._name = name;;

        Person.count++;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }

    static count() {
        return Person.count;
    }
}

Person.count = 0;

사용법은 다음과 같습니다.

function test() {
    const p1 = new Person("snowdeer", "Seo");
    console.log(Person.count);

    const p2 = new Person("ran", "Lee");
    const p3 = new Person("yang", "Yang");

    console.log(Person.count);
    console.log(p3.count);
}

실행 결과는 다음과 같습니다.

1
3
undefined

클래스 상속

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

    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }
}

class Student extends Person {
    hello() {
        console.log("Hello, My name is " + super.name + ". ");
    }
}