자바스크립트 클래스 표현식으로 익명 클래스 사용하기

회사 코드를 보니 요상하게 클래스에 이름 없이 인스턴스를 생성하는 패턴을 사용하고 있었다.

클래스 이름 없이 바로 생성하는 방법을 공부해보자.

 

자바에서는 익명 클래스는 이름 없이 선언하고 바로 객체를 생성할 수 있는 구조로, 주로 인터페이스나 추상 클래스를 즉석에서 구현하거나 확장할 때 사용된다.

 

하지만 자바스크립트에는 인터페이스나 클래스를 익명으로 구현하는 정확히 같은 개념이 없다.

자바스크립트에서 비슷한 구조를 만들 때는, 보통 익명 클래스라기보다는 클래스 표현식이나 함수 표현식을 사용한다.

익명 클래스는 클래스 표현식을 사용해 유사하게 동작하게 할 수는 있다.

 

클래스 표현식이란?

자바스크립트에서 클래스를 정의하는 한 가지 방법으로, 함수 표현식과 유사한 형태를 가진다.

클래스 표현식을 사용하면 클래스에 이름을 붙이지 않고(익명 클래스 표현식) 바로 클래스를 정의하고 인스턴스화할 수 있있다.

익명 클래스 표현식

익명 클래스 표현식은 이름 없이 클래스를 정의함.

이 방식은 주로 즉석에서 클래스를 생성하고 인스턴스화할 때 사용된다.

const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  area() {
    return this.height * this.width;
  }
};

const square = new Rectangle(5, 5);
console.log(square.area());// 25

이름이 있는 클래스 표현식

const Rectangle = class RectangleClass {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  area() {
    return this.height * this.width;
  }

  clone() {
    return new RectangleClass(this.height, this.width);
  }
};

const rect = new Rectangle(10, 5);
console.log(rect.area());// 50const rectClone = rect.clone();
console.log(rectClone.area());// 50

익명 클래스 (Anonymous Class)

특정 클래스에 이름을 지정하지 않고 직접 인스턴스를 생성하는 것을 의미한다.

익명, 이름이 없다는 것은 별로 기억되지 않아도 된다는 것이며, 나중에 다시 불러질 이유가 없다는 뜻을 내포한다.

즉, 프로그램에서 일시적으로 한번만 사용되고 버려지는 객체라고 보면 된다. (일회용 클래스)

자바스크립트(또는 타입스크립트)에서 익명 클래스를 사용하는 예는 주로 단일 인스턴스가 필요하거나 클래스 정의를 캡슐화하고자 할 때 유용하다.

익명 클래스의 기본 사용

익명 클래스를 생성하고 즉시 인스턴스화하여 그 인스턴스의 메서드를 호출한다.

sayHello 메서드를 가진 익명 클래스를 생성하고 즉시 인스턴스화하여 해당 메서드를 호출한다.

const instance = new (class {
    sayHello() {
        console.log("헬롱");
    }
})();

instance.sayHello();//헬롱

생성자 인자 사용

익명 클래스가 생성자 인자를 받아서 내부 속성을 설정한다.

name을 인자로 받는 익명 클래스를 정의하고, 이를 "월드" 인자와 함께 인스턴스화한다.

그리고 greet 메서드 출력한다.

const instance = new (class {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log(`헬롱, ${this.name}!`);
    }
})("월드");

인터페이스를 만족하는 익명 클래스(타입스크립트)

Greeter 인터페이스를 구현하는 익명 클래스를 생성하고 즉시 인스턴스화한 후, greet 메서드를 호출한다.

interface Greeter {
    greet(): void;
}

const instance: Greeter = new (class implements Greeter {
    greet() {
        console.log("헬롱 월드");
    }
})();

instance.greet();