12 паттернов, которые приведут твой код в порядок

Если ты до сих пор пишешь так:

const name = user.name;const email = user.email;const age = user.age;

то деструктуризация покажется тебе супер способностью.

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

Разберем 12 паттернов: от базовых до продвинутых.

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

Паттерн 1. Базовая деструктуризация объекта

const user = {  name: "Ivan",  age: 28,  email: "ivan@proweb63.ru",  role: "developer"};// Устаревший подходconst name = user.name;const age = user.age;const email = user.email;// Деструктуризация. Делай такconst { name, age, email } = user;console.log(name);  // "Ivan"console.log(age);   // 28console.log(email); // "ivan@proweb63.ru"

Паттерн 2. Переименование переменных (aliasing)

Исходное имя свойства не подходит для переменной, или нужно дать более чистое имя:

const apiResponse = {  user_name: "Ivan",  user_age: 28  // ...};// Переименовываем user_name → userNameconst { user_name: userName, user_age: userAge } = apiResponse;

Паттерн 3. Значения по умолчанию

const config = { theme: "dark" };const { theme, lang = "ru" } = config;console.log(lang); // "ru" — значение по умолчанию

Паттерн 4. Деструктуризация во вложенных объектах

const user = {  name: "Ivan",  address: {    city: "Москва",    zip: "000001"  }};const { address: { city, zip } } = user;console.log(city); // "Москва"

Паттерн 5. Деструктуризация параметров функции

// Былоfunction displayUser(user) {  console.log(`${user.name} (${user.age})`);}// Сталоfunction displayUser({ name, age }) {  console.log(`${name} (${age})`);}// Вызов остаётся тем же: displayUser(user)

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

Паттерн 6. Базовая деструктуризация массива

const colors = ["red", "green", "blue"];const [first, second] = colors;console.log(first);  // "red"console.log(second); // "green"

Паттерн 7. Пропуск элементов (skip pattern)

const [, second, , fourth] = [1, 2, 3, 4, 5];console.log(second); // 2console.log(fourth); // 4

Паттерн 8. Деструктуризация + rest-оператор

const nums = [10, 20, 30, 40, 50];const [head, ...tail] = nums;console.log(head); // 10console.log(tail); // [20, 30, 40, 50]

Паттерн 9. Значения по умолчанию в массивах

const input = ["value1"];const [a = "defaultA", b = "defaultB"] = input;console.log(a); // "value1"console.log(b); // "defaultB"

Продвинутые паттерны (комбинации и частные случаи)

Паттерн 10. Swap (обмен значений) без временной переменной

let x = 1, y = 2;[x, y] = [y, x];console.log(x, y); // 2 1

Паттерн 11. Деструктуризация возвращаемого значения функции

function getCoordinates() {  return { lat: 40.7128, lng: -74.0060 };}const { lat, lng } = getCoordinates();

Паттерн 12. Смешанная деструктуризация (объект + массив)

const response = {  status: 200,  data: {    items: [{ id: 1, name: "A" }, { id: 2, name: "B" }]  }};const { data: { items: [firstItem, secondItem] } } = response;console.log(firstItem); // { id: 1, name: "A" }

Ключевые выводы для разработчика

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

Если вы до сих пор пишете const tmp = obj.prop — этот материал для вас. Переходите на ES6+ и пишите код, который не стыдно показать на код-ревью.

А какие приемы работы с деструктуризацией или другими фичами ES6+ вы используете ежедневно? Возможно, у вас есть кейс, где деструктуризация помогла избежать бага или существенно сократить код? Поделитесь примерами в комментариях — интересно посмотреть на реальный опыт.