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

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

Массивы

Слева от знака = в квадратных скобках перечисляют переменные. Они получают элементы массива по порядку:

const [first, second] = ['яблоко', 'груша'];
 
console.log(first); // яблоко

Это то же самое, что написать const first = fruits[0] и const second = fruits[1], только короче.

Пропуск и значения по умолчанию

Ненужный элемент пропускают, оставив пустое место между запятыми. Если элемента в массиве нет, переменная получит значение по умолчанию:

const [x, , z = 0] = [1, 2];
 
console.log(x, z); // 1 0

Объекты

Для объектов используют фигурные скобки. Переменные получают значения свойств с такими же именами:

const user = { name: 'Анна', age: 25 };
const { name, age } = user;
 
console.log(name); // Анна

Порядок здесь не важен — значения находятся по именам.

Другое имя и значение по умолчанию

Через двоеточие переменной можно дать другое имя, а через = — значение на случай, если свойства нет:

const user = { name: 'Анна' };
const { name: userName, city = 'не указан' } = user;
 
console.log(userName, city); // Анна не указан

В параметрах функции

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

function describe({ name, age }) {
  return `${name}, ${age}`;
}
 
console.log(describe({ name: 'Анна', age: 25 })); // Анна, 25

Обмен значений

С помощью деструктуризации две переменные меняются местами без третьей:

let a = 1;
let b = 2;
[a, b] = [b, a];
 
console.log(a, b); // 2 1

Частая ошибка

Деструктуризация null или undefined вызывает ошибку: из «ничего» нельзя достать свойство. Так бывает, когда функцию вызвали без аргумента. Конструкция try...catch здесь перехватывает ошибку, чтобы показать её вид, — подробно о ней рассказано в главе про ошибки:

function describe({ name }) {
  return name;
}
 
try {
  describe();
} catch (error) {
  console.log(error.name); // TypeError
}

Если объект может отсутствовать, задайте значение по умолчанию для всего параметра: function describe({ name } = {}). Тогда вызов без аргумента вернёт undefined вместо ошибки.