Skip to main content

Значення за умовчанням для властивостей

JavaScriptJunior~1 хв читання
Запропонувати правку

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)Гнучкість і масштабованість
Статичні defaultPropsstatic defaults = {...}Коли значення потрібні в кількох місцях

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

У класі JS можна задати значення за умовчанням:

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

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

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

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

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