Structured Clone

DesenvolvimentoSoftwareTecnologia

O JavaScript, assim como outras linguagens de programação, utiliza o símbolo “=” como sinal de atribuição de valor a uma variável.

Como uma linguagem de programação dinamicamente tipada, o JavaScript irá definir o tipo da variável de acordo com o valor atribuído.

Logo, você também consegue passar uma atribuição de variável para outra variável, como no exemplo abaixo:

Mas como é o comportamento quando usamos um objeto e tentamos atualizar as informações do objeto?

Mas porque será que isso acontece?

Gerenciamento de memória

O gerenciamento de memória na computação acontece em cima de duas tarefas:

Alocação de memória: responsável por “alugar” um bloco de memória para armazenar informações (como o valor de uma variável)

Reciclagem de memória: responsável por liberar um espaço de memória para reutilização ou realocação. Normalmente acontece quando um programa deixa de referência-lo.

A atribuição de uma variável em outra no JavaScript, está relacionado a uma referência a uma memória alocada na aplicação. Acontece que, quando você cria uma sentença como:

A variável1 está referenciando o valor da variavel2 até que algum dos dois seja reatribuído a uma nova alocação de memória. Exemplo:

Nesse caso, a variavel2 se torna a única referência ao valor original e a variavel1 acaba alocando um novo espaço de memória

PS: quando utilizamos atribuições em tipos primitivos, como em um número, e alteramos o valor do número com ações como += ou ++. estas ações estão reatribuindo o valor da variável, assim realocando um novo espaço na memória, o que explica o motivo pelo qual  não passamos por este tipo de problema com tipos primitivos.

Estratégias para duplicar um objeto sem referenciá-lo no JavaScript

Sabendo que não podemos usar o valor de atribuição “=” para transferir um objeto a partir de um estado específico, podemos fazer isso de uma forma diferente. Confira algumas opções comuns:

Spread

Esta operação irá transformar o objeto em um objeto genérico (instâncias se tornam objetos), e irá copiar todos seus atributos primitivos para uma nova alocação de memória.

O que resolve o nosso problema, pelo menos para objetos não instanciados e com atributos primitivos.

Object.assign()

Esta operação irá preservar a alocação de memória de um objeto e atribuir ou referenciar todos os atributos primitivos de um outro objeto nele, sem que atribuições já existentes sejam perdidas.

A sua maior vantagem é que ela copia todos atributos, mas não sobrescreve os já existentes.

Podemos também utilizá-la em classes.

Problema ainda existente

Embora consigamos resolver uma cópia de atributos primitivos de um objeto, precisaríamos fazer a mesma coisa para cada filho não primitivo desse objeto caso seja preciso, como acontece nos exemplos abaixo:

Podemos ver que, quando clonamos um objeto, seja com Object.assign() ou spread, os filhos não primitivos deste objeto continuam sendo atribuídos como referência de memória e não uma nova alocação.

Deep Copy

Mas ainda assim, existem formas de resolver este problema, como vemos nos exemplo:

Também é possível desenvolver um método recursivo que iria fazer a clonagem de filhos de um objeto, usando a estratégia spread ou assign, mas que ficaria bem complexo e cansativo, não é? 

A partir de uma atualização recente do JavaScript, é possível fazer isso nativamente usando o structuredClone().

Structured Clone

O método structuredClone() irá realizar uma transferência (não clonagem) recursiva de todos atributos de um objeto e retornará uma nova alocação. Gerando assim um novo objeto, totalmente desacoplado do original.

Desta forma, o structuredClone() é a melhor opção para realizar clonagens de objetos não instanciado atualmente.

Lembrando que ela não reatribui uma instância de objeto, como uma classe, neste caso você não terá acesso aos seus métodos e construtor, sendo recomendado utilizar o Object.assign() mesmo.

Compatibilidade

O método structuredClone() está disponível nas versões mais atuais dos principais navegadores e disponível para TypeScript a partir da versão 17.0.29 do @types/node.

______

_____

A nata.house maximiza resultados para clientes ao focar em um conjunto de tecnologias sólidas usadas por grandes empresas (React, NodeJS e o ecossistema ao seu redor). 

Nossos serviços ficam ainda mais eficazes com o acompanhamento, de engenheiros sênior e de um arquiteto especialista, que ajudam a chegar na solução ideal para cada projeto.

Como não somos apenas desenvolvedores, com uma raíz forte em negócios, abraçamos a evolução e inovação constantes nos processos internos em prol da melhora dos serviços. 

É hora da sua equipe de tecnologia partir para o próximo nível e nós podemos ajudar. 

Quer saber mais sobre como a nata.house pode contribuir para o crescimento do seu negócio? Fale com um dos nossos especialistas! 

Receba conteúdos sobre inovação digital, novas tecnologias, design e desenvolvimento.

Entre em contato

Telefones

+55 31 98426-5166

+55 31 4042-1001

Endereço

R. Paraíba, 330, sala 1006

Belo Horizonte - MG - Brasil