Tecnologia

Desestruturando para atribuir

Por: , setembro 4, 2017

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 firstsecond 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 statsstats por sua vez possui strdex 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.

  • Receba nosso conteúdo em primeira mão.