Spread Operator – Por que Você Precisa Conhecer Essa Técnica?

Você já conhece a importância do Spread Operator no JavaScript? Entenda como ele funciona e como utilizar esse operador para copiar objetos de maneira eficiente!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Spread Operator – Por que Você Precisa Conhecer Essa Técnica?

Manipular objetos e arrays é uma tarefa comum e essencial quando trabalhamos com JavaScript.

Uma das maiores preocupações ao fazer essas manipulações é garantir que, ao copiar um objeto ou array, o original permaneça inalterado.

Quando fazemos uma cópia direta, o novo objeto ou array acaba compartilhando a mesma referência de memória que o original, o que pode causar problemas inesperados.

E é aí que entra o spread operator! Ele oferece uma maneira simples e eficaz de criar cópias de objetos e arrays, sem afetar o original.

Nesta aula, vou te mostrar como usar essa técnica para tornar seu código mais seguro e eficiente!

O Problema da Cópia de Referências no JavaScript

Em JavaScript, ao criar um novo objeto ou array baseado em outro existente, o que geralmente acontece é que, em vez de criar uma cópia independente, ambos compartilham a mesma referência na memória.

Isso significa que, ao modificar o novo objeto, você também estará alterando o original, já que ambos apontam para o mesmo local de dados.

Veja um exemplo. Vamos criar um objeto com três propriedades: nome, sobrenome e idade. Em seguida, vamos copiar esse objeto diretamente para outro.

const obj1 = {
    nome: "Daniel",
    sobrenome: "Porto",
    idade: 31,
};

const obj2 = obj1;
console.log(obj2);

Observe que, ao exibir as informações do segundo objeto com console.log(), os valores são os mesmos do primeiro objeto (obj1).

O problema surge quando modificamos uma das propriedades de um dos objetos. Por exemplo, se alterarmos a propriedade idade no segundo objeto (obj2) para 34 e depois usarmos o console.log() para exibir o primeiro objeto (obj1).

const obj1 = {
    nome: "Daniel",
    sobrenome: "Porto",
    idade: 31,
};

const obj2 = obj1;
obj2.idade = 34;
console.log(obj1);

Veja que, mesmo sem alterar diretamente o obj1, o valor da idade nele também foi modificado. Isso acontece porque obj1 e obj2 estão referenciando o mesmo local na memória. Portanto, qualquer mudança feita em um dos objetos será refletida no outro.

Solução com o Operador Spread

Para resolver o problema de cópia por referência e garantir que o obj2 seja uma cópia independente do obj1, usamos o spread operator, que cria uma cópia superficial dos dados de um objeto ou array.

Esse operador, representado por três pontos (…), “espalha” as propriedades do objeto original em um novo objeto. Em outras palavras, ele copia todas as propriedades do objeto original para um novo objeto.

Por exemplo, para criar uma cópia do obj1 usando o spread, utilizamos a sintaxe {…obj1}. Com isso, estamos dizendo: “Pegue todas as propriedades de obj1 e coloque-as no novo objeto obj2.”.

Dessa forma, garantimos que as mudanças no novo objeto não afetem o original.

const obj1 = {
    nome: "Daniel",
    sobrenome: "Porto",
    idade: 31,
};

const obj2 = {...obj1};

obj2.idade = 34;
console.log(obj1);
console.log(obj2);

Nesse exemplo, o obj2 se torna uma cópia independente do obj1. Ao alterar a idade do objeto 2 para 34, não afetamos a idade do objeto 1, pois agora eles apontam para locais distintos na memória.

Cópia de Arrays com Spread

Da mesma forma, podemos usar o spread operator para criar cópias de arrays no JavaScript, mantendo o array original inalterado.

const array1 = [1, 2, 3];
const array2 = [...array1];

array2.push(4);

console.log(array1);
console.log(array2);

Aqui, array2 é uma cópia independente de array1, e a adição do número 4 ao segundo array não afeta o array original.

Vantagens do Spread Operator

O spread operator é uma ferramenta essencial para qualquer desenvolvedor JavaScript, e ele oferece vários benefícios:

• Simplificar o código: O spread proporciona uma maneira mais concisa e legível de copiar e combinar dados.
• Evitar bugs relacionados à mudança de dados: Ao criar cópias independentes de objetos e arrays, você evita modificações inesperadas, garantindo que o código funcione de maneira previsível.
• Melhorar a manutenção: Com o spread operator, o código se torna mais fácil de manter e expandir, já que você pode criar novas versões de objetos ou arrays sem modificar os originais.

Conclusão – Spread Operator

Hoje, mostrei como funciona e como aplicar o spread operator em seus códigos JavaScript.

Esse operador é uma das técnicas mais poderosas e úteis no JavaScript, pois simplifica a cópia de objetos e arrays, evitando erros e bugs que podem ser difíceis de rastrear.

Entender e aplicar corretamente o spread tornará seu código mais eficiente, seguro e fácil de manter.

Diego Monutti

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.