A desestruturação em JavaScript mudou totalmente a forma como o JavaScript é escrito atualmente; o código é mais conciso para escrever, mas, do ponto de vista visual, a sintaxe da linguagem mudou muito. Qualquer bom desenvolvedor sabe, no entanto, que a mudança é a constante em que vivemos.


A ideia básica por trás da desestruturação em literais de objetos é a seguinte:



const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;


Há casos em que você deseja que a variável desestruturada tenha um nome diferente do nome da propriedade; nesse caso, você usará um : newName para especificar um nome para a variável:



// Grabs obj.x as as { otherName }
const { x: otherName } = obj;


A sintaxe para especificar um nome desestruturado alternativo para uma propriedade de objeto é simples e necessária. A desestruturação tinha a capacidade de confundir os desenvolvedores, especialmente desestruturação de matriz e desestruturação de argumentos de funções, mas essa sintaxe de alias é um truque simples que o senhor deve ter em seu armário!

  • Como vencer a síndrome do impostor

    Há dois anos, documentei minha luta contra a Síndrome do Impostor e a resposta foi imensa. Recebi mensagens de apoio e de comiseração de novos desenvolvedores da Web, engenheiros veteranos e até mesmo de pessoas de todos os níveis de experiência em outras profissões. Até me peguei lendo a postagem…

  • API de visibilidade de página

    Um evento que sempre faltou no documento é um sinal de quando o usuário está olhando para uma determinada guia ou para outra guia. Quando o usuário sai do nosso site para ver outra coisa? Quando ele volta?

  • Crie atalhos de teclado com o Mousetrap

    Algumas das melhores partes dos aplicativos da Web estão escondidas em pequenos detalhes. Esses “pequenos detalhes” muitas vezes podem resultar em grandes ganhos. Um desses pequenos ganhos pode ser encontrado nos atalhos de teclado. Aplicativos da Web incríveis, como o Gmail e o GitHub, usam muitos…

  • Rolagem e link

    Um dos trechos de código mais populares publicados em meu blog foi o trecho de link “Go To Top” com rolagem. A premissa do snippet é simples: quando o usuário rola um elemento (geralmente o elemento BODY) além de um determinado limite, um link “Go…