Copying Javascript Objects in an efficient way
Tags: showdev, javascript, webdev, tutorial
Published: 2019-10-16 19:27:01

---
title: Copying Javascript Objects in an efficient way
published: true
description: Copying Javascript Objects in an efficient way
tags: showdev,javascript,webdev,tutorial
canonical_url: https://cloudnweb.dev/2019/10/copying-javascript-objects-in-an-efficient-way/
---
<!-- wp:paragraph -->
<p>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.<strong>Copying Javascript Objects in an efficient way</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> Copying Javascript objects can be tricky. Most of the time, we will do shallow copy of an object in javascript. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Shallow vs Deep Copy</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Shallow Copy</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":1532,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cloudnweb.dev/wp-content/uploads/2019/10/shllow_copy.png" alt="" class="wp-image-1532"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>For example, let's say you have an object like this</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let data = {
  "id" : 1,
  "name" : "john",
  "address" : {
    "street" : "Sample",
    "country" : "Earth",
    "Street" : "Madison street"
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p> you are copying the object to a new variable using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>copydata = Object.assign({},data);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, if you console log the <strong>copydata </strong>variable. you will get the output like</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1533,"width":604,"height":118} -->
<figure class="wp-block-image is-resized"><img src="https://cloudnweb.dev/wp-content/uploads/2019/10/shallow_copy_output.png" alt="" class="wp-image-1533" width="604" height="118"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, you are changing the variable <strong>data's</strong> object</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>data.address.street = "Changed Street";</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>if you console log <strong>copydata </strong>again, you will get output like,</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1534,"width":606,"height":188} -->
<figure class="wp-block-image is-resized"><img src="https://cloudnweb.dev/wp-content/uploads/2019/10/error.png" alt="" class="wp-image-1534" width="606" height="188"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>it changes the copied object value too because the copied object will refer to the same object.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To solve this problem, deep copying is used in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Deep Copy</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> Meanwhile, deep copying in javascript clones the nested objects too and stores it in the different memory location.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, changing the original object doesn't affect the cloned object.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1536,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cloudnweb.dev/wp-content/uploads/2019/10/deep_copy.png" alt="" class="wp-image-1536"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Deep Clone in Javascript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>it can be achieved using  <a href="https://lodash.com/docs/4.17.15">lodash </a>util library in javascript which is one of the popular library in javascript ecosystem.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Install <a href="https://www.npmjs.com/package/lodash">lodash </a>in your machine to use it. After that, there is a method called <strong><a href="https://lodash.com/docs/4.17.15#cloneDeep">clonedeep </a></strong>in lodash which is used to achieve the deep copying in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const _ = require('lodash');

let data = {
  "id" : 1,
  "name" : "john",
  "address" : {
    "street" : "Sample",
    "country" : "Earth",
    "Street" : "Madison street"
  }
}

let copydata = _.cloneDeep(data)

data.address.street = "Changed Street";

console.log("data => ",data);

console.log("==================================================================");


console.log("copydata =>",copydata)</code></pre>
<!-- /wp:code -->

{% replit @ganeshmani/shallodeepcopy %}

<!-- wp:heading {"level":4} -->
<h4>Recent Articles</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/10/crafting-multi-stage-builds-with-docker-in-node-js/">Crafting multi-stage builds with Docker in Node.js</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/09/building-a-production-ready-node-js-app-with-typescript-and-docker/">Building a Production – Ready Node.js App with TypeScript and Docker</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/09/pm2-for-node-js-developers/">PM2 for Node.js developers</a></p>
<!-- /wp:paragraph -->