Для примера возьмём объект, содержащий простые свойства и вложенные объекты, с данными о покупателе:

const customer = {
     name: 'Sherlock',
     email: 's.h.@gmail.com',
     age: 34,
     address: {
         streetNo: '221b Baker Street',
         city: 'London',
         country: 'UK' 
    }
}

Традиционный подход для получения данных объекта — использовать точку или квадратные скобки:

const name = customer.name;
const email = customer['email']; 
 
console.log(name) // Sherlock
console.log(email) // s.h.@gmail.com

Это можно сделать одной строкой кода:

const { name: customerName, email } = customer;
 
console.log(customerName) // Sherlock

Для этого нужно использовать круглые скобки:

let name, email;
 
({ name, email } = customer);
 
console.log(name)
console.log(email)

Круглые скобки в данном случае нужны потому, что { слева воспринимается как блок, а не литерал объекта. Без скобок мы получим ошибку:

{ name, email } = customer;
                ^SyntaxError: Unexpected token '='

Мы можем получать вложенные свойства по одному:

const name = customer.name;
const streetNo = customer.address.streetNo;
const city = customer['address']['city'];
 
console.log(name) // Sherlock
console.log(streetNo) // 221b Baker Street
console.log(city) // London

С помощью деструктуризации объекта в JS этот код можно записать в одну строку:

const { name,  address: {  streetNo, city } } = customer;
 
console.log(name) // Sherlock
console.log(streetNo) // 221b Baker Street
console.log(city) // UK

Допустим, у объекта customer есть булево поле married, которое может не иметь значения. Без деструктуризации проверка на наличие значения может выглядеть так:

let married = customer.married;
 
console.log(married); // undefined
 
if (!married) {
   married = 'N/A';
}
console.log(married); // N/A

С помощью деструктуризации можно сделать это в одну строку:

const { name, married = 'N/A' } = customer;
 
console.log(name) // Sherlock
console.log(married) // N/A

С помощью многоточия и любого имени переменной мы можем получить оставшиеся параметры, которые не были указаны. Для них обычно используют имя rest:

const { name, ...rest } = customer;
 
console.log(name) // Sherlock
console.log(rest) // {
                  //    email: 's.h.@gmail.com',
                  //    age: null,
                  //    address: { streetNo: '221b Baker Street', city: 'London', country: 'UK' }
                  // }

Если мы попытаемся деструктурировать null-объект, то получим ошибку. Этого можно избежать:

function getCustomer() {
    return null;
}
 
let { name, email } = getCustomer() || {};
 
console.log(name, email); // undefined undefined

С помощью оператора ИЛИ мы заменили null пустым объектом.

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

let display = (customer) => console.log(`${customer.name} ${customer.address.city}`);
 
display(customer);

А так выглядит деструктуризация параметров функции:

let display = ( { name, address: {city} } ) => console.log(`${name} ${city}`);
 
display(customer);

Синтаксис, который мы использовали для деструктуризации объектов, можно применять и к массивам. Кроме того, деструктуризация массивов имеет интересные особенности. Для их демонстрации будем использовать массив фруктов:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

Доступ к элементам массива через деструктуризацию будет выглядеть так:

let [firstFruit, secondFruit] = fruits;
 
console.log(firstFruit); // Banana
console.log(secondFruit); // Orange

Чтобы пропустить ненужный элемент массива используется запятая:

let [yourFav, , ...friendsFav] = fruits;
 
console.log(yourFav); // Banana
console.log(friendsFav); // [ 'Apple', 'Mango' ]

let [firstFruit, secondFruit] = fruits;
 
console.log(firstFruit); // Banana
console.log(secondFruit); // Orange
 
[firstFruit, secondFruit] = [secondFruit, firstFruit]
 
console.log(firstFruit); // Orange
console.log(secondFruit); // Banana