JavaScript 클래스 키워드(class) 완벽 정리: 선언부터 객체 생성까지

JavaScript의 클래스(class)는 ES6(ECMAScript 2015)에서 도입된 기능으로, 프로토타입(prototype) 기반 상속을 더 직관적으로 사용할 수 있게 해주는 문법적 설탕(syntactical sugar)입니다. 내부적으로 클래스는 사실 '특수한 함수(special functions)'로 동작합니다.

class 키워드로 클래스 정의하기

JavaScript에서는 class 키워드를 사용해 다음과 같이 클래스를 정의할 수 있습니다.

class Person {
    // 이 클래스의 생성자(constructor)
    constructor(name) {
        this.name = name;
    }
    // 이 클래스의 인스턴스 메서드
    displayName() {
        console.log(this.name)
    }
}

클래스 선언은 함수 선언과 동일하다

위의 클래스 정의는 사실 아래의 함수 선언과 기능적으로 동일합니다.

let Person = function(name) {
    this.name = name;
}
Person.prototype.displayName = function() {
    console.log(this.name)
}

즉, 클래스 문법은 내부적으로 프로토타입을 활용하지만, 코드를 훨씬 깔끔하고 구조화된 형태로 작성할 수 있게 해줍니다.

클래스 선언(Class Declaration) vs 클래스 표현식(Class Expression)

클래스는 두 가지 방식으로 정의할 수 있습니다. 위에서 본 형태가 클래스 선언이며, 아래와 같이 변수에 할당하는 형태는 클래스 표현식입니다.

// 이름 없는 클래스 표현식
let Person = class {
    // 이 클래스의 생성자(constructor)
    constructor(name) {
        this.name = name;
    }
    // 이 클래스의 인스턴스 메서드
    displayName() {
        console.log(this.name)
    }
}

필요하다면 클래스 표현식에 이름을 붙일 수도 있습니다. 예를 들어 let Person = class NamedPerson { ... }처럼 작성하면, 클래스 내부에서 자기 자신을 참조할 때 유용합니다.

클래스로 객체 생성하기

어떤 방식으로 클래스를 정의했든, new 키워드를 사용하여 해당 클래스의 인스턴스(객체)를 생성할 수 있습니다.

예제

let John = new Person("John");
John.displayName();

실행 결과

John

정리

• JavaScript 클래스는 ES6에서 도입된 문법적 설탕으로, 내부적으로는 프로토타입 기반 상속을 사용합니다.
• 클래스는 class 키워드를 통해 선언식 또는 표현식으로 정의할 수 있습니다.
• constructor는 객체 생성 시 초기값을 설정하는 특별한 메서드입니다.
• new 키워드로 클래스의 인스턴스를 만들고, 정의된 메서드를 호출할 수 있습니다.

JavaScript 클래스와 class 키워드에 대해 더 자세히 알아보려면 Tutorialspoint의 ES6 Classes 문서를 참고하세요.