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

Когда вам нужно несколько свойств объекта, часто приходится писать отдельную строку для каждого из них:

const leo = { name: "Лео", species: "лев", age: 6 };
const name = leo.name;
const age = leo.age;

Деструктуризация делает то же в одну строку:

const leo = { name: "Лео", species: "лев", age: 6 };
const { name, age } = leo;
console.log(`${name}, возраст: ${age}`);

Лео, возраст: 6

Слева от =, в фигурных скобках, указаны свойства, которые нужно достать из объекта. JavaScript создаёт для каждого из них переменную с именем и значением этого свойства. Порядок в скобках не важен: { age, name } работает так же. Объект остаётся прежним, а свойства, которые вы не назвали, как species здесь, просто не получают переменной.

Деструктурировать можно и массивы, с квадратными скобками. Здесь важен порядок: первая переменная получает первый элемент, вторая — второй и так далее:

const ages = [12, 6, 4, 2];
const [first, second] = ages;
console.log(first, second);

12 6

Это хорошо сочетается с сортировкой. Отсортируйте копию массива и достаньте элементы из его начала:

const [youngest, secondYoungest] = [...animals].sort((a, b) => a.age - b.age);
console.log(youngest.name, secondYoungest.name);

Пип Гоша

Типичные ошибки:

• Имя в фигурных скобках, которого нет среди ключей объекта. const { Name } = leo; присваивает Name значение undefined, потому что ключ называется name, с маленькой буквы n.
• Переменная, которая уже существует. Деструктуризация создаёт новые переменные, поэтому если в программе уже есть const name, то const { name } = leo; закончится ошибкой SyntaxError: Identifier 'name' has already been declared. Удалите старую строку.