Делаем код чище с помощью деструктуризации объектов в JavaScript

[Kate]

В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в JavaScript стандарта ES6. Этот синтаксис позволяет распаковать значения из сложных объектов и массивов. Его можно использовать для того, чтобы сделать код чище и лаконичнее.

Сначала мы обсудим деструктуризацию объектов, а затем перейдём к массивам.

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

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

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, email } = customer;

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-объектов​

Если мы попытаемся деструктурировать 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);

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

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

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' ]

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

let [firstFruit, secondFruit] = fruits;

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

[firstFruit, secondFruit] = [secondFruit, firstFruit]

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

Источник статьи: https://tproger.ru/translations/del...oshhju-destrukturizacii-obektov-v-javascript/