[모던 자바스크립트] - 클래스(class) 기본 문법

[모던 자바스크립트]는 아래 튜토리얼 과정을 바탕으로 작성하였습니다.

클래스

---

1. 클래스와 기본문법

JS를 사용하다보면 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 있습니다. 이럴 때 new function을 통해 객체를 만들수도 있습니다만, JS도 자바와 마찬가지로 class라는 문법을 사용하여 객체를 만들 수도 있습니다.

 

기본 문법

기본문법은 비슷합니다. 

class MyClass {
    constructor() { ... }
    method() { ... }
}

 

조금 다른 점이 있다면, constructor()는 new에 의해 자동으로 호출되어, 특별한 절차없이 객체를 초기화 할 수 있다는 점입니다.

더 구체적인 예시를 살펴봅시다.

class User {
    constructor(name) {
        this.name = name;
    }
 
    sayHi() {
        console.log(this.name);
    }
}

let user = new User('user1');
user.sayHi();

// 위와 동일하게 동작
function Member(name) {
    this.name = name;

    this.sayHi = function() {
        console.log(this.name);
    };
}

let user2 = new Member("ser2");
user2.sayHi();

 

new User('user1')을 호출하면 먼저 새로운 객체가 하나 생성되고 그 이후 넘겨받은 인수와 함께 constructor가 자동으로 실행되어 객체의 name 프로퍼티에 'user1'이 할당됩니다.

 

이런 과정을 거친 후에 user.sayHi()를 호출할 수 있죠.

 

그래서 JS에서 클래스가 정확히 무엇이냐. 클래스는 자바스크립트에서 함수의 한 종류입니다. 

console.log(typeof User); // function

 

이제 함수의 관점에서 class의 문법구조가 하는 일을 알아봅시다.

 

1. User라는 이름을 가진 "함수"를 만듭니다. 함수 본문은 생성자 메소드인 constructor에서 가져옵니다. 만약 생성자가 없다면 본문이 비워진채로 함수가 만들어집니다.
2. sayHi 같이 클래스 내부에서 정의된 메소드를 User.prototype에 저장합니다.

prototype 에 관한 내용은 추후 자세히 알아볼텐데, 우선은 "prototype은 객체 생성자 함수에 의해 생성되는 객체들이 공유하는 속성과 메소드를 저장하는 특수 객체" 정도로만 기억하고 넘어가겠습니다.

 

이제 new User를 호출해 객체를 만들고, 객체의 메소드를 호출하면 "함수"의 prototype 프로퍼티를 통해 가져올 수 있습니다.

User.prototype

코드로 설명하자면 이렇겠네요.

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// 클래스 = 함수
alert(typeof User); // function

// 정확히는 생성자 메서드와 동일합니다.
alert(User === User.prototype.constructor); // true

// 클래스 내부에서 정의한 메서드는 User.prototype에 저장됩니다.
alert(User.prototype.sayHi); // alert(this.name);

// 현재 프로토타입에는 메서드가 두 개입니다.
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

 

결론으로 말하고자 하는 바는 클래스는 함수라는 것인데, 이로 인해 클래스를 단지 '객체'를 편하게 만들어주는 함수의 "편의 문법" 정도에 불과하다고 생각할 수 있습니다만 사실 클래스는 단순 편의문법은 아닙니다.

 

function으로 객체를 만드는 것과 class로 객체를 만드는 것에는 중요한 몇가지 차이가 있습니다.

• 먼저 class로 만든 함수에는 특수 내부 프로퍼티인 IsClassConstructor(true)가 있습니다. 클래스 생성자를 new와 함께 호출하지 않으면 에러가 발생하는데 이 때 [[IsClassConstructor]]: true가 사용됩니다.
• 클래스 생성자를 문자열로 형변환하면 'class…'로 시작하는 문자열이 되는데 이때도 [[IsClassConstructor]]: true가 사용됩니다.
• 또한 클래스의 prototype 프로퍼티에 추가된 메서드의 enumerable 플래그는 false이기 때문에 class 에 정의된 메서드는 열거할 수 없다는 점에서 차이가 있습니다.
  • for..in으로 객체를 순회할 때, 메서드는 순회 대상에서 제외하고자 하는 경우가 많으므로 이 특징은 꽤 유용하다는거.

이 외에도 class와 function은 차이점이 꽤나 있지만, 이 내용들은 차차 다루겠습니다. 당장 중요한 내용은 아니거든요. 당장은 단지 class가 단순 객체를 만들기 위한 function의 편의문법은 아니라는 점을 기억합시다.