Cloning In Javascript Object

Cloning an object means assigning/copying the values of a variable (previously declared and assigned) to a newly declared variable (assigned now). Copying objects in JavaScript can be a tricky part. You can perform a shallow copy, or deep copy, whereas shallow copy is the default behavior in most of the cases.

Shallow Copy

In a shallow copy, values are cloned, and objects references are copied (not the objects themselves), so if you edit an object property in the original object, then it also gets modified in the copied object, since the referenced inner object is the same.

  1)  Object.assign()

const original = {
  name: 'Fiesta',
  car: {
    color: 'blue'
  }
}
const copied = Object.assign({}, original)

original.name = 'Focus'
original.car.color = 'yellow'

copied.name //Fiesta
console.log(copied); 
copied.car.color //yellow

2) Using JSON Parse and JSON Stringify

Here we are using the variable source value to clone it to a variable called as target. In here JSON.stringify will convert the source object to the string and then JSON.parse use to convert it to target variable.

let source = {a:1, b:2, c:3};
const target = JSON.parse(JSON.stringify(source));
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source); // {a: "a", b: 2, c: 3}
console.log(target); // {a: 1, b: 2, c: 3}

  3) Using Object Spread Operator
This feature is added in ES6/ES2015 (ES stands for ECMAScript ) which provides a very convenient way to perform a shallow clone, equivalent to what Object.assign() does.

let source = {a:1, b:2, c:3};
const copied = { ...source }
copied.a = 10;
console.log(copied);
console.log(source);

Deep copy

A deep copy will duplicate every object it encounters. The copy and the original object will not share anything, so it will be a copy of the original.
  1) Using iteration

This is one of the working solutions for deep cloning but not the best one as this will have to iterate each and every time you need to clone an object. This cloning is done using iteration of the variable and this works completely fine with the deep copy.

 

function iterationCopy(src) {
  let target = {};
  for (let prop in src) {
    if (src.hasOwnProperty(prop)) {
      target[prop] = src[prop];
    }
  }
  return target;
}
const source = {a:1, b:2, c:3};
const target = iterationCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 10;
console.log(source); // { a: 10, b: 2, c: 3 }
console.log(target); // {a:1, b:2, c:3}

That’s all for today on how to Deep Clone A Javascript Object in JavaScript, if you still have issues feel free to comment below