Простой

3 мин

387

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

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);   // 28
console.log(email); // "ivan@proweb63.ru"

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

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

const apiResponse = {
  user_name: "Ivan",
  user_age: 28
  // ...
};
// Переименовываем user_name → userName
const { 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); // 2
console.log(fourth); // 4

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

const nums = [10, 20, 30, 40, 50];
const [head, ...tail] = nums;
console.log(head); // 10
console.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+ вы используете ежедневно? Возможно, у вас есть кейс, где деструктуризация помогла избежать бага или существенно сократить код? Поделитесь примерами в комментариях — интересно посмотреть на реальный опыт.