JS Deep Dive 25장. 클래스 (1)

본문 내용과는 큰 관련이 없다. 출처: https://ideas.demco.com/blog/classroom-environment-and-teacher-effectiveness/

 

클래스가 뭐냐.

클래스는 프로토타입 기반 패턴을 클래스 기반 객체지향처럼 사용할 수 있게 만드는 문법적 설탕이다.
설탕이라는 것이 비록 단맛을 내기 위한 첨가물이기는 하지만... 어쨌든 설탕 자체도 질량이 있는 물질이지 않나.
그래서 그런지 클래스가 지원하는 기능들을 보면 꽤 강력해 보인다.
예를 들면

• new 연산자 없이 호출하면 에러 발생시키기
• extends와 super 키워드로 상속 지원
• 호이스팅이 발생하지 않음
• 클래스 내부 코드에는 strict mode 강제
• constructor, 메서드들이 모두 비열거형 (Enumerable === false)

그래서 저자도 단순한 문법적 설탕이라기보다는 새로운 객체 생성 메커니즘으로 보는 것이 더 적합하다고 서술하고 있다.

클래스 선언

클래스 선언은 보통 아래와 같이 한다

class Person {}

그런데 클래스를 표현식으로 정의하는 것도 가능하다...

const Person = class {};
const Person = class MyClass {};

표현식으로 정의할 수 있다는 건.. 값으로 사용될 수 있는 일급 객체라는 뜻이다.
그래서 일급 객체가 가지는 특징들을 모두 갖는다!

C#, Java같은 전통적인 컴파일 언어에서는 상상도 못할 일이다.
이들 언어에서 클래스는 보통 타입 그 이상 그 이하도 아니다.. 런타임에 변수에 저장되거나 매개변수로 전달된다는 것은 불가능하다.
하지만 자바스크립트에서는 가능하다(!)

클래스 몸체(body..)에는 뭐가 들어가나

클래스 몸체에는 메서드만 선언 가능하다.

그 유형에는 생성자 constructor, 프로토타입 메서드, 정적 메서드가 있다.

class Person {
  // 생성자
  constructor(name) {
    this.name = name;
  }
  
  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}.`);
  }
  
  // 정적 메서드
  static sayHello() {
    console.log('Hello!');
  }
}

클래스는 호이스팅되는가?

클래스는 함수로 평가된다(!)
그러니까 typeof SomeClass 는 function 이라는 말이다.

함수는 어떻게 호이스팅 되었던가. 해당 함수가 선언된 소스코드의 평가 과정에서 평가되지 않았던가. 그래서 함수가 정의된 라인 이전에도 해당 함수를 참조할 수가 있었다. (물론 화살표 함수는 안된다..)
이것을 함수 호이스팅이라 했다.

클래스도 마찬가지로, 생성자 함수로 평가되어 호이스팅된다.
하지만 일반 함수와는 다르게, 정의 이전에 호출할 수는 없다. ReferenceError가 발생한다.
이는 let, const 와 유사하게 일시적 사각지대(Temporal Dead Zone)에 놓아서 정의 이전에 사용하는 실수를 방지하는 기능이라고 할 수 있다.

클래스 인스턴스 생성하기

class Person {}

// 이렇게 하면 된다.
const me = new Person();

// new 빼면 안된다.
const me = Person(); // TypeError

// 만약 표현식으로 정의한다면 (이렇게 할 일은 거의 없겠지만..)
const Person = class MyClass {};

// 식별자로 생성해야 한다.
const me = new Person();

// 클래스 이름은 먹히지 않는다.
const me = new MyClass(); // ReferenceError

클래스의 메서드들

위에서 잠깐 보긴 했지만. 메서드들을 하나씩 자세히 살펴보자.

생성자 constructor

생성자는 인스턴스를 초기화하기 위한 특수한 메서드다.

constructor는 예약어 같은 느낌이지만.. 예약어는 아니다. 일반적으로는 변수 이름으로 쓸 수 있다.
다만 class 내부에서 메서드 이름으로 쓰이면 특수한 역할을 하게 되는 것이다.

클래스 constructor를 콘솔에 찍어보면, 함수 객체가 가지고 있는 프로퍼티들을 모두 갖고 있다.
당연하다.. 상술했듯 클래스는 생성자 함수로 평가된다.

prototype 체이닝을 한번 보자.
클래스의 prototype.constructor 를 보면 클래스 스스로를 가리키고 있다.
그럼 new 를 사용해서 인스턴스를 생성하면, constructor 내부에 정의되어 있는 this 바인딩은 어떻게 되겠는가?
그렇다. 해당 인스턴스 스스로를 가리키게 된다.
왜냐. 생성자 함수에서의 동작과 똑같은 것이다. this 바인딩이란 것이 그 인스턴스 자신을 가리키도록 약속되어 있지 않은가. 그냥 그렇게 이해하려고 한다.

여기서 좀 헷갈렸는데, prototype.constructor 와 클래스 내부에 선언하는 constructor는 이름만 같을 뿐 직접적인 관련이 없다고 한다.
prototype.constructor는 생성자 함수를 의미한다.
클래스의 constructor는 특수한 메서드고, 런타임에는 프로퍼티에 포함되지 않는다. (평가 단계에서만 사용된다)

constructor는 보통 인스턴스를 초기화하는 데 사용된다.

class Person {
  constructor(name) {
    this.name = name; // 인수로 받아서 초기화
    this.kind = "PRIMATES"; // 영장류. 이렇게 모든 인스턴스에 고정값이어야 하는 프로퍼티도 초기화할 수 있다.
  }
}

constructor 와 관련한 몇 가지 꿀정보를 더 알아보자..

• 클래스 내에 최대 1개만 존재 가능
• 생략 가능 (그러면 암묵적으로 빈 constructor가 정의됨)
• return을 갖지 않아야 함
  • 만약 객체를 반환한다면 this가 반환되지 못하게 됨
  • 하지만 원시값을 반환한다면 원시값은 무시되고 this가 정상적으로 반환됨
  • 아무튼 이상한 짓 할 생각 하지 말고 return을 생략하는 것이 좋다

프로토타입 메서드

class Person {
  // 생성자
  constructor(name) {
    this.name = name;
  }
  
  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}.`);
  }
  
  // 정적 메서드
  static sayHello() {
    console.log('Hello!');
  }
}

위의 코드 재탕이다.
저렇게 선언하면 된다.

...다음 글에 계속