Клас як вираз const A = class {}

JavaScriptJunior~1 хв читання

1. Синтаксис

Клас можна оголосити двома способами:

Клас-декларація (Class Declaration)

javascript

class User {
  greet() {
    console.log("Hi!");
  }
}

Клас-вираз (Class Expression)

javascript

const User = class {
  greet() {
    console.log("Hi!");
  }
};

Обидва варіанти створюють клас, різниця лише в тому, де і як він оголошений.

2. Анонімний і іменований вираз

Клас-вираз може бути анонімним або іменованим.

Анонімний:

javascript

const User = class {
  greet() {
    console.log("Hi!");
  }
};

Іменований:

javascript

const User = class MyUser {
  greet() {
    console.log(MyUser.name); // "MyUser"
  }
};

const u = new User();
u.greet(); // MyUser

Ім'я MyUser видно лише всередині самого класу, ззовні доступна лише змінна User.

javascript

console.log(typeof MyUser); // ReferenceError

3. Де це корисно

1. Коли потрібно створити клас динамічно

Наприклад, залежно від умови:

javascript

const Animal = condition
  ? class Dog {
      bark() { console.log("Woof!"); }
    }
  : class Cat {
      meow() { console.log("Meow!"); }
    };

const pet = new Animal();

2. Коли потрібно повернути клас із функції (фабрика класів)

javascript

function createModel(name) {
  return class {
    constructor(id) {
      this.id = id;
      this.modelName = name;
    }
  };
}

const UserModel = createModel("User");
const user = new UserModel(1);

console.log(user.modelName); // "User"

Дуже зручно для динамічного створення моделей, сутностей, адаптерів тощо.

3. Коли клас має бути локальним (всередині функції)

javascript

function makeCounter() {
  return class {
    #count = 0;
    inc() { this.#count++; return this.#count; }
  };
}

const Counter = makeCounter();
const c = new Counter();
console.log(c.inc()); // 1

Клас живе лише всередині функції, не забруднюючи глобальну область видимості.

4. Поведінка hoisting (підняття)

Клас-декларація не піднімається (як функція).
Клас-вираз поводиться як будь-яка змінна const, доступний лише після оголошення.

javascript

new User(); // ReferenceError
const User = class {};

5. Можна використовувати як значення (inline)

javascript

console.log(
  new (class {
    sayHi() {
      console.log("Hi!");
    }
  })()
); // { ... }: екземпляр тимчасового класу

Такий прийом часто застосовують у тестах і демо, не потрібно засмічувати код окремим ім'ям класу.

Підсумок

Тип	Приклад	Де доступне ім'я	Піднімається (hoisting)?
Class Declaration	`class User {}`	Всюди після оголошення	Ні
Anonymous Class Expression	`const A = class {}`	Немає імені	Ні
Named Class Expression	`const A = class MyA {}`	Лише всередині класу	Ні

Висновок:

Так, клас можна використовувати як вираз (const A = class {}).
Це зручно для динамічних, локальних або тимчасових класів.
На відміну від декларації, ім'я класу в такому разі може бути локальним або взагалі відсутнім.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.