Different methods to copy an object in JavaScript

Different methods to copy an object in JavaScript

Different methods to copy an object in JavaScript. It turns out there are a lot of different ways to duplicate objects

In JavaScript, a variable can store two types of data:

  • Primitive
  • Reference

When we copy primitive values, only the value will be copied.

var a = 10;
var b = a;
console.log(a, b); // 10, 10
b = 20;
console.log(a, b); // 10, 20

This is image title

When we copy primitive values, only values are copied.

But when we copy reference values, the memory address of the object is shared.

var a = { one : 1};
var b = a;
a.one = 2;
console.log(b.one); // 2
b.one = 3;
console.log(a.one); //3

This is image title

When we assign the object to other variables, only the memory address is copied.

Once we change the property of a or b, we are changing the value at the address of the object.

This is image title

When the property of the object is changed, the changes are reflected in all variables pointing to the object.

If we want to copy a primitive value, we can use assignment operator (=), but for objects we cannot use the assignment operator.

When copying objects, there are two types:

  • Shallow copy
  • Deep copy

When we shallow-copy a source object to a target object, if the property value of the source object is primitive, then the value is copied to the target object. But if the property value of the source object is reference, then the reference is shared between the source and target objects.

In a deep copy, all the properties (including reference) of the source object are copied as values to the target object. There is no sharing of the reference between the source and target objects.

This is image title

Difference between shallow and deep copy

Shallow Copy

Using the spread operator

var obj = {one : 1, two : 2};

var copiedObj = {...obj};

copiedObj.one = 3;

console.log(copiedObj.one); // 3

console.log(obj.one); // 1

copyobjBySpread.js

The spread operator will copy all the enumerable properties of the obj to the copiedObj.

Using loop

function copy(sourceObj) {
  let targetObj = {}; 
  let keys = Object.keys(sourceObj);

  for (let i = 0, len = keys.length; i < len; i++) {
    let key = keys[i];
    targetObj[key] = sourceObj[key]; 
  }
  return targetObj;
}

copyobjByFor.js

This above code will loop through all the properties of the object and copy the value to the target object.

Object.assign

var source = {one : 1, nested: {two : 2}};
var target = Object.assign({}, source);

Deep Copy

Using JSON.stringify and JSON.parse

function JSONCopy(source) {
  return JSON.parse(JSON.stringify(source));
}

Jsoncopy.js

JSON.stringify and JSON.parse only work with number, string, and object literals and don’t support function or symbol properties.

Also, if the value of the property in the object is Date, then using JSON.stringify will convert the Date object to a string.

var a = { d : new Date() };
var b = JSON.parse(JSON.stringify(a));
b ; // {d: "2019-11-26T00:28:18.775Z"}

What is a circular object?

var a = {}; 
a.a = a;

Circular objects are objects that have a property value referencing to themselves.

When we perform a deep copy of a circular object, it goes on endlessly. JSON.stringify/parse will throw an exception error when we perform a deep copy on a circular object.

We can use Object.assign to copy a circular object — but avoid creating a circular object in the first place.

Implementing Custom Clone

In the deepClone method, we will loop through all the properties of the object. If the value of the object is primitive, just copy it. If the value is reference, call the deepclone method.

function isObject(obj) {
  var type = typeof obj;
  return (type === 'function' || type === 'object') && !!obj; // this will handle obj , null and undefined
};

function deepClone(src) {
  let target = {};
  let keys = Object.keys(src);
  for (let i = 0, len = keys.length; i < len; i++ ) {
    let key = keys[i];
    if (src.hasOwnProperty(key)) {
      // if the value is a referece(object), recursively copy all properties by calling deepClone
      let val = src[key];
      let isObj = isObject(val);
      if (isObj) {
        target[key] = deepClone(val);
      } else {
        target[key] = val;
      }
    }
  }
  return target;
}

deepcopy.js

All the above methods only focus on objects, not arrays. They may not work for arrays.

Thanks for reading, and I hope you liked this piece.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.

Programming a Javascript Simon Game Tutorial

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

Understanding Memoization And Dynamic Programming in Javascript

In this Javascript tutorial I will explain what memoization is, how to use it, when you should use memoization, how to use memoization, what dynamic programming is, how to use memoization in dynamic programming. Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it.