Можете, пожалуйста объяснить что происходит в данном тестовом коде.
const { w: width = 400, h: height = 500 } = { w: 800 }
console.log("width", width);
console.log("height", height);Я понимаю, что там назначены дефолтные значения, но как это грамотно озвучить не понимаю.
Допустим, у нас есть объект, в котором много ключей. Мы не хотим(по каким то причинам) по коду обращаться к ключам так: obj.key1(а вдруг ключа нет, тогда придется постоянно проверять на наличие его), а хотим выделить переменную.
Как бы мы это сделали:
const key1 = obj.key2 || 'defaultValue';
Если ключей много, которые нам нужны? И не хочется для каждого писать const и т.д., вот тут на помощь приходит деструктуризация
// Наш объект
const x = {
a: 100,
b: 200,
d: 500
}
// Можно выделить нужные нам ключи в переменные по их названию
const {a, b, c} = x;
console.log(a, b, c); // c - undefined
// Если мы хотим изменить название переменных, то это можно сделать через :
// Для задания значения по умолчанию, ставим = и указываем значение
const {a: y = 300, c: z = 400} = x;
console.log(y, z)Как видно из примера, мы не используем x.d из примера(ну не нужен он нам), однако используем(условно) x.c, которого нет в исходом объекте и наш x.c становится переменной z со значением 400