Декомпозиция

Декомпозиция (destructuring) позволяет извлечь из объекта отдельные значения в переменные:

let user = {
	name: "Tom",
	age: 24,
	phone: "+367438787",
	email: "tom@gmail.com"
};
let {name, email} = user;
console.log(name);		// Tom
console.log(email);		// tom@gmail.com

Для декомпозиции объекта переменные помещаются в фигурные скобки и им присваивается объект. Сопоставление между свойствами объекта и переменными идет по имени.

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

let user = {
	name: "Tom",
	age: 24,
	phone: "+367438787",
	email: "tom@gmail.com"
};
let {name: userName, email: mailAddress} = user;
console.log(userName);		// Tom
console.log(mailAddress);		// tom@gmail.com

В данном случае свойство name сопоставляется с переменной userName, а поле email - с переменной mailAddress.

Декомпозиция массивов

Также можно декомпозировать массивы:

let users = ["Tom", "Sam", "Bob"];
let [a, b, c] = users;

console.log(a);		// Tom
console.log(b);		// Sam
console.log(c);		// Bob

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

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

let users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
let [first,,,,fifth] = users;

console.log(first);		// Tom
console.log(fifth);		// Alice

Выражение first,,,,fifth указывает, что мы хотим получить первый элемент массива в переменную first, затем пропустить три элемента и получить пятый элемент в переменную fifth.

Подобным образом можно получить, например, второй и четвертый элементы:

let users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
let [,second,,forth] = users;

console.log(second);		// Sam
console.log(forth);			// Ann

Можно совместить получение данных из массива и объекта:

let people = [
	{name: "Tom", age: 34},
	{name: "Bob", age: 23},
	{name: "Sam", age: 32}
];
let [,{name}] = people;

console.log(name);		// Bob

В данном случае получаем значение свойства name второго объекта в массиве.

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

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

function display({name:userName, age:userAge}){
	console.log(userName, userAge);
}
function sum([a, b, c]){
	var result = a + b + c;
	console.log(result);
}
let user = {name:"Alice", age:33, email: "alice@gmail.com"};


let numbers = [3, 5, 7, 8];

display(user);	// Alice 33
sum(numbers);	// 15

Output