3 Problemas em Javascript para resolver com a especificação Spread Operator

bruno ruiz
Jun 11, 2018 · 4 min read

Muitas pessoas enxergam problemas como impedimentos. Problemas e impedimentos são coisas bem diferentes. Mas muitos, por não saberem a diferença entre eles desistem de algo.

Um problema é uma questão em busca de uma solução.

Um impedimento se constitui quando todas as tentativas de resolução de um problema se esgotaram.

Esta distinção entre estes dois termos faz-nos entender problemas por um outra perspectiva — pela perspectiva das oportunidades.

Mas o que isso tem a ver com Javascript?

“Pensive portrait of a young gorilla at a zoo” by Rob Schreckhise on Unsplash

Tem tudo a ver, porque o desenvolvimento de aplicações em Javascript pode ser um inferno ou pode ser “a land of milk and honey”. Eu prefiro acreditar na segundo opção.

Vou explicar essa visão com a descrição de alguns problemas práticos. Lembrando que quando falo de problemas estou falando de oportunidades, o que inclui oportunidades de melhorar algo que já funciona bem.

# Problema número 1

Você possui um Array x e outra Array y, sendo que y=x. Em seguida você altera o valor x e, ao verificar o valor de y, você também alterou o valor de y. Se você fizer a alteração em y verificará que alterará x também. Essa é uma característica da linguagem que pode causar algumas dores de cabeça.

# Problema número 2

Você tem um grupo de elementos no DOM que precisa manipular, uma lista de <tr> por exemplo. Você faz um document.querySelectorAll pela tag e armazena os dados em uma variável. Essa variável possui uma lista de elementos e você tenta fazer um .map() nesta lista. OPS! Isso não vai dar certo!!!! E não dá certo porque .map() é uma método de Arrays e document.querySelectorAll retorna um objeto NodeList. E agora?

# Problema número 3

Você possui um Array k = [“clark”,”bruce”,”louis”] e outro Array r [“lex”,”jorel”] e quer constituir uma terceira com o valor destas duas anteriores. Existem algumas maneiras de se fazer isso, mas vamos resolver esse problema de uma maneira que pode parecer pouco convencional.

Estes dois problemas podem ser resolvidos com uma solução única: a especificação Spread Operator.

Uma definição

A especificação explica que o objetivo do Spread Operator é expandir uma expressão em múltiplos argumentos de uma função ou múltiplos elementos de um Array literal. Essa definição é o primeiro passo para resolvermos nossos 3 problemas e alguns outros.

Resoluções

Nosso problema número #1 começa com um Array como o abaixo:

Depois criamos um segundo Array e atribuímos à ele o criado anteriormente.

Se realizarmos a adição de elemento na primeira, como abaixo:

Teremos o seguinte resultado para os dois Arrays:

Se realizarmos a adição de elemento na segunda, como abaixo:

Teremos o seguinte resultado para os dois Arrays:

Para evitarmos alterar x quando mudamos o valor de y e vice e versa, podemos usar o Spread Operator na criação de y, como abaxo:

Nosso problema número #2 começa a captura de alguns elementos do DOM, como abaixo:

Depois existe uma tentativa de usar o .map() para esta lista:

Esta tentativa retorna o seguinte erro:

Para solucionar esse problema e usar o método .map(), basta criar a variável lista alterando o get no DOM que retorna um NodeList para um Array por meio do SpreadOperator, como abaixo:

Agora você pode usar o .map() na boa!

O problema de número #3 não se trata de um problema, mas sim de encontrar um caminho alternativo.

Se temos dois Arrays como abaixo e queremos gerar um terceiro com os valores das duas, podemos fazer de algumas maneiras.

Uma maneira elegante seria como abaixo, por meio do método .concat():

Mas o Spread Operator nos serve como solução para esse terceiro tipo de problema, veja como:

Desta maneira obtemos o mesmo resultado de .concat().

Finalizando

Spread Operators não servem apenas para casos como os apresentados. Você pode resolver muitos outros tipos. Se você já usou em algum outro caso e quer compartilhar, deixe comentário!

Vamos compartilhar as experiências!

Tableless

Um lugar para ler e discutir sobre desenvolvimento, design…

bruno ruiz

Written by

vishiii…. complicado escrever um bio…

Tableless

Tableless

Um lugar para ler e discutir sobre desenvolvimento, design, web semântica, back-end e outros assuntos relacionados a web. Se você quiser publicar artigos conosco, envie um email: medium[at]tableless.com.br ou *clique no link* http://bit.ly/escreva-tableless-medium

bruno ruiz

Written by

vishiii…. complicado escrever um bio…

Tableless

Tableless

Um lugar para ler e discutir sobre desenvolvimento, design, web semântica, back-end e outros assuntos relacionados a web. Se você quiser publicar artigos conosco, envie um email: medium[at]tableless.com.br ou *clique no link* http://bit.ly/escreva-tableless-medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store