Значення за замовчуванням при деструктуризації

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

Чудове питання - значення за замовчуванням при деструктуризації - це дуже зручна і часто використовувана можливість ES6, особливо в реальних проєктах (наприклад, у React-хуках або відповідях API). Розберемо все покроково.

1. Загальна ідея

Якщо в об'єкті чи масиві немає потрібного значення, ти можеш задати йому значення за замовчуванням прямо в момент деструктуризації.

Приклад з об'єктом

javascript

const user = { name: 'Alex' };

// age в об'єкті немає, підставиться 30
const { name, age = 30 } = user;

console.log(name); // Alex
console.log(age);  // 30

Значення за замовчуванням використовується лише якщо властивість відсутня або дорівнює undefined, але не спрацьовує при null.

javascript

const obj = { a: undefined, b: null };

const { a = 1, b = 2 } = obj;

console.log(a); // 1 (undefined -> підставилося)
console.log(b); // null (null не дорівнює undefined)

2. Значення за замовчуванням у масиві

javascript

const arr = [10];

const [a, b = 20, c = 30] = arr;

console.log(a); // 10
console.log(b); // 20 (підставилося)
console.log(c); // 30 (підставилося)

3. Вкладена деструктуризація з дефолтами

Ти можеш вказувати значення за замовчуванням на будь-якому рівні вкладеності.

javascript

const user = {
  name: 'Alex',
  address: { city: 'Paris' }
};

// Якщо немає address.zip - підстав 10000
const {
  address: { city, zip = 10000 }
} = user;

console.log(city); // Paris
console.log(zip);  // 10000

4. Значення за замовчуванням у функціях

Дуже часте застосування - при деструктуризації аргументів функцій.

Приклад:

javascript

function connect({ host = 'localhost', port = 3000 } = {}) {
  console.log(`Connecting to ${host}:${port}`);
}

connect();                      // Connecting to localhost:3000
connect({ port: 8080 });        // Connecting to localhost:8080
connect({ host: 'api.com' });   // Connecting to api.com:3000

Тут = {} важливе - якщо взагалі не передати аргумент, помилки не буде.

5. Комбінація з перейменуванням

Можна одночасно перейменовувати змінні й задавати їм дефолти:

javascript

const user = { name: 'Alex' };

const { name: userName, age: userAge = 25 } = user;

console.log(userName); // Alex
console.log(userAge);  // 25

6. Дефолт + rest-оператор

javascript

const user = { name: 'Alex' };

const { age = 18, ...rest } = user;

console.log(age); // 18
console.log(rest); // { name: 'Alex' }

Важливо пам'ятати

Ситуація	Що станеться
Властивість відсутня	Використовується значення за замовчуванням
Властивість `undefined`	Використовується значення за замовчуванням
Властивість `null`	Не використовується (null не дорівнює undefined)
Властивість є (будь-яке значення)	Значення за замовчуванням ігнорується

Підсумок

Тип деструктуризації	Приклад	Результат
Об'єкт	`const { a = 1 } = {};`	`a = 1`
Масив	`const [x = 5] = [];`	`x = 5`
Вкладений об'єкт	`const { user: { name = 'Anon' } = {} } = {};`	`name = 'Anon'`
Функція	`function f({ a = 1 } = {}) {}`	Безпечно при відсутності аргумента

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

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

Premium

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