Деструктуризация - одна из самых популярных “фич” в ES6, которая наиболее часто используется в повседневной работе, наравне со стрелочными функциями, let и const.

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

Давайте рассмотрим пример, в котором имеется объект auto с несколькими свойствами. Нам требуется присвоить значение каждого свойства auto новой переменной:

1const auto = {
2  brand: 'Tesla',
3  color: 'green',
4};
5const brand = auto.brand;
6const color = auto.color;

Используя деструктуризацию, мы можем то же самое записать в одну строчку:

1const { brand, color } = auto;

Здесь мы используем фигурные скобки, чтобы перечислить названия свойств объекта auto, значения которых мы хотим присвоить новым переменным brand и color.

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

Деструктурирование точно также работает со вложенными объектами.

1const auto = {
2  brand: 'Tesla',
3  color: 'green',
4  dimensions: {
5    size: {
6      width: '1,999mm',
7      length: '5,036mm',
8    },
9  },
10};

Если нам потребуется получить значения длины (length) и ширины (width), то можно сделать это так:

1const width = auto.dimensions.size.width;
2const length = auto.dimensions.size.length;

Либо можно использовать деструктуризацию:

1const { width, length } = auto.dimensions.size;

Изменение названия переменной во время деструктуризации

Иногда нам нужно 'вытащить' значение нужного свойства из объекта и присвоить переменной с другим названием. Это может потребоваться из-за того, что переменная с тем же названием уже существует в текущей области видимости.

В этом примере переменная width уже определена.

1const width = '500mm';
2const auto = {
3  brand: 'Tesla',
4  color: 'green',
5  dimensions: {
6    size: {
7      width: '1,999mm',
8      length: '5,036mm',
9    },
10  },
11};

В этом случае можно, в процессе деструктуризации, поменять названия переменных:

1const { width: carWidth, height } = auto.dimensions.size;
2console.log(carWidth); // 1,999mm

Таким образом, мы присвоим значение auto.dimensions.size.width новой переменной carWidth и сможем избежать конфликта с существующей переменной width.

Установка значений по умолчанию для деструктурируемых переменных

Еще один важный момент, который следует обсудить – возможность устанавливать значения по умолчанию.

Бывают случаи, когда в процессе деструктуризации, в объекте отсутствует значение какого-либо свойства.

1const auto = {
2  brand: 'Tesla',
3};
4const { brand, color } = auto;
5console.log(color);
6// undefined

Мы создали новую переменную color но не смогли присвоить ей соответствующее значение, поэтому получили значение этой переменной равное undefined.

Деструктуризация позволяет нам установить значения переменных по умолчанию:

1const auto = {
2  brand: 'Tesla',
3};
4
5const { brand = 'BMW', color = 'red' } = auto;
6console.log(brand); // 'Tesla' – получаем из объекта
7console.log(color); // 'red' – значение по умолчанию

Таким образом, если свойства brand либо color отсутствуют в объекте auto, новым переменным будут присвоены значения по умолчанию.

Следует помнить, что если значение свойства в объекте равняется Null, False или 0, то значение по умолчанию применяться не будет!

1// 1. Свойство brand: undefined
2const auto = {
3  brand: undefined,
4};
5const { brand = 'Tesla' } = auto;
6console.log(brand); // 'Tesla'
7
8// 2. Свойство brand: null
9const auto = {
10  brand: null,
11};
12const { brand = 'Tesla' } = auto;
13console.log(brand); // null
14
15// 3. Свойство brand: false
16const auto = {
17  brand: false,
18};
19const { brand = 'Tesla' } = auto;
20console.log(brand); // false
21
22// 4. Свойство brand: 0
23const auto = {
24  brand: 0,
25};
26const { brand = 'Tesla' } = auto;
27console.log(brand); // 0

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

Если говорить о массивах, то здесь пример деструктуризации будет выглядеть следующим образом:

1const auto = ['Tesla', '2020'];
2const [brand, year] = auto;
3console.log(brand); // 'Tesla'
4console.log(year); // '2020'

То есть, если речь идет о массивах – то меняем фигурные {} скобки на квадратные [], и также получаем значения новых переменных.