[JavaScript] 클래스 - 1부

1. 생성자 함수 vs. 클래스

ES5에서는 클래스 없이 생성자함수와 프로토타입을 이용하여 객체지향 언어의 상속을 구현할 수 있었다. 이로 인해 ES6부터 도입된 Class 문법에 대해 많은 이들은 문법적 설탕(Sugar)에 불과한 것이 아닌가 하는 의문을 가지게 되었다.

생성자 함수와 프로토타입을 이용한 다음의 코드를 클래스로 생성한 경우와 비교하여 살펴보자.

// ES5 생성자 함수
var Person = (function() {
    // 생성자 함수
    function Person(name) {
        this.name = name;
    }

    // 프로토타입 메서드
    Person.prototype.sayHi = function() {
        console.log('Hi! My name is ' + this.name);
    };

    // 생성자 함수 반환
    return Person;
})();

var me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

// 클래스 선언문
class Person {
    // 생성자
    constructor(name) {
        // 인스턴스 생성 및 초기화
        this.name = name;
    }

    // 프로토타입 메서드
    sayHi() {
        console.log('Hi! My name is ' + this.name);
    }
}

const me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

이처럼 클래스와 생성자 함수의 정의 방식은 형태적인 면에서 매우 유사하다.

하지만 클래스는 생성자 함수와 몇 가지 큰 차이를 가지고 있다.

생성자함수	클래스
new 연산자 없이 호출하면 일반 함수로서 호출됨	new 연산자 없이 호출이 불가능함
extends, super 키워드를 미지원	상속을 지원하는 extends, super키워드를 제공
함수 선언문으로 정의된 생성자함수는 함수 호이스팅,
함수 표현식으로 정의된 생성자함수는 변수 호이스팅	클래스는 호이스팅이 발생하지 않는 것처럼 동작
암묵적으로 strict mode가 지정되지 않음	암묵적으로 strict mode가 지정됨
프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true ⇒ 열거가 가능	클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false ⇒ 열거가 불가

위와 같은 차이점이 분명히 존재하기 때문에 클래스를 단순 문법적 설탕이라고 보기보다는 새로운 객체 생성 메커니즘으로 이해하는 것이 합당하다.

참고자료

[1] 모던 자바스크립트 딥다이브, 이웅모, 2022/08/24 - pp. 417 - 468

[2] 모던 자바스크립트 튜토리얼 - https://ko.javascript.info/class#ref-38