Перейти к содержимому
JS/TS Interview Tutorial

Destructuring

В одной фразе: деструктуризация — синтаксический сахар над присваиваниями, работающий через property access для объектов и через Symbol.iterator для массивов. На собесах проверяют переименование, вложенную деструктуризацию, дефолтные значения и rest-паттерн.

// Объектная: переименование + дефолт + вложенная + rest
const {
    name: userName = 'anon',    // переименование → userName; дефолт 'anon'
    address: {
        city = 'Moscow'         // вложенная деструктуризация
    } = {},                     // дефолт для address (защита от undefined)
    ...rest                     // собирает оставшееся
} = { name: 'Alice', address: { city: 'SPb' }, age: 30, role: 'admin' };


console.log(userName); // 'Alice'
console.log(city);     // 'SPb'
console.log(rest);     // { age: 30, role: 'admin' }
// Массивная: пропуск элементов, swap, работа с любым iterable
const [first, , third, fourth = 'default'] = [1, 2, 3];
// first=1, third=3, fourth='default' (элемент отсутствует)


// Классический swap без temp-переменной
let a = 1, b = 2;
[a, b] = [b, a];           // a=2, b=1


// Работает с любым iterable, не только Array
const [x, y] = new Set([10, 20, 30]);  // x=10, y=20
const [head, ...tail] = 'hello';        // head='h', tail=['e','l','l','o']
// В параметрах функций — самый частый паттерн в production
function createUser({
    name,
    role = 'user',
    permissions: { read = true, write = false } = {}
} = {}) {   // дефолт для всего объекта — безопасный вызов без аргументов
    return { name, role, read, write };
}


createUser({ name: 'Bob', permissions: { write: true } });
// { name: 'Bob', role: 'user', read: true, write: true }


createUser(); // работает! не падает на деструктуризации undefined

Итог: Деструктуризация работает с любым iterable (массивы) и любым объектом. Дефолты применяются только при undefined, поэтому вложенный объект нужно защищать: { a: { b } = {} }.