Делаем код чище с помощью деструктуризации объектов в 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К показов

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

10 изменений JavaScript за 2023 год, которые вы могли упустить

Рассказали о 10 изменениях в JavaScript и веб-разработке в 2023 году, которые вы могли пропустить. Речь идёт о Next.js, React, Angular, Vue, и Node.js.

В Puppeteer появилась поддержка Firefox: что это значит для разработчиков?

Поддержка Puppeteer в Firefox 23 открывает новые возможности для автоматизации и end-to-end тестирования в браузере. Разработчики могут использовать Puppeteer для сбора логов консоли, эмуляции устройств, перехвата сетевых запросов и предзагрузки скриптов.

Почему Node.js такой популярный

Node.js занял 50,4% рынка, поэтому мы попросили мидл и сеньор-программистов рассказать, в чём причина популярности Node.js и какие у него перспективы. Вот, что они ответили.

Стартует батл языков программирования 2023

Стартует турнир за звание лучшего языка программирования в 2023 году среди читателей Tproger. Кто же победит в этом году?