Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Клас як вираз const A = class {}». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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 {}`).
- Це зручно для **динамічних, локальних або тимчасових класів**.
- На відміну від декларації, ім'я класу в такому разі **може бути локальним або взагалі відсутнім**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати461 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.