Copying Javascript Objects in an efficient way

There are different ways to copy an object in javascript. we will see how to copy javascript objects in an efficient way in this article.Copying Javascript Objects in an efficient way

Copying Javascript objects can be tricky. Most of the time, we will do shallow copy of an object in javascript.

But, there are few problems associated with that approach. But getting into that topic, we will see what is shallow and deep copy in javsacript.

Shallow vs Deep Copy

In javascript, shallow copy only clones the top level of an object. if an object contains the nested or reference object. it will copy only the reference to it.

Shallow Copy

shllow copy

For example, let's say you have an object like this

1let data = {
2 id: 1,
3 name: "john",
4 address: {
5 street: "Sample",
6 country: "Earth",
7 Street: "Madison street",
8 },
9}

you are copying the object to a new variable using Object.assign

1copydata = Object.assign({}, data)

After that, if you console log the copydata variable. you will get the output like

shallow copy output

Now, you are changing the variable data's object

1data.address.street = "Changed Street"

if you console log copydata again, you will get output like,

error

it changes the copied object value too because the copied object will refer to the same object.

To solve this problem, deep copying is used in javascript.

Deep Copy

Meanwhile, deep copying in javascript clones the nested objects too and stores it in the different memory location.

So, changing the original object doesn't affect the cloned object.

deep copy

Deep Clone in Javascript

it can be achieved using lodash util library in javascript which is one of the popular library in javascript ecosystem.

Install lodash in your machine to use it. After that, there is a method called clonedeep in lodash which is used to achieve the deep copying in javascript.

1const _ = require("lodash")
2
3let data = {
4 id: 1,
5 name: "john",
6 address: {
7 street: "Sample",
8 country: "Earth",
9 Street: "Madison street",
10 },
11}
12
13let copydata = _.cloneDeep(data)
14
15data.address.street = "Changed Street"
16
17console.log("data => ", data)
18
19console.log(
20 "=================================================================="
21)
22
23console.log("copydata =>", copydata)

Recent Articles

Crafting multi-stage builds with Docker in Node.js

Building a Production – Ready Node.js App with TypeScript and Docker

PM2 for Node.js developers

To Read More

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...

TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference be...

How to find project ideas to practi...

Ever wondered what how to get a real world experience on web development while w...

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...