Что такое деструктуризация массива и объекта в JS?

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

Массив (по позиции):

const arr = [10, 20, 30];
const [a, b] = arr;       // a=10, b=20
const [, , third] = arr;  // пропуск: third=30

Объект (по имени ключа):

const user = { name: 'Аня', age: 25 };
const { name, age } = user; // name='Аня', age=25

Значения по умолчанию — если поля/элемента нет:

const { city = 'не указан' } = user; // city='не указан'
const [x = 0, y = 0] = [5];           // x=5, y=0

Переименование (только для объектов, через :):

const { name: userName } = user; // userName='Аня'

Rest ... — собрать остаток:

const [head, ...tail] = [1, 2, 3, 4]; // head=1, tail=[2,3,4]
const { name: n, ...rest } = user;    // rest={ age: 25 }

Обмен переменных без временной:

let p = 1, q = 2;
[p, q] = [q, p]; // p=2, q=1

В параметрах функции — очень удобно для «именованных» аргументов:

function greet({ name, greeting = 'Привет' }) {
  return `${greeting}, ${name}!`;
}
greet({ name: 'Иван' }); // 'Привет, Иван!'

Почему это полезно: меньше шумного obj.field.field, понятнее видно, какие именно поля используются, и значения по умолчанию защищают от undefined.