Что такое деструктуризация ?
Спросят с вероятностью 10%

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

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

Имена переменных соответствуют ключам свойств объекта. Если свойство с таким именем существует, его значение присваивается переменной.

const person = {
  name: 'Алексей',
  age: 30,
  job: 'Инженер'
};

// Деструктуризация объекта
const { name, age, job } = person;

console.log(name); // Алексей
console.log(age);  // 30
console.log(job);  // Инженер

Также можно задать переменным другие имена, отличные от ключей объекта:

const { name: personName, age: personAge } = person;

console.log(personName); // Алексей
console.log(personAge);  // 30

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

Используется порядок элементов. Значения из массива присваиваются переменным в соответствии с их позицией.

const rgb = [255, 200, 0];

// Деструктуризация массива
const [red, green, blue] = rgb;

console.log(red);   // 255
console.log(green); // 200
console.log(blue);  // 0

Параметры функции

Деструктуризация также может использоваться в них для более удобной работы со свойствами передаваемых объектов или элементами массивов.

function introduce({ name, age }) {
  console.log(Меня зовут ${name}, мне ${age} лет.);
}

introduce(person); // Меня зовут Алексей, мне 30 лет.

Значения по умолчанию

Можно задать его для переменных, на случай, если такого свойства нет в объекте или элемента нет в массиве.

const { name, hobby = 'Чтение' } = person;
console.log(hobby); // Чтение

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых