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

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

// Массив
let nameArr = ["Sanya", "Vanya"]

/*деструктурирующее присваивание из массива*/
let [nameOne, nameTwo] = nameArr;

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

Работает аналогично массивам

// Объект
let argObj = {
	device: "Samsung", 
	model: "Galaxy"
}

/*деструктурирующее присваивание из объекта*/
let {device, model} = argObj;

Значение по умолчанию

При деструктуризации можно задать значение по умолчанию

let nameArr = ["Sanya"]

/*Задаем значения по умолчанию*/
let [nameOne= "noName", nameTwo="noName"] = nameArr;

console.log("nameOne", nameOne); //Sanya
console.log("nameTwo", nameTwo); //noName

Переименовка переменных при присваивании

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

// Объект
let argObj = {
	device: "Samsung", 
	model: "Galaxy"
}

/*деструктурирующее присваивание с переименованием*/
let {device: d, model: m} = argObj;

console.log(m); //Galaxy
console.log(d); //Samsung

Присваивание остатка

При необходимости вытащить одно свойство объекта в переменную, а остальные присвоить куда-нибудь. Можно сделать следующим образом:

// Объект
let argObj = {
	device: "Samsung", 
	model: "Galaxy",
	price: "30 000"
}

/*деструктурирующее присваивание*/
let {device, ...other} = argObj;
console.log("d", device); //Samsung
console.log("m", other); //Object { model: "Galaxy", price: "30 000" }

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

При необходимости деструктуризировать большой объект, можно воспользоваться циклом

let option = {
	host: 'localhost',
	port: 3000,
	user: 'default'
};

/*цикл по ключам и значениям*/
for (let [key, value] of Object.entries(option)) {
  console.log(`${key}:${value}`); 
}

// host:localhost
// port:3000
// user:default

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

/*сложная вложенная деструктуризация*/
let mobile = {
	device: "Samsung", 
	screen: { width: 360, height: 480 },  //объект
	color: ["Black", "White"], //массив
};

let {
	device,
	screen: { width, height	},
	color: [ colorBlack, colorWhite	]
} = mobile;

console.log(device); // Samsung
console.log(width); // 360
console.log(height); // 480
console.log(colorBlack); // Black
console.log(colorWhite); // White