Reference And Copying Objects & Arrays in Javascript

#javascript

We all faced that error when we want to copy an array or an object to a new variable we end up changing the original variable when we update 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"]

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"]

-> array.slice()

let array2 = array.slice()

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

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

-> [].concat(array)

let array3 = [].concat(array)

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

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

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 = 23

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

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

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: 23}

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 } }

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 } }

I hope you enjoyed reading this post. Thanks For Reading

Top comments (8)

Braian Silva • Mar 6 '20

Holly. I'm taking my time to fully understand this. Got linked from openclassrooms.com/en/courses/5664... and I can see how this is so helpful, thanks for the article.