Владимир Шайтан Senior Full Stack Developer в UKEESS Software House, Преподаватель Компьютерной школы Hillel.

Как часто вы слышите слово «деструктуризация»? А как часто Вы думаете, что это слово означает разрушить что-то?

Это может быть одинаково часто, но когда мы говорим о деструктуризации в JavaScript, то мы не разрушаем ничего. Сейчас объясню как так выходит.

Согласитесь, что очень часто в работе у вас много групп значений, которые связаны между собой: характеристики пользователя, города в каком-то конкретном регионе или стране и т. д. Мне лично очень хочется поместить их все в массив или объект, когда я думаю, что они могут быть отдельными. Почему?

Всё очень просто: массивы и объекты — это наиболее гибкие типы данных JavaScript, а это значит, что способов работать с ними очень и очень много.

Сейчас мы будем говорить об одном очень мощном (или это слово уже режет слух?) инструменте для работы с этими структурами данных. Поехали :)

Сначала мы обратимся к значению слов «синтаксический сахар». Syntactic sugar — термин, используемый в программировании для описания синтаксиса, который не добавляет новых возможностей к языку, но делает код более читабельным и удобным для написания. К примеру: деструктуризация, стрелочные функции, способ constructor в классах и т. д.

ЧТО ТАКОЕ ДЕСТРУКТУРИЗАЦИЯ?

Как мы уже поняли, деструктуризация — это один из видов «синтаксического сахара», представленный миру в ECMAScript2015 (ES6). Деструктуризация позволяет «распаковывать» значения из массивов или объектов и легко присваивать их переменным. Вместо того чтобы обращаться к значениям через индексы массивов или ключи объектов, можно удобно извлекать их непосредственно во время инициализации переменных.

ОСНОВНЫЕ АСПЕКТЫ ДЕСТРУКТУРИЗАЦИИ

Логика работы
В основе процесса разборки лежит соответствие значений по ключам (для объектов) или по позиции (для массивов). Дальше последуют примеры и там будет понятнее.
Присвоение с помощью шаблонов
В деструктуризации используется механизм паттерн-матчинга (pattern matching), позволяющий соответствовать структуру массива или объекта на шаблон, который вы задаете в переменных. Это удобно, поскольку вы можете выборочно извлекать только те интересующие вас части данных без необходимости обращаться ко всем элементам или свойствам. Если мы говорим о больших объектах, то это становится очень удобно.
Императивный и декларативный подходы
До введения деструктуризации JavaScript использовал императивный подход к присвоению значений переменным, где каждый элемент объекта или массива нужно было вручную извлекать и присваивать. Деструктуризация же внедряет декларативный подход, когда можно определить желаемую структуру и автоматически «распаковать» данные.
Гибкость и удобство
Деструктуризация подходит как для обычных, так и для сложных структур данных. Вы можете распаковывать вложенные объекты, остаточные параметры (rest parameters) и использовать значения по умолчанию, что делает её очень гибкой. Это позволяет минимизировать количество кода, сосредотачивая внимание только на требуемых данных.

КОГДА ЖЕ ИСПОЛЬЗОВАТЬ ДЕСТРУКТУРИЗАЦИЮ?

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

НЕДОСТАТКИ ДЕСТРУКТУРИЗАЦИИ:

Понятность
Хотя деструктуризация помогает сохранить чистоту кода, её слишком частое использование затрудняет понятность новичкам или людям, которые не знакомы с этим синтаксисом.
Не всегда подходит для больших структур
Для деструктуризации очень больших объектов или массивов код может оказаться менее понятным, особенно если приходится разбирать вложенные структуры.

Опишем сначала коротко массивы и объекты.

Массив в JavaScript — это набор элементов, к которым можно получить доступ через числовой индекс. Элементы массива могут быть любого типа данных, включая числа, строки и даже другие массивы или объекты. Они выглядят так:

const array = [ 30, ‘one’, 50, ‘four’ ];
console.log(array[2]); //буде виведено 50

Объекты в JavaScript — это коллекции пар ключ-значения. Ключи в объекте являются строками, в то время как значения могут иметь любой тип данных.

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

const user = {
	firstName: ‘John’,
	lastName: ‘Doe’,
	age: 35,
	}
console.log(user.lastName); // виведе Doe

Теперь возвращаясь к деструктуризации, посмотрим на примеры.

ДЕСТРУКТУРИЗАЦИЯ МАССИВОВ

Массивы в JavaScript сохраняют значение на основе порядка. Деструктуризация массива позволяет извлекать значение из массива по их позиции.

const numbers = [1, 2, 3];

// Використання деструктуризації
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

Вы можете пропускать элементы массива, если они вам не нужны.

const colors = ['red', 'green', 'blue'];

// Пропуск другого елемента
const [primary, , tertiary] = colors;

console.log(primary);  // 'red'
console.log(tertiary); // 'blue'

Деструктуризация позволяет устанавливать значения по умолчанию для переменных, которые не могут содержать данных.

const points = [8];
// Присвоєння значень за замовчуванням
const [x = 10, y = 20] = points;

console.log(x); // 8
console.log(y); // 20

ДЕСТРУКТУРИЗАЦИЯ ОБЪЕКТОВ

Деструктуризация объекта позволяет извлекать значение из свойств объекта по их ключам.

const person = {
  name: 'Alice',
  age: 30,
  city: 'Kyiv'
};

// Деструктуризація об'єкта
const { name, age, city } = person;

console.log(name); // 'Alice'
console.log(age);  // 30
console.log(city); // 'Kyiv'

Если вы хотите использовать другие имена переменных, вы можете изменить название во время деструктуризации.

const user = {
  username: 'john_doe',
  email: 'john@example.com'
};

// Зміна імені змінної
const { username: userLogin, email: userEmail } = user;

console.log(userLogin); // 'john_doe'
console.log(userEmail); // 'john@example.com'

Подобно массивам, вы также можете устанавливать значения по умолчанию для объектов.

const car = {

make: 'Tesla',

model: 'Model 3'

};

// Значення за замовчуванням

const { make, model, year = 2020 } = car;

console.log(make); // 'Tesla'

console.log(model); // 'Model 3'

console.log(year); // 2020

ДЕСТРУКТУРИЗАЦИЯ ВКЛАДНЫХ ОБЪЕКТОВ

JavaScript также позволяет деструктурировать вложенные объекты. Это полезно при работе с объектами, содержащими другие объекты.

const product = {
  title: 'Laptop',
  specs: {
    cpu: 'Intel i7',
    ram: '16GB',
  }
};

// Деструктуризація вкладеного об'єкта
const { title, specs: { cpu, ram } } = product;

console.log(title); // 'Laptop'
console.log(cpu);   // 'Intel i7'
console.log(ram);   // '16GB'

ДЕСТРУКТУРИЗАЦИЯ В ФУНКЦИЯХ

Деструктуризация также часто используется в функциях для упрощения передачи параметров.

const person = {
  name: 'Alice',
  age: 25,
  city: 'Kyiv'
};

// Використання деструктуризації в параметрах функції
function greet({ name, age }) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

greet(person); // 'Hello, my name is Alice and I am 25 years old.'

ДЕСТРУКТУРИЗАЦИЯ МАССИВОВ И ФУНКЦИЙ

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

function getCoordinates() {
  return [50, 30];
}
const [latitude, longitude] = getCoordinates();

console.log(latitude);  // 50
console.log(longitude); // 30

ИСПОЛЬЗОВАНИЕ ОСТАТОЧНЫХ ПАРАМЕТРОВ В ДЕСТРУКТУРИЗАЦИИ

Остаточные параметры (rest parameters) позволяют сохранять остаточные значения массива или свойства объекта в отдельную переменную.

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Використання залишкових параметрів
const [first, second, ...rest] = fruits;

console.log(first);  // 'apple'
console.log(second); // 'banana'
console.log(rest);   // ['cherry', 'date']

Для объектов остаточные свойства могут также быть очень полезны.

const user = {
  name: 'Alice',
  age: 30,
  country: 'Ukraine'
};

// Використання залишкових властивостей
const { name, ...details } = user;

console.log(name);     // 'Alice'
console.log(details);  // { age: 30, country: 'Ukraine' }

Важно не забывать, что чрезмерное использование деструктуризации может запутать код, особенно для новичков. Однако при правильном использовании деструктуризация значительно улучшает поддержку и читабельность кода, особенно при работе с большими структурами данных. Так что этим точно стоит пользоваться. Возможно, первые несколько раз будет сложно, но с изучением этой темы придёт понимание как и зачем это делать и со временем, поверьте, это облегчит вам жизнь.

ВЫВОД

Деструктуризация — это ваш инструмент для работы с данными в JavaScript. Она помогает не «разрушать», а наоборот — упорядочивать и извлекать нужную информацию быстро и эффективно. Ее сила в гибкости и простоте, которая делает код компактным и понятным. Поэтому, если вы ещё не используете её в полной мере, начинайте экспериментировать с этим инструментом и вы почувствуете, как ваш код станет более лёгким и управляемым.

Деструктуризация — это один из ваших наиболее надёжных помощников в оптимизации. А, как мы все знаем, оптимизация в наше время — ультраважная штука.

Не бойтесь пробовать и изобретать новые пути оптимизации. А мы, как всегда, встретимся в то же время и в этом же месте :)