Что такое деструктуризация в 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.