[ECMA Script 2015] Class

이 내용은 아래 링크에서 동영상 강의도 같이 보실 수 있습니다.

[ 동영상 강의 보기 ]

Class

자바스크립트는 프로토타입 기반 언어로 클래스가 따로 필요 없지만 개발자에게 익숙하지 않은 문법으로 사용하기가 매우 힘들어 ECMA Script 2015에 Class가 추가되었습니다.

사용방법은 기존에 아래와 같이 함수와 프로토타입으로 사용하던 코드를

function Person(name, age, gender) {
    this.name   = name;
    this.age    = age;
    this.gender = gender;
}

Person.prototype.incrementAge = function () {
    return this.age += 1;
};

다른 언어와 비슷하게 아래와 같이 바꿔주면 됩니다.

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

    incrementAge() {
      this.age += 1;
    }
}

constructor

클래스가 new 키워드로 생성될 때 자동으로 실행되는 함수입니다.

자바스크립트는 클래스 프로퍼티를 정의할 수 없어 이 생성자에서 프로퍼티를 초기화 합니다.

class Person {
    name = ''; // Syntax error
    
    constructor(name, age, gender) {
        // 클래스 프로퍼티 초기화
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    }

    incrementAge() {
        this.age += 1;
    }
}

getter

get키워드를 사용해서 메소드를 프로퍼티처럼 접근하여 사용할 수 있습니다.

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

    incrementAge() {
        this.age += 1;
    }

    get koreanAge() { // preson.koreanAge 처럼 프로퍼티로 접근
        return this.age + 1;
    }
}

const person = new Person('name', 30, 'gender');
console.log(person.koreanAge); // 31 출력

setter

set키워드를 사용해서 프로퍼티 수정시 메소드 호출하도록 할 수 있습니다.

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

    incrementAge() {
        this.age += 1;
    }

    get koreanAge() {
        return this.age + 1;
    }

    set koreanAge(age) {
        this.age = age - 1;
    }
}

const person = new Person('name', 30, 'gender');
person.koreanAge = 20; // koreanAge를 호출하고 파라메터에 20을 넣음
console.log(person.koreanAge); // 20출력
console.log(person.age); // 19 출력

정적 메소드

static 키워드를 통해 객체 생성 없이 사용하는 정적 메소드를 정의합니다.

정적 메소드는 보통 프로그램 전역에서 사용할 유틸성 기능으로 사용합니다.

[클래스명].[정적 메소드명] 으로 접근합니다.

정적 메소드는 객체가 생성되지 않았으니 this를 사용할 수 없고 일반 메소드와 상호 호출할 수 없습니다.

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

    static register(name, age, gender) {
        // 기타 작업        
        return new Person(name, age, gender);
    }
}

const person = Person.register('name', 30, 'gender');