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)
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.
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
Nice catch ! fixed .Thank you !!
You highly welcome
This is a great article.
I would love to read a part 2 on pass by reference and pass by value. ❤️
Thank You sure i will try to write it soon as i can .
Thank you very much
thanks alot!!!! was stuck at this from 2 days :/
learned something new.