An optimal solution to shallow clone is Deep clone

Problem : Not pure copy , accidental mutation

const array1 = ['hrithik', 'suman', 'Dinesh'];

const array = array1;

array[0] = 'sumi'

console.log(array1, array);

(3) ["sumi", "suman", "Dinesh"]0: "sumi"1: "suman"2: "Dinesh"length: 3__proto__: Array(0)

(3) ["sumi", "suman", "Dinesh"]0: "sumi"1: "suman"2: "Dinesh"length: 3__proto__: Array(0)

• both get changed in above code snippet because they are referenced value

To avoid accidental mutation , we have four concept:

concat(),from(),slice(),spread()

Using spread operator :

const baseSquirtle = {

name: 'Squirtle',

type: 'Water'

};

const squirtleDetails = {

species: 'Tiny Turtle Pokemon',

evolution: 'Wartortle'

};

const squirtle = {...baseSquirtle,

...squirtleDetails

};

baseSquirtle.name = 'hello'

console.log(baseSquirtle, squirtle);

 

// this is a shallow copy concept

  "test above code snippet yourself"

• BUT there is a problem with nested object, performs shallow copy, means only the top level
• elements are copied but nested object gets referenced

Nested problem

const originalArray = ['100', '200', '300', {

'a': ' not changed'

}];

const slicedArray = originalArray.slice(0);

slicedArray[0] = 'slice'

slicedArray[3]['a'] = 'changed'

console.log(originalArray, slicedArray);

output:Array(4)

0: "100"1: "200"2: "300"3:a: "changed"__proto__: Objectlength: 4__proto__: Array(0)

Array(4)0: "slice"1: "200"2: "300"3: {a: "changed"}length: 4

In above code snippet, we see pure copy of elements for top level  

elements but for nested element that is object in your case is  

changed in both case since it a reference doesnot perform shallow copy.

Eg:2

const originalArray = ['100', '200', '300', {

'a': ' not changed'

}];

const copiedArray = [...originalArray];

copiedArray[0] = 'spread'

copiedArray[3]['a'] = 'changed'

console.log(originalArray, copiedArray);

Array(4)0: "100"1: "200"2: "300"3: {a: "changed"}length: 4__proto__: Array(0)

Array(4)0: "spread"1: "200"2: "300"3: {a: "changed"}length: 4

NOTE : same case for spread operator, performs 

shallow copy butdoesnot perform shallow copy for

nested object

object.assign({}, Sourceoj) : same case for object.assign()

const sourceObj = {

age :1,

gender : 'male',

hobbies : ['cricket', 'carrom']

}

const copiedObj = Object.assign({}, sourceObj)

copiedObj.age = 100

copiedObj.hobbies[0] = 'coding'

console.log(copiedObj, sourceObj);

output:

age: 100, gender: "male", hobbies: Array(2)}age: 100gender: "male"hobbies: (2) ["coding", "carrom"]__proto__: Object

{age: 1, gender: "male", hobbies: Array(2)}age: 1gender: "male"hobbies: (2) ["coding", "carrom"]

The solution to this problem is deep copy.

Deepcopy :

• we need   Jsonparse(Json.stringify(Array));

A common use of JSON is to exchange data to/from a web server.

When receiving data from a web server, the data is always a string.

Parse the data with JSON.parse(), and the data becomes a JavaScript object.

Use the JavaScript function JSON.parse() to convert text into a JavaScript object:

const sourceobj2 = {

age: 1,

gender: 'male',

hobbies: ['cooking', 'dancing', 'cricket']

}

const parseObj =

 

JSON.parse(JSON.stringify(sourceobj2))

parseObj.age = 300

parseObj.hobbies[0] = 'coding'

console.log(sourceobj2, parseObj);

age: 1, gender: "male", hobbies: Array(3)}age: 1gender: "male"hobbies: (3) ["cooking", "dancing", "cricket"]__proto__: Object

{age: 300, gender: "male", hobbies: Array(3)}age: 300gender: "male"hobbies: (3) ["coding", "dancing", "cricket"]

A common use of JSON is to exchange data to/from a web server.

When sending data to a web server, the data has to be a string.

Convert a JavaScript object into a string with JSON.stringify().

1.