=====Деструктуризация объектов в JS=====

Для примера возьмём объект, содержащий простые свойства и вложенные объекты, с данными о покупателе:\\
<code javascript>
const customer = {
     name: 'Sherlock',
     email: 's.h.@gmail.com',
     age: 34,
     address: {
         streetNo: '221b Baker Street',
         city: 'London',
         country: 'UK' 
    }
}
</code>

====Базовое присваивание====

Традиционный подход для получения данных объекта — использовать точку или квадратные скобки:
<code javascript>
const name = customer.name;
const email = customer['email']; 

console.log(name) // Sherlock
console.log(email) // s.h.@gmail.com
</code>
Это можно сделать одной строкой кода:

<code javascript>
const { name: customerName, email } = customer;

console.log(customerName) // Sherlock
</code>

====Присваивание объявленным переменным====

Для этого нужно использовать круглые скобки:
<code javascript>
let name, email;

({ name, email } = customer);

console.log(name)
console.log(email)
</code>

Круглые скобки в данном случае нужны потому, что { слева воспринимается как блок, а не литерал объекта. Без скобок мы получим ошибку:
<code javascript>
{ name, email } = customer;
                ^SyntaxError: Unexpected token '='
</code>                
====Вложенные объекты====

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

<code javascript>
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
</code>

С помощью деструктуризации объекта в JS этот код можно записать в одну строку:\\
\\
<code javascript>
const { name,  address: {  streetNo, city } } = customer;

console.log(name) // Sherlock
console.log(streetNo) // 221b Baker Street
console.log(city) // UK
</code>

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

<code javascript>
let married = customer.married;

console.log(married); // undefined

if (!married) {
   married = 'N/A';
}
console.log(married); // N/A
</code>

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

<code javascript>
const { name, married = 'N/A' } = customer;

console.log(name) // Sherlock
console.log(married) // N/A
</code>

====Оставшиеся параметры====

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

<code javascript>
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' }
                  // }
</code>

====Обработка null-объектов====

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

<code javascript>
function getCustomer() {
    return null;
}

let { name, email } = getCustomer() || {};

console.log(name, email); // undefined undefined
</code>

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

====Деструктуризация аргументов функции====

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

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

display(customer);
</code>
А так выглядит деструктуризация параметров функции:

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

display(customer);
</code>

====Деструктуризация массивов в JS====

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

<code javascript>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
</code>

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

<code javascript>
let [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // Banana
console.log(secondFruit); // Orange
</code>
===Пропуск и получение остальных элементов===

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

<code javascript>
let [yourFav, , ...friendsFav] = fruits;

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

</code>

====Деструктуризация в JS с заменой элементов====

<code javascript>
let [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // Banana
console.log(secondFruit); // Orange

[firstFruit, secondFruit] = [secondFruit, firstFruit]

console.log(firstFruit); // Orange
console.log(secondFruit); // Banana
</code>