В объектах мы используем фигурные скобки {} для деструкции. Потому что так мы создаем объекты. Затем нам всем нужно указать имена переменных, которые точно соответствуют именам свойств объекта, который мы хотим деструктурировать.

const restaurant = {
name: ‘ bella vista’,
restLocation: ‘ chandigarh’,
categories: [‘Italian’, ‘Vegetarian ’, ‘Non-vegetarian ’],
menu: [‘pizza’, ‘pasta’, ‘garlic bread’],
openingHours: {
      thu: {
       open: 12,
       close: 22
           },
      fri: {
       open: 11,
       close: 23,
            }
      },
orderDelivery: function ({ time = ‘20:00’, address, mainIndex = 2, starterIndex = 1,}) {
console.log(`Order received ${this.mainMenu[mainIndex]} , ${this.starterMenu[starterIndex]}, at ${address} time: ${time}`);
 },
}

Итак, вот объектный ресторан. Так как в объекте порядок элементов не имеет значения, нам не нужно вручную пропускать элементы, как это было при деструктуризации массива. нам нужно просто написать имена переменных, точно соответствующие именам свойств, в каком бы порядке они ни были.

например:

const {name, menu, restLocation} = restaurant;
console.log(name, menu , restLocation);
output : 
"bella vista" ['pizza', 'pasta', 'garlic bread'] "chandigarh"

это точно так же, как деструктуризация с массивами, но в массивах мы используем квадратные скобки [], а в объектах мы используем фигурные скобки {} с именами свойств объекта, потому что в объектах порядок элементов не имеет значения. это основа деструктуризации объектов, и это очень полезно. Особенно в случае получения данных с API и веб-серверов, потому что данные в API поступают в виде объектов.

Что, если мы хотим, чтобы имена переменных отличались от имен свойств👉

мы можем это сделать, но нам по-прежнему нужны ссылки на имена свойств, иначе javaScript не сможет узнать, что мы хотим.

const {name: restaurantName, menu: mainMenu, restLocation: place} = restaurant

Таким образом, мы можем называть переменные из разных имен свойств, используя: (двоеточие) и указывать новое имя. Это очень полезно при работе со сторонними данными или при получении данных из API. Мы можем установить имена по умолчанию, и это будет весьма полезно и легко для понимания.

Мы можем установить значения по умолчанию для переменных во время деструктуризации 👉

Например: в указанном выше объекте restaurant нет свойства с именем starterMenu, и мы деструктурируем его так, чтобы оно отображалось как undefined, потому что нет свойства с именем starterMenu. так что в этом случае мы можем присвоить значение по умолчанию:

const {starterMenu = [], menu : mainMenu = []} = restaurant;
//👆here we assigned default value as empty array to variables starterMenu = [] and we changed the name of menu property from restaurant object to mainMenu and assigned default value []

console.log(starterMenu, menu);
so the output will be: [] [‘pizza’, ‘pasta’, ‘garlic bread’]
if we haven't assigned default value to starterMenu output will be:
       undefined [‘pizza’, ‘pasta’, ‘garlic bread’]

Это очень полезно при работе со сторонними данными или при получении данных из API, когда мы не знаем, имеет ли объект, который мы получаем, именно то свойство, которое мы хотим, или нет.

Изменение переменных при деструктуризации объектов 👉

let a = 34;
let b = 56;
const obj = {a:23 , b:7, c:14}
({a, b} = obj);

console.log(a, b)
output will be: 23 7

мы можем изменить, заключив деструктурирующие присваивания в круглые скобки ()

Вложенные объекты 👉

Итак, в нашем ресторане объект openHours - это объект свойства, а в этом объекте у нас есть fri объект ... как объект в объекте или вложенных объектах. Мы хотим получить open и close из объекта fri.

const {openingHours} = restaurant;
//destructured openingHours from restaurant object
const {fri: {open, close}} = openingHours;
// destructured fri from openingHours object and open and close from fri object
console.log(open, close);
output: 11 23

Мы можем выполнять деструктуризацию в параметрах, передавая функции как объект, поэтому нам не нужно передавать каждый отдельный аргумент в качестве параметра или определять каждый отдельный параметр, мы можем передать один объект в качестве аргумента и деструктурировать его.

orderDelivery: function ({ time = ‘20:00’, address, mainIndex = 2, starterIndex = 1,}) {
console.log(`Order received ${this.mainMenu[mainIndex]} , ${this.starterMenu[starterIndex]}, at ${address} time: ${time}`);
},
// 👆this is the method in our restaurant object to deliver order.
here we have passed an object as argument and destructured it instead of defining each parameter every single time, and assigned the default values in case any property is missing from data.
restaurant.orderDelivery({
           time: '22:30',
           address: 'mohali',
           mainIndex: 2,
           starterIndex: 1,
});
//👆 this is the object argument we have passed in that orderDelivery method of restaurant object.

Таким образом, деструктуризация - это очень мощный и полезный инструмент в JavaScript, поскольку он избавляет от лишнего беспорядка и избавляет от лишнего кода.