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

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

Допрацюйте відповідь до «Значення за умовчанням для властивостей». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## 1. Через **ініціалізацію полів класу**

Найсучасніший і найнаочніший спосіб (ES2022+):

```javascript
class User {
  name = "Anonymous";
  age = 18;

greet() {
    console.log(`Hi, I'm ${this.name}, I'm ${this.age}`);
  }
}

const u = new User();
u.greet(); // Hi, I'm Anonymous, I'm 18
```

**Як це працює:**

- Поля ініціалізуються **до виклику конструктора** (одразу після створення `this`).
- Це еквівалентно присвоєнню значень усередині конструктора:

```javascript
  this.name = "Anonymous";
  this.age = 18;
  ```

Можна задавати й **обчислювані значення**:

```javascript
class Product {
  id = Math.random();
  createdAt = new Date();
}
```

Можна використовувати й **значення з параметрів конструктора**:

```javascript
class User {
  constructor(name = "Anonymous") {
    this.name = name;
  }
}
```

---

## 2. Через **параметри конструктора зі значеннями за умовчанням**

Якщо значення можуть задаватися під час створення екземпляра:

```javascript
class User {
  constructor(name = "Guest", age = 18) {
    this.name = name;
    this.age = age;
  }
}

const u1 = new User();
const u2 = new User("Alice", 25);

console.log(u1); // { name: "Guest", age: 18 }
console.log(u2); // { name: "Alice", age: 25 }
```

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

---

## 3. Через **об'єкт параметрів + деструктуризацію**

Дуже поширений прийом у реальних проєктах,
особливо коли властивостей багато і порядок неважливий:

```javascript
class User {
  constructor({ name = "Guest", age = 18, city = "Kyiv" } = {}) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
}

const u1 = new User();
const u2 = new User({ name: "Alice", city: "Lviv" });

console.log(u1); // { name: "Guest", age: 18, city: "Kyiv" }
console.log(u2); // { name: "Alice", age: 18, city: "Lviv" }
```

Зручно, коли параметри можуть іти в різному порядку
або їх не завжди передають (наприклад, під час завантаження з API).

---

## 4. Комбінований підхід (часто найкращий варіант)

Можна поєднувати поля класу та параметри конструктора:

```javascript
class Settings {
  theme = "light";
  language = "en";

constructor(options = {}) {
    Object.assign(this, options);
  }
}

const s1 = new Settings();
const s2 = new Settings({ theme: "dark" });

console.log(s1); // { theme: "light", language: "en" }
console.log(s2); // { theme: "dark", language: "en" }
```

Це зручно, коли хочеш задати **"базові" значення**,
але дозволити користувачу перевизначати їх під час створення екземпляра.

---

## 5. Через `static defaultProps` (рідкісний прийом)

Іноді застосовують статичну властивість із "набором за умовчанням":

```javascript
class Config {
  static defaults = {
    apiUrl: "https://example.com",
    retryCount: 3,
  };

constructor(options = {}) {
    Object.assign(this, Config.defaults, options);
  }
}

const c = new Config({ retryCount: 5 });
console.log(c);
// { apiUrl: "https://example.com", retryCount: 5 }
```

Використовується, коли потрібно зберігати одну "глобальну конфігурацію" за умовчанням.

---

## Порівняння підходів

| Підхід | Приклад | Коли використовувати |
| --- | --- | --- |
| **Поля класу** | `name = "Guest";` | Прості властивості з дефолтом |
| **Параметри конструктора** | `constructor(name = "Guest")` | Коли дефолти залежать від вхідних даних |
| **Деструктуризація** | `constructor({ name = "Guest" } = {})` | Багато опцій, порядок не важливий |
| **Комбінація (Object.assign)** | `Object.assign(this, defaults, opts)` | Гнучкість і масштабованість |
| **Статичні defaultProps** | `static defaults = {...}` | Коли значення потрібні в кількох місцях |

---

## Короткий висновок

> У класі JS можна задати значення за умовчанням:
>
> - прямо в тілі класу (`name = "Guest"`);
> - через параметри конструктора (`constructor(name = "Guest")`);
> - через об'єкт із деструктуризацією (`constructor({ name = "Guest" } = {})`);
> - або поєднуючи підходи для гнучкості.

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

Для рев’юера

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

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