3 Problemas em Javascript para resolver com a especificação Spread Operator
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?
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:
let x = [“tony stark”,”bruce banner”,”steve rogers”];Depois criamos um segundo Array e atribuímos à ele o criado anteriormente.
let y = x;Se realizarmos a adição de elemento na primeira, como abaixo:
x.push(‘peter parker’);Teremos o seguinte resultado para os dois Arrays:
console.log(x, y);/**** (4) [“tony stark”, “bruce banner”, “steve rogers”, “peter parker”]** (4) [“tony stark”, “bruce banner”, “steve rogers”, “peter parker”]**/
Se realizarmos a adição de elemento na segunda, como abaixo:
y.push(“t’challa”);Teremos o seguinte resultado para os dois Arrays:
console.log(x,y);/**** (5) [“tony stark”, “bruce banner”, “steve rogers”, “peter parker”, “t’challa”]** (5) [“tony stark”, “bruce banner”, “steve rogers”, “peter parker”, “t’challa”]**/
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:
let y = […x];Nosso problema número #2 começa a captura de alguns elementos do DOM, como abaixo:
let lista = document.querySelectorAll(‘tr’);Depois existe uma tentativa de usar o .map() para esta lista:
lista.map((a) => a.innerHTML);Esta tentativa retorna o seguinte erro:
/**** Uncaught TypeError: lista.map is not a function**/
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:
let lista = […document.querySelectorAll(‘tr’)];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.
let k = [“clark”,”bruce”,”louis”];let r = [“lex”,”jorel”];
Uma maneira elegante seria como abaixo, por meio do método .concat():
let t = k.concat(r);Mas o Spread Operator nos serve como solução para esse terceiro tipo de problema, veja como:
let t2 = […k,…r];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!
