[Javascript] class 명령을 이용한 클래스 정의

지난번에는 구버전의 클래스 정의를 다뤘다면 이제 ES2015에서 새로 추가된 class 명령을 통한 클래스 정의를 알아보겠습니다. 다른 클래스기반 객체지향 언어(C++, 자바 등)을 했었다면 익숙할 내용일 것 입니다.

 

클래스가 무엇인지는이전 포스트에서 설명했으니 이번 포스트에선 class 명령을 통한 선언부터 바로 시작하려고 합니다.

2021.03.18 - [Programming/Javascript] - [Javascript] 객체와 클래스

[Javascript] 객체와 클래스

---

우선 지난 포스트에서 프로토타입을 다음과 같은 형태로 정의했습니다.

let Car = function(kinds, color) {
    this.kinds = kinds;
    this.color = color;
    this.start = function () {
        return '부르릉';
    }
};

let car = new Car('sedan', 'yellow');

console.log(car.kinds);
console.log(car.color);
console.log(car.start());

 

이 프로토타입 선언을 class명령을 이용해서 정의해보겠습니다.

 

 

1. class 명령

클래스 명령은 기본적으로 다음과 같은 형태를 갖습니다.

class 클래스명 {
	생성자 정의;
    	프로퍼티 정의;
    	메소드 정의;
}

 

또한, 생성자 정의도 constructor 명령어를 통해 생성할 수 있습니다. 이때 생성자의 이름은 (만약 다른 언어를 했다면) 다른 언어들과는 다르게 constructor 라는 이름으로 고정입니다.

 

다음은 생성자 및 메소드들의 정의입니다.

constructor(인수, ...) {
	내용
}

메소드명 (인수, ...) {
	내용
}

 

위의 정의 방법에 따라 class 명령으로 클래스 선언을 다음과 같이 변환할 수 있습니다.

class Car {
    constructor(kinds, color) {
        this.kinds = kinds;
        this.color = color;
    }

    start() {
        return '부르릉';
    }
}

let car = new Car('sedan', 'yellow');

console.log(car.kinds);
console.log(car.color);
console.log(car.start());

 

다른 언어를 배우셨던 분들은 알고있던 클래스 정의와 유사해지고, 자바스크립트로 처음 입문하신 분들은 훨씬 더 직관적이고 간편한 형태의 클래스 정의가 되었음을 알 수 있습니다.

 

+ 다른 언어를 다루셨던 분들은 객체의 상속 포스트에서 다루겠지만 자바스크립트의 클래스에서는 public, protected, private와 같은 접근 지정자가 존재하지 않습니다.

+이전 방식의 프로토타입 생성은 먼저 호출하고 나중에 선언해도 됐지만, class 명령을 이용한 클래스는 반드시 클래스가 먼저오고 호출은 나중에 이루어져야 합니다.

 

 

 

 

2. get과 set

get과 set은 클래스에서 프로퍼티를 정의하는 방법입니다. 

 

class Car {
    constructor(kinds) {
        this._kinds = kinds;
    }

    get kinds(){
        return this._kinds;
    }

    set kinds(value){
        this._kinds = value;
    }
}

let car = new Car('aaa');
console.log(car.kinds);

 

이전에 프로퍼티에 접근할때 car.kinds와 같은 식으로 클래스의 프로퍼티에 직접 접근하여 값을 변경했습니다. 하지만 이처럼 클래스의 프로퍼티에 직접 접근하여 값을 변경하는 것은 좋지 못한 행동입니다. 그래서 get과 set을 이용해서 접근하면 이와 같은 상황을 피할 수 있습니다.

 

위의 예시에서 kinds의 값인 'aaa'는 '_kinds' 프로퍼티에 저장되어있습니다. 그리고 접근은 kinds로 하는데 여기서 주의점은 get과 set 구문은 kinds라는 가짜 프로퍼티를 만들고 그곳을 통해 실프로퍼티에 접근하고 조작합니다. 이렇게 함으로써 사용할땐 실프로퍼티에 접근하는 것 처럼 보이면서 프로퍼티에 직접 접근하는 것을 막아주죠.

 

말로 하니까 살짝 난해한거같아서 IDE화면을 캡쳐했습니다.

보라색 _kinds는 실제 Car 클래스의 프로퍼티이고 노란색 kinds는 get과 set을 통해 생성된 가짜 프로퍼티입니다.

이처럼 실프로퍼티에 언더바를 앞에 붙임으로써 구분합니다.

 

 

 

 

 

3. static

static 명령은 정적 메소드를 정의할 수 있게 만들어주는 키워드입니다. 사용법은 간단하게 메소드 앞에 static을 붙ㅇ이면 됩니다.

static 메소드명(인수, ...){
}

 

정적메소드에 대한 설명은 아래 링크를 참조해주세요.

2021.03.03 - [Programming/Javascript] - [Javascript] 정적 프로퍼티와 정적 메소드

[Javascript] 정적 프로퍼티와 정적 메소드

---