[JavaScript] 클래스 (class)

클래스와 일급 객체

클래스는 새로운 객체 생성 메커니즘이며, 자바스크립트에서 일급 객체로 취급된다.
일급 객체로서 클래스가 갖는 특징은 다음과 같다:

1. 런타임에 생성 가능

2. 변수나 자료구조에 저장 가능

3. 함수의 매개변수로 전달 가능

4. 함수의 반환값으로 사용 가능

예시:

function createClass() {
  return class {};
}
const DynamicClass = createClass();

클래스 vs 생성자 함수

클래스 생성자 함수

클래스 호이스팅

• 클래스 선언문도 함수처럼 호이스팅되지만, TDZ(Temporal Dead Zone) 때문에 선언 전에 참조할 수 없다.

const a = new MyClass(); // ReferenceError
class MyClass {}

인스턴스 생성

클래스는 반드시 new 연산자와 함께 호출해야 한다.

class Person {}
const p = new Person(); // OK
Person(); // TypeError

클래스 메서드

1. constructor

• 인스턴스를 생성하고 초기화하는 특별한 메서드

• 클래스 내 최대 한 개만 정의 가능

• 생략 시 빈 constructor가 암묵적으로 정의됨

• return문은 생략해야 함 (this 반환이 기본)

class Person {
  constructor(name) {
    this.name = name;
  }
}

2. 프로토타입 메서드

• 모든 인스턴스가 공유하는 메서드

class Person {
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

3. 정적 메서드

• 인스턴스를 생성하지 않아도 호출 가능

• 인스턴스가 아닌 클래스 이름으로 호출해야 함

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}
MathUtil.add(2, 3); // 5

정적 메서드 vs 프로토타입 메서드

정적 메서드 프로토타입 메서드

정적 메서드를 네임스페이스처럼 모아두면:

• 이름 충돌 방지

• 관련 함수 구조화

• 전역 유틸 함수 관리에 유리

클래스 메서드의 특징

1. function 키워드 생략 (메서드 축약 표현)

2. 메서드 사이에 , 필요 없음

3. 암묵적 strict mode

4. for...in, Object.keys로 열거 불가

5. new 연산자로 호출 불가

클래스 상속

기존 클래스를 extends 키워드로 확장할 수 있다.

• 슈퍼클래스(superclass): 상속을 제공하는 클래스

• 서브클래스(subclass): 상속을 받는 클래스

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 반드시 super 호출
  }
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const d = new Dog("Max");
d.speak(); // Max barks.

super 동작

• super() 호출 → 슈퍼클래스의 constructor 실행

• 메서드 안에서 super.method() 호출 → 슈퍼클래스의 메서드 참조

서브클래스의 constructor에서 super()를 반드시 호출해야 하는 이유:

1. 인스턴스 생성 책임을 슈퍼클래스에 위임

2. this 바인딩과 초기화 과정이 선행되어야 함

자바스크립트의 클래스는 사실상 생성자 함수와 프로토타입 기반 객체 생성 방식을 문법적으로 더 직관적으로 표현한 것이라 보면 된다.