Destructuring Assignment

As duas estruturas de dados Object e Array são muito usadas no JavaScript; Objetos nos permitem criar uma única entidade que armazena itens de dados por chave, e arrays nos permitem reunir itens de dados em uma coleção ordenada.

A sintaxe básica é:

let user = { 
	logged: true,
	name: "Bill Gates",
	career: "Programador"
}

let {logged, name, career} = user;

console.log(logged);  // true
console.log(name);  // "Bill Gates"
console.log(career); // "Programador"

Podemos atribuir uma propriedade a uma variável com outro nome, por exemplo, user.name para entrar na variável chamada author, usando dois pontos:

let user = { 
	logged: true,
	name: "Bill Gates",
	career: "Programador"
}

let {logged, name: author, career} = user;

console.log(logged);  // true
console.log(author);  // "Bill Gates"
console.log(career); // "Programador"

Ignorar valores retornados que você não tem interesse:

let user = { 
	logged: true,
	name: "Bill Gates",
	career: "Programador",
	money: 15.000.000.000 
}

let {logged, ,career} = user;

console.log(logged);  // true
console.log(career); // "Programador"

Atribuir a parte restante em uma viáriável usando o padrão ...:

let user = { 
	logged: true,
	name: "Bill Gates",
	career: "Programador"
}

let {logged, ...rest} = user;

console.log(logged);  // true
console.log(rest.name);  // "Bill Gates"
console.log(rest.career); // "Programador"

Dicas

Aproveitando o lado bom da liberdade do Javascript, vamos ver algumas dicas rápidas, que podem tornar o código um pouco mais limpo:

No caso desejamos retornar um valor booleano de acordo com uma condição também booleana, dessa forma:

function isValid(user)
{
	if (user.career.length > 0) 
	{
		return true
	} 
	else 
	{
		return false
	} 
}

let user = { 
	logged: true,
	name: "Bill Gates",
	career: "Programador"
}

console.log(isValid(user)) // true

O resultado da avaliação de user.career será true, isso já é exatamente o retorno que queremos.

Então, podemos obter o mesmo efeito economizando linhas:

function isValid(user)
{
	return !!user.career.length 
}

Utilizando o operador de negação duas vezes !!, forçamos o Javascript a converter o valor em true ou false.

Finalmente, voltando ao assunto do artigo... a desestruturação também funciona muito bem com funções complexas que possuem muitos parâmetros, valores padrão e assim por diante.

function isValid({ career })
{
	return !!career.length
}

Agora vamos reescrever a função em apenas 1 linha, usando as arrow functions podemos ocultar a palavra return, e as chaves:

const isValid = ({ career }) => !!career.length

Conclusão

Existem muitas formas de se escrever um mesmo código, porém optar por um código mais organizado e limpo é sempre mais conveniente.