Blog fellyph cintra - ecma

5 maneiras de utilizar o Spread operator

Spread operator parameter foi introduzido no EcmaScript 2015, para um simples recurso no primeiro momento, mas utilizados da maneira correta pode se tornar bastante útil, o se você ainda não conhece o spread operator é identificado por “três pontos(…)” com ele podemos desmontar arrays e objetos. Nesse post iremos ver 5 maneiras de utilizar o spread operator.

1. Combinando arrays

Primeiro exemplo podemos ver como podemos combinar dois arrays ou mais, exemplo:

let semana = ['segunda', 'terça', 'quarta', 'quinta', 'sexta']; 
let semanaCompleta = ['domingo', ... semana, 'sábado']; 

console.log(semanaCompleta)

// output:  ['domingo', 'segunda', 'terça' 'quarta', 'quinta', 'sexta', 'sábado'];

Code language: JavaScript (javascript)

2. Copiando array

Um dos problemas de copiar um array para outra variável, caso passamos a referência diretamente, não estamos fazendo uma cópia do array e sim uma referência ao primeiro array, como no código abaixo:

let lista1 = [1,2,3]; 
let lista2 = arr;

lista2.push(4);
console.log(lista1);
// output : [1, 2, 3, 4]
Code language: JavaScript (javascript)

Se testarmos o código acima temos como saída do console.log do “lista1” a alteração feita no “lista2”, isso acontece por que temos uma referência para lista1 e não uma cópia do array. Para resolver este problema podemos utilizar o spread operator como uma alternativa para copiar a lista como no exemplo abaixo:

let lista1 = [1,2,3]; 
let lista2 = [...arr];

lista2.push(4);

console.log(lista1);
// output : [1, 2, 3]
Code language: JavaScript (javascript)

3. Convertendo um nodeList em um array

Outra utilidade de utilizar o spread operator é converter items que parecem um array, mas não são. Por exemplo, quando trabalhamos com querySelectorAll temos como retorno uma lista de items, mas essa lista não é do tipo array, o retorno é um elemento nodeList outra função que retorna uma lista é getElementsByClassName mas o retorno dessa função é um HTMLCollection, e o qual é o impacto desses dois tipos?

NodeList and HTMLCollection apenas suportam a função forEach, caso queiramos fazer interações como map, filter, reduce ou sort. Funções referentes ao tipo Array teremos um error como retorno, como no exemplo abaixo.

let buttons = document.querySelectorAll('button');

let newList = buttons.map((button) => (button.innerText = button.innerText + ' Copy!'));
Code language: JavaScript (javascript)

No exemplo acima, levamos em conta que o nosso HTML tem uma série de elementos button e queremos realizar uma cópia desta lista de elementos, mas nosso código irá disparar um erro, pois, map não é função dentro de um nodeList, para isso precisamos convertê-lo em um array para isso utilizamos o spread operator, como no exemplo a seguir:

let buttons = [...document.querySelectorAll('button')];

let newList = buttons.map((button) => (button.innerText = button.innerText + ' Copy!'));
Code language: JavaScript (javascript)

Agora sim, conseguimos executar o nosso código e criar uma cópia dos items selecionados, essa ação poderia ser uma ordenação ou um filtro para alterar elementos específicos. Mas é uma boa base para entender a diferença esses dois items claro que nodeList e HTMLCollection tem as suas especificidades, eles estão contidos na browser API enquanto Arrays fazem parte da JavaScript API. Caso queria saber mais sobre esses dois items deixe um comentário.

4. Criando novos objetos

Assim como arrays caso queiramos copiar objetos teremos problemas com referência, mas nesse caso podemos ir um pouco além, podemos criar novos objetos a partir de um objeto, por exemplo, em um ecommerce temos um objeto endereço, o usuário pode ter múltiplos endereços, quando ele requisita uma entrega um novo objeto é criado com endereço que ele selecionou e o seu nome. Como no exemplo abaixo:

const usuario = { nome: 'fellyph cintra', telefone: '0000-0000' };
const endereco = { cidade : 'caruaru', estado: 'pernambuco' };

const entrega = {
  responsavel: usuario.nome,
  ...endereco
};

console.log(entrega);
//output: {responsavel: 'fellyph cintra', cidade: 'caruaru', estado: 'pernambuco'}
Code language: JavaScript (javascript)

No exemplo acima utilizamos a apenas a propriedade nome do usuário, imagine que o objeto entrega precisa de todos os dados do usuário, nesse caso precisaremos combinar os dois objetos então o código ficará da seguinte forma:

const usuario = { nome: 'fellyph cintra', telefone: '00000-0000' };
const endereco = { cidade : 'caruaru', estado: 'pernambuco' };

const entrega = {
  ...usuario,
  ...endereco
};

console.log(entrega);
//output: {responsavel: 'fellyph cintra', telefone: '00000-0000', cidade: 'caruaru', estado: 'pernambuco'}
Code language: JavaScript (javascript)

5. Excluindo propriedades

Voltando para o exemplo anterior imagine que o objeto usuário contém o email do usuário essa informação não será necessária para o objeto entrega imagine, podemos utilizar o spread operator para remover propriedades também, como no código a seguir:

const usuario = { nome: 'fellyph cintra', telefone: '00000-0000', email: 'pindolinha@gmail.com' };
const endereco = { cidade : 'caruaru', estado: 'pernambuco' };

const semEmail = ({ email, ...rest }) => rest;

const entrega = {
  ...semEmail(usuario),
  ...endereco
};

console.log(entrega);
//output: {responsavel: 'fellyph cintra', telefone: '00000-0000', cidade: 'caruaru', estado: 'pernambuco'}
Code language: JavaScript (javascript)

No código acima, criarmos uma função chamada semEmail, nela separamos o email do resto do objeto e passamos como retorno o objeto sem a propriedade email.

5 funcionalidades do spread operator
5 funcionalidades do spread operator

Existem outros usos para o spread operator, como propriedades default ou propriedades condicionais, esses são os 5 usos mais básicos para spread operator. Caso tenha um uso particular que você gosta comente abaixo!

Para mais tutoriais sobre JavaScript acesse a página da categoria e até o próximo post!


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *