Testando o Spread Operator: Novidade do ES6

Olá!

Neste post, vou mostrar uma novidade do ES6: o Spread Operator.

Você deve estar se perguntando agora (ou não):

Para que serve o Spread Operator?

O Spread Operator é usado com bastante frequência principalmente quando queremos utilizar a imutabilidade, ou seja, criar um objeto novo a partir de um objeto existente.  

Mãos na massa

Ele é bastante simples, vou criar um exemplo utilizando Array.

Primeiramente temos que criar o Array:

const arr = \[0,1,2\]

Então, se eu quisesse criar um novo vetor eu faria:

constNewArr = \[...arr, 3\]

Somente esses 3 pontinhos já é o Spread Operator.  

E o que ele faz?

Vai ficar bem claro quando fizermos um teste com funções. Se eu pedir para rodar:

console.log(newArr)

Ele nos retornará um vetor novo com o 0,1,2,3. 

Eu adicionei o item 3 no final e posso manipulá-lo em qualquer posição, por exemplo

constNewArr = \[3, ...arr\]

Ele irá aparecer 3,0,1,2. Não ficou claro? Então vamos para outro exemplo e ficará mais fácil de entender. Quando colocamos …arr é basicamente o mesmo que colocarmos o que está dentro do Array, por esse motivo se chama Spread Operator, pois é um operador que espalha os valores. 

Se pensarmos assim, podemos fazer o seguinte:

function soma(a,b,c){
    returna+b+c
}

Ao mandar rodar o

console.log(soma(...arr))

Ele irá espalhar estes valores em a, b e c e vamos conseguir somar esses valores. 

Podemos utilizar isso de várias maneiras, como por exemplo tirando um valor do arr

const arr = \[0,1,2\]

deixando

const arr = \[0,2\]

E passando para o

console.log(soma(1, ...arr))

Dica

Uma dica fácil é lembrar que ele espalha os valores colocando virgula entre eles. Isso é bastante útil, principalmente quando a gente quer duplicar um vetor.  

Você pode conferir o Hands-on também pelo vídeo:

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades.

Ah, fique à vontade para deixar suas dúvidas e sugestões nos comentários. Abraço!