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.