PassFront
  1. PassFront
  2. База знаний
  3. Современный JS ES6+

Что такое деструктуризация в JavaScript?

Современный JS ES6+

Деструктуризация — это синтаксис, позволяющий извлекать значения из массивов и свойства из объектов в отдельные переменные за одну операцию.

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

const user = { name: 'Ann', age: 25, city: 'Москва' };
const { name, age } = user;

// переименование и значение по умолчанию
const { name: userName, role = 'user' } = user;

// вложенная
const { address: { city } = {} } = user;

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

const [first, second] = [1, 2, 3];
const [a, , c] = [1, 2, 3];      // пропуск
const [head, ...tail] = [1, 2, 3]; // rest → tail = [2, 3]

// обмен значений
let x = 1, y = 2;
[x, y] = [y, x];

Где применяют

  • Параметры функций:
function greet({ name, age = 18 }) {
  return `${name}, ${age}`;
}
  • Возврат нескольких значений, работа с хуками React (const [state, setState] = useState()), импорты.

Плюсы

  • Меньше кода, читаемее.
  • Значения по умолчанию и переименование прямо при извлечении.

Коротко для собеседования

Деструктуризация извлекает значения из массивов (по позиции) и объектов (по имени) в переменные. Поддерживает значения по умолчанию, переименование, вложенность и rest. Широко используется в параметрах функций и хуках React.

Другие вопросы раздела