Reference And Copying Objects & Arrays in Javascript
Tags: javascript
Published: 2018-02-03 23:48:54

---
title: Reference And Copying Objects & Arrays in Javascript
published: true
description: 
tags: #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.

<span style="text-decoration: underline;">_**Arrays**_</span>

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](https://image.ibb.co/mded9R/Screen_Shot_2018_02_03_at_10_47_43_PM.png "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](https://image.ibb.co/eDm3b6/Screen_Shot_2018_02_03_at_10_55_55_PM.png "devma")

-> array.slice()

    let array2 = array.slice()

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

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

![devma](https://image.ibb.co/mCpZim/Screen_Shot_2018_02_03_at_10_59_46_PM.png "devma")

-> [].concat(array)

    let array3 = [].concat(array)

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

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

![devma](https://image.ibb.co/mJ4Zim/Screen_Shot_2018_02_03_at_11_02_25_PM.png "devma")

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

_<span style="text-decoration: underline;">**Objetcs**</span>_

    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}

![devma](https://image.ibb.co/j37LOm/Screen_Shot_2018_02_03_at_11_05_18_PM.png "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}

![devma](https://image.ibb.co/djLUG6/Screen_Shot_2018_02_03_at_11_09_30_PM.png "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](https://image.ibb.co/jDYo9R/Screen_Shot_2018_02_03_at_11_13_53_PM.png "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](https://image.ibb.co/nbJc3m/Screen_Shot_2018_02_03_at_11_18_46_PM.png "devma")

I hope you enjoyed reading this post. Thanks For Reading