Normal vs Shallow vs Deep Copy in Javascript/Typescript

#javascript #typescript #reactnative #react

Hey everyone, just like my last article on Difference between ? and ?? in JavaScript/Typescript, I am motivated to write again to contribute something to the community. Today, we'll talk about how object copies work in Javascript/Typescript with code snippets.

Before starting, I would recommend you guys to look closely at this topic. Why? Because this thing causes a hell of a pain in the neck when dealing with Nested Objects. So let's get started.

Normal Copy

Normal copy does not copy the value, but its instance or its memory address. If the copied instance value is updated, the original value is updated. Similar to static keyword in Java(If you know Java).

Example

const original = { x: 0 }
const normalCopy = original;
normalCopy.x = 1; // also updates original.x
console.log(original.x); //prints 1
console.log(normalCopy.x); //prints 1

Shallow Copy

Shallow copy copies the outermost object value and does not copy the nested objects. This means that the initial object values are copied while the nested ones are not copied by value but copied by reference.Ï

Example

const user = {
  name: "John",
  contact: {
    home: "+12345",
  }
}
const shallowCopy = { ...user };
shallowCopy.name = "John Smith";// updates its own copy
shallowCopy.contact.home = "+999";// updates both original and copy

console.log(user);
console.log(shallowCopy);
//Output
//https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61n4uyvjpghid4kq0hdx.png

Deep Copy

A deep copy copies the entire object with its nested objects and creates a new clone of it in the memory.

Example

const user = {
  name: "John",
  contact: {
    home: "+12345",
  }
}
const shallowCopy = JSON.parse(JSON.stringify(user));
shallowCopy.name = "John Smith";
shallowCopy.contact.home = "+999";

console.log(user);
console.log(shallowCopy);
//Output
//https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7lb0jbhds7nzk8gwlkh.png