Desestruturando para atribuir

Atribuição via desestruturação (destructuring assignment) é um recurso sintático do EcmaScript 2015 que vem se popularizando muito nos últimos anos. Consiste em uma sintaxe simples que nos permite extrair valores de Arrays e Objetos, para atribui-los a variáveis por meio de uma desestruração do objeto original.

Atribuição básica (Arrays)

Por exemplo, dada uma array de números, queremos atribuir as três primeiras posições da array nas variáveis first, second e third podemos escrever o seguinte código:

const numbers = [10, 15, 20]
const [ first, second, third ] = numbers
console.log(first, second, third) // 10 15 20

Atribuição básica (Objetos)

Para objetos podemos fazer a mesma coisa, mas nesse caso usamos {}s no lugar de []s e o nome da variável precisa igualar ao nome do atributo do objeto:

const language = { name: "JavaScript", year: 1995 }
const { name, year } = language
console.log(name, year) // JavaScript 1995

Redefinindo o nome da variável

É comum querermos também atribuir um nome diferente para a variável em desestrurações de objetos usando a sintaxe { nomeDoAtributoNoObjeto: nomeDaVariavel }, para exemplificar vamos pegar o exemplo anterior e usar o nome languageName no lugar de name:

const { name: languageName } = language
console.log(languageName) // JavaScript

Desestruração de objetos aninhados

Também é possível desestruturar o objeto em seus diversos níveis, por exemplo, vamos supor que estamos escrevendo um jogo e temos um objeto que representa nosso herói. Esse objeto possui os atributos name e stats, stats por sua vez possui str, dex e ht, para extrair o str e o ht desse nosso objeto poderia executar a seguinte atribuição:

const hero = {
  name: "John",
  stats: { str: 10, dex: 10, ht: 15 }
}
const { stats: { str, ht }} = hero
console.log(str, ht) // 10 15

Podemos ir além e misturar a desestruturação de objetos e arrays juntos:

const musics = [
  { name: "Neon Knights", artist: "Black Sabbath" },
  { name: "Perfect Strangers", artist: "Deep Purple" }
]
const [{ name: firstMusic }, { name: secondMusic }] = musics
console.log(firstMusic, secondMusic) // Neon Knights Perfect Strangers

Operador Spread

O operador spread tem várias funções em JavaScript dependendo do contexto que é usado, neste artigo vou apenas explicar a sua função no destructuring assignment.
Na desestruturação o spread serve para atribuir todo o resto do objeto ou array que não teve nenhuma extração especificada, por exemplo:

Em arrays

const numbers = [1, 2, 3, 4, 5, 6]
const [first, second, ...others] = numbers
console.log(others) // [3, 4, 5, 6]

Em objetos

Na data de escrita desse artigo o operador spread em desestruturação de objetos ainda é pouco suportada em navegadores e em NodeJs apenas a partir da versão 8.4

const music = { name: "Neon Knights", artist: "Black Sabbath", year: 1980 }
const { name, ...attrs } = music
console.log(attrs) // { artist: "Black Sabbath", year: 1980 }

Desestruturação em argumentos de funções

Funções podem ter seus argumentos desestruturados também, facilitando o acesso aos atributos de objetos passados como parâmetro, por exemplo:

function sayHi({ name }) {
  console.log("Hello " + name)
}
sayHi({ name: "Don Corleone" }) // Hello Don Corleone

Mas para usar a desestruturação em funções precisamos ter atenção a um ponto, a função não pode receber null ou undefined, caso receba o código levantará uma exceção.
Esses são alguns dos exemplos do uso da sintaxe, é possível misturar a desestruturação com outros recursos e ter resultados muito bacanas, mas isso fica para um próximo artigo, para finalizar deixo registro os links da especificação do ECMAScript 2015:
ECMAScript 2015 (6th Edition, ECMA-262) The definition of ‘Destructuring assignment’ in that specification.