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

Отредактировано

Рассказываем, как уменьшить количество кода с помощью нового синтаксиса деструктуризации объектов и массивов в JavaScript.

10К открытий10К показов

В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в 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);

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

			let display = ( { name, address: {city} } ) => console.log(`${name} ${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

10К открытий10К показов

Также рекомендуем

🔥 Отцы JavaScript и Node.js, вместе с 10 000 разработчиков, обратились к Oracle с просьбой

Создатели JavaScript Брендан Айк и Node.js Райан Дал, совместно с более чем 10 000 разработчиков, подписали открытое письмо к Oracle, призывая компанию отказаться от торговой марки JavaScript

«Тамагочи для хакеров» Flipper Zero обновился до версии 1.0. Что нового принес апдейт?

Миниатюрный инструмент для пентестеров Flipper Zero получил крупное обновление до версии 1.0. В числе нововведений: увеличенная автономность, более быстрая передача данных через Bluetooth, ускоренное чтение NFC-карт и поддержка JavaScript для разработчиков

Работа над Serverless SSR, новости CSS и партия в DnD. Ретроперспектива недели с Сергеем Совой

Запускаем новую рубрику на Tproger. В первом выпуске — Сергей Сова, разработчик, фронтендер и подкастер, делится своими мыслями о Serverless SSR, новостях CSS и мастхев книге.

Редкие языки программирования: зачем они нужны и что на них пишут

Современные разработчики все чаще обращаются к редким языкам программирования, чтобы решить специфические задачи проекта. Разбираемся, как и когда их нужно использовать.