DEV Community

mohamed benhida
mohamed benhida

Posted on • Edited on

Reference And Copying Objects & Arrays in 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"]
Enter fullscreen mode Exit fullscreen mode

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

let array1 = array

console.log(array1)
//["John", "Doe", "Alex"]
Enter fullscreen mode Exit fullscreen mode

Now if we modified the array1[2] for example 

array1[2] = "David"

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

console.log(array)
//["John", "Doe", "David"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

devma

-> array.slice()

let array2 = array.slice()

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

console.log(array)
//["John","Doe","Alex"]
Enter fullscreen mode Exit fullscreen mode

devma

-> [].concat(array)

let array3 = [].concat(array)

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

console.log(array)
//["John","Doe","Alex"]
Enter fullscreen mode Exit fullscreen mode

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

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

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

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: 23}
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

devma

I hope you enjoyed reading this post. Thanks For Reading

Top comments (8)

Collapse
 
braiansp profile image
Braian Silva

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.

Collapse
 
abolore1 profile image
abolore1

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} // the age suppose to be 23 .I guess it is typo

Collapse
 
simo_benhida profile image
mohamed benhida

Nice catch ! fixed .Thank you !!

Collapse
 
abolore1 profile image
abolore1

You highly welcome

Collapse
 
kepta profile image
Kushan Joshi • Edited

This is a great article.
I would love to read a part 2 on pass by reference and pass by value. ❤️

Collapse
 
simo_benhida profile image
mohamed benhida • Edited

Thank You sure i will try to write it soon as i can .

Collapse
 
klukiyan profile image
Kiril Lukiyan

Thank you very much

Collapse
 
ganeshw92 profile image
ganeshw92 • Edited

thanks alot!!!! was stuck at this from 2 days :/
learned something new.