프로토타입과 클래스

자바스크립트에는 클래스 개념이 존재하지 않고, 프로토타입을 이용한다고 언급했었습니다. 이 방식은 객체지향 개념을 기존의 언어와는 다른 방식으로 지원해서 조금 복잡하다고 생각이 들었는데요. ES6 버전이 나오면서 드디어 자바스크립트도 클래스를 지원하기 시작했습니다.

클래스를 지원하면서 얻는 이점은 문법이 간결해지고, 코드분리가 프로토타입보다 쉬어 강력한 유지보수성과 재사용성을 갖게됩니다.

클래스문법이 지원되어 사용이 권장되고 있으나, 기존의 프로토타입 방식 또한 알고있어야합니다.

클래스 생성과 초기화

기존 프로토타입 방식에서는 프로토타입을 다음과 같이 만들었습니다.

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 명령을 사용해서 변경해보겠습니다.

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());

확실히 기존의 객체지향과 비슷하거나, 클래스를 처음 접하시는 분들도 조금 더 직관적이고 알기 쉽다고 생각되지 않나요?

클래스를 선언할 때 주의할 점이 있는데, 자바스크립트에서 변수나 함수는 호이스팅 때문에 선언 이전에 사용은 가능했습니다. 하지만, 클래스는 호이스팅이 일어나지 않기 때문에 반드시 클래스를 먼저 선언하고 인스턴스화해서 사용해야합니다.

static

static 프로퍼티
static 메소드() {}

static 키워드는 class의 멤버를 정적 멤버로 만들어줍니다. 사용법은 정적으로 만들고 싶은 프로퍼티/메소드 앞에 static을 붙이기만 하면 됩니다.

getter, setter

getter와 setter는 접근자 프로퍼티라고 부르는 특수한 키워드입니다. getter는 메소드 앞에 붙어서 획득자가 되도록만들고, setter는 메소드 앞에 붙어서 설정자가 되도록 만들어줍니다. 좀 더 쉽게 풀자면 getter는 프로퍼티를 읽기 위해, setter는 프로퍼티를 쓰기 위해 메소드 앞에 붙여 사용합니다.

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처럼 클래스의 프로퍼티에 직접 접근했습니다. 하지만 이것은 좋은 방식이 아닙니다. 클래스에 직접 접근해서 값을 바꾸는 것은 보안상으로 좋지 못하기 때문에 사용을 지양해야하고, 이를 위해 getter와 setter를 사용하는 것 입니다.

또한 사용한 모습을 보면 console.log(car.kinds);와 같이 메소드에 접근함에도 불구하고, 마치 프로퍼티에 접근하는 것 처럼 보여집니다. 이렇게 getter와 setter는 가상의 프로퍼티를 만들어서 접근하는데, 사용하는 사람에게는 마치 클래스의 실제 프로퍼티를 이용하는 것 처럼 느끼게 해줍니다.