Como clonar um objeto em JavaScript (deep clone)

Neste artigo você vai aprender como clonar um objeto em JavaScript – um conceito também chamado de deep clone, utilizando JS puro!

Fala programador(a), beleza? Bora ver como se clona um objeto em JavaScript, da maneira mais rápida e também com performance!

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

A forma mais simples e eficaz para realizar esta ação com JS puro, e compatível com navegadores, ou seja, ES5 para baixo

É convertendo o objeto em uma string e depois em JSON, tudo utilizando o objeto JSON do JavaScript

Veja na prática:

let obj = {
 nome: 'Matheus'
}

let obj2 = JSON.parse(JSON.stringify(obj));

console.log(obj2);

Dessa forma o objeto será clonado e você poderá utilizar todas as suas propriedades e métodos existentes no objeto original

Clonando com ES6

Caso não haja problema na versão do JavaScript, ou seja, você faz transpile do código

Já pode utilizar uma sintaxe que veio com o ES6, utilizando o método assign de Objet

Veja também na prática:

let obj = {
 nome: 'Matheus'
}

let obj2 = Object.assign({}, obj);

console.log(obj2);

Sintaxe mais simples e também parece menos gambiarra, não é? 😀

Porém tome cuidado com os navegadores mais desatualizados, o assing pode não funcionar!

Conclusão

Neste artigo vimos como clonar um objeto em JavaScript, utilizando formas tanto no ES6 como também no ES6

É bom ficar atento a versão dos navegadores que o projeto tem que suportar, pois o assign pode não funcionar nos browsers mais antigos

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube