Деструктивное присваивание объектов | Object destructuring assignment

Деструктивное присваивание - упрощает извлечение данных из массивов и объектов, при помощи более короткого синтаксиса.

let person = {
	firstname: 'John',
	lastname: 'Doy'
}

// ES5
let firstname = person.firstname;
let lastname = person.lastname;

// ES6
let {firstname, lastname} = person;

Важно - имена переменных должны совпадать с именами свойств объекта. Если требуется использовать переменную ст другим именем то через двоеточие указыватся имя переменной.

let {firstname: first, lastname: last} = person;
console.log(first, last); // John Doy

Можно указывать значение по умолчанию

let {firstname: first, lastname: last, age = 25} = person;
console.log(first, last, age); // John Doy 25

Имена свойств можно определять динамически - с помощь квадратных скобок

let {['first'+'name']: first, lastname: last, age = 27} = person;
console.log(first, last, age); // John Doy 27

Можно получить доступ к вложенным свойствам

let user = {
    firstname: 'John',
    lastname: 'Doe',
    social: {
        facebook: 'johndoe',
        twitter: 'jdoe'
    }
};
let {firstname: first, lastname: last, social: {facebook}} = user;
//let {firstname: first, lastname: last, social: {facebook:fb}} = user;
console.log(first, last, facebook);// John Doe johndoe

Можно использовать деструктивное присваивание объекта в качестве параметра функции

let user = {
    firstname: 'John',
    lastname: 'Doe',
};
function post(url, {data, cache}){
	console.log(data, cache); // Object { firstname: "John", lastname: "Doe" } false
}
let result = post('api/user', {data: user, cache: false});

Или можем получить прямой доступ к свойствам

let user = {
    firstname: 'John',
    lastname: 'Doe',
};
function post(url, {data: {firstname, lastname}, cache}){
	console.log(firstname,lastname , cache); // John Doe false
}
let result = post('api/user', {data: user, cache: false});

Можно использовать для возврата нескольких значений из функции

function getUserInfo(){
	return {
		firstname: 'John',
		lastname: 'Doe',
		social: {
			facebook: 'johndoe',
			twitter: 'jdoe'
		}
	}
}
let { firstname, lastname, social: { twitter } } = getUserInfo();
console.log(firstname, lastname, twitter); // John Doe jdoe