Frontend | Вопросы собесов

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

Спросят с вероятностью 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. Ставь 👍 если нравится контент.



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