클래스와 객체지향 — class·extends·this

JS 의 class 는 ES2015 부터의 표준 — 사실은 프로토타입(23편) 위의 문법적 설탕이지만, 사용자 입장에선 Java·Python 같은 모양. 18편은 class 의 모든 핵심 문법을 정리합니다. TS 8편 의 비교편으로 봐도 좋아요.

기본 형태

class User {
  // 필드 선언 (ES2022+)
  active = true;

  // 생성자
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 메서드
  greet() {
    return `Hi, ${this.name}!`;
  }

  // 정적 메서드 (클래스 자체에 붙음)
  static fromJSON(json) {
    return new User(json.name, json.age);
  }
}

const u = new User("준성", 39);
u.greet();              // "Hi, 준성!"
User.fromJSON({...});   // 정적

getter · setter — 메서드처럼 보이는 속성

class User {
  #firstName = "";
  #lastName = "";

  constructor(first, last) {
    this.#firstName = first;
    this.#lastName = last;
  }

  get fullName() {
    return `${this.#firstName} ${this.#lastName}`;
  }

  set fullName(value) {
    [this.#firstName, this.#lastName] = value.split(" ");
  }
}

const u = new User("준성", "박");
u.fullName;             // "준성 박" (메서드 호출 () 없음)
u.fullName = "준석 박";  // setter 호출
u.fullName;             // "준석 박"

#private — 진짜 비공개 필드 (ES2022+)

class Account {
  #balance = 0;           // # 접두사 — 진짜 private
  #pin;

  constructor(pin) {
    this.#pin = pin;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  checkBalance(pin) {
    if (pin !== this.#pin) throw new Error("PIN 틀림");
    return this.#balance;
  }
}

const a = new Account("1234");
a.deposit(1000);
a.#balance;          // ❌ SyntaxError — 클래스 밖에선 접근 불가 (TS 의 private 와 달리 런타임 강제)

extends · super — 상속

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} 가 소리냄`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);          // 부모 생성자 호출 (필수, this 사용 전)
    this.breed = breed;
  }

  speak() {               // 오버라이드
    return `${this.name} 짖기!`;
  }

  describe() {
    return `${super.speak()} — 종: ${this.breed}`;
    //       ^ 부모 메서드 호출
  }
}

const d = new Dog("초코", "리트리버");
d.speak();                // "초코 짖기!"
d.describe();             // "초코 가 소리냄 — 종: 리트리버"

static — 클래스 레벨

class MathUtils {
  static PI = 3.14159;            // static 필드

  static circleArea(r) {           // static 메서드
    return MathUtils.PI * r * r;
  }

  // static block (ES2022) — 클래스 초기화
  static {
    console.log("MathUtils 로드됨");
  }
}

MathUtils.PI;                     // 3.14159
MathUtils.circleArea(5);          // 78.54
// 인스턴스에서는 접근 X
new MathUtils().PI;               // undefined

this 의 함정 — 분리하면 잃음

class Counter {
  count = 0;
  increment() {
    this.count++;
  }
}

const c = new Counter();
c.increment();              // OK

const fn = c.increment;     // 메서드를 변수에
fn();                       // ❌ TypeError — this 잃음

// 해결 1: 명시적 bind
const fn = c.increment.bind(c);
fn();   // OK

// 해결 2: 화살표 함수 필드 (this 가 인스턴스에 고정)
class Counter {
  count = 0;
  increment = () => {       // 화살표 — this 가 인스턴스로 자동 캡처
    this.count++;
  };
}
const fn = new Counter().increment;
fn();   // OK

React 이벤트 핸들러·setTimeout 콜백 등에서 가장 자주 만나는 함정. 22편(this) 에서 깊이.

instanceof — 인스턴스 확인

class Cat extends Animal { }

const c = new Cat("나비");
c instanceof Cat;          // true
c instanceof Animal;       // true (상속)
c instanceof Object;       // true (모든 객체)

// 사용
function feed(x) {
  if (x instanceof Animal) x.eat();
}

믹스인 — 다중 상속의 대안

// JS 는 단일 상속만. 여러 능력 합치고 싶으면 믹스인
function Loggable(Base) {
  return class extends Base {
    log(msg) { console.log(`[${this.constructor.name}] ${msg}`); }
  };
}

function Serializable(Base) {
  return class extends Base {
    toJSON() { return JSON.stringify(this); }
  };
}

class User extends Loggable(Serializable(Object)) {
  constructor(name) { super(); this.name = name; }
}

const u = new User("준성");
u.log("hi");        // [User] hi
u.toJSON();         // '{"name":"준성"}'

클래스 vs 함수 + 객체 — 언제 클래스?

한 표 — 멤버 종류