Mohamed Benhida

admin@devma.net

February 3, 2018

Copying Objects And Arrays in Javascript

We all faced that error when we want to copy an array or an object to a new variable, but we end up by changing the first variable when we modified the new one.

Arrays

So in this example we  have an array variable

let array = ["John","Doe","Alex"]

we create a new variable array1 that takes the value of array

let array1 = array

console.log(array1)
//["John", "Doe", "Alex"]

Now if we modified the array1[2] for example 

array1[2] = "David"

console.log(array1)
//["John", "Doe", "David"]

console.log(array)
//["John", "Doe", "David"]

devma

We notice that if we change the array1 our original array get changed too.

So to prevent that we have a mutiple methods :

-> We could use ES6

let array = ["John","Doe","Alex"]

let array1 = [...array]

array1[2] = "David"

console.log(array1)
//["John","Doe","David"]

console.log(array)
//["John","Doe","Alex"]

devma

-> array.slice()

let array2 = array.slice()

console.log(array2)
//["John","Doe","David"]

console.log(array)
//["John","Doe","Alex"]

devma

-> [].concat(array)

let array3 = [].concat(array)

console.log(array3)
//["John","Doe","David"]

console.log(array)
//["John","Doe","Alex"]

devma

Now you know how can you deal with arrays let see about objets.

 

Objetcs

let object = { name:"John",age:23 }

let object1 = object

console.log(object1)

//{name: "John", age: 23}
object1.age = 22

console.log(object1)
//{name: "John", age: 22}

console.log(object)
//{name: "John", age: 22}

devma

We found the same error as the arrays if we change the new var it changes the original one too.

So let's find out how can we fix this with objects.

We could use Object.assign({},object) we pass our existing object to an empty one.

let object = { name:"John",age:23 }

let object2 = Object.assign({},object)

console.log(object2)

//{name: "John", age: 23}

object2.age = 12

console.log(object2)
//{name: "John", age: 12}

console.log(object)
//{name: "John", age: 22}

devma

But is not all working fine if we add a second object inside the first one we will have the same error like this

let object = {person : { name:"John",age:23 } }

let object3 = Object.assign({},object)

console.log(object3)

//{person : { name:"John",age:23 } }

object3.person.name = "Doe"

console.log(object3)
//{person : { name:"Doe",age:23 } }

console.log(object)
//{person : { name:"Doe",age:23 } }

devma

So we need to make a better is solution we convert the object to string then we parse it again using JSON.parse(JSON.stringify(object))

let object = { person : { name : "John" , age : 23 }}

let object4 = JSON.parse(JSON.stringify(object))

console.log(object4)
//{person : { name:"John",age:23 } }

object4.person.name = "Doe"

console.log(object4)
//{person : { name:"Doe",age:23 } }

console.log(object)
//{person : { name:"John",age:23 } }

devma

I hope you enjoyed reading this post. Thanks For Reading 

© Mohamed Benhida.

Blog | Packages | About