Referencing and Cloning Array in Js
Some concepts you learn only when you lose some sleep over a bug fix.
Let's talk about Array Referencing in Javascript and React.
In Javascript unlike other languages when you store an array value in a new variable using the ' = ' operator, It doesn't create a copy of the array and stores it.
What it actually does is that it creates a reference to the original array to save memory. But the downside of this method is that when the new array is modified, we end up changing the original array values as well
For Example:
Here, you can see when we store a1 array to a2 and modify a2[2] values, it is also reflected in a1[2]. Which is very unlikely. Well, that's because arrays in JS are reference values, so when you try to copy it using the '=' it will only copy the reference to the original array and not the value of the array.
What is the issue with Reference values?
If you ever dealt with Redux or any state management framework. You will know immutability is super important. Let me briefly explain. An immutable object is an object where the state can't be modified after it is created. The problem with JavaScript is that arrays are mutable. So the above situation can happen. Even though you are passing array in props. Its values will still be altered.
Take some time to digest that.......
Ok, that's why cloning an array is very important when dealing with redux or props.
Fortunately, ES6 Js has spread operator (... ). Using spread operator we can create a shallow copy of the array which will not be reflected in the original array if modified.
Like This,
Recommended by LinkedIn
See, but did you noticed I mentioned a Shallow copy of the array.
It means that the spread operator can only go one level deep when copying an array. It won't work if you are working with a deeper level of an array that contains objects, another array, etc. As shown below.
So if you're trying to copy a multi-dimensional array, you will have to use other alternatives.
There is also a method we can use Array.from(var) which is used to create a new array but it still won't iterate to the deepest level if the array is too large or complex.
So we can't use these methods to create a complete clone of any array.
Fortunately in Javascript has methods such as JSON.parse and JSON.stringify which iterates through all the values and returns a new value. We can use them as a walk-around to create a Deep Copy of an array.
JSON.parse(JSON.stringify(array));
Here, we are converting the array to JSON string and again back to Javascript object. Just for the sake of getting a new copy of the same old array.
Here you go, hope you got the difference between referencing and cloning in Js.
Happy Coding :)
Thanks bro for sharing about JSON.parse(JSON.stringify(array)). Uptill now I was only aware about spread operater in JS and I too faced the same issue of shallow copying of a array. But now I understood that with this new method we can get Deep copying. ✌️
Great writing! Just want to point out that, you mentioned that array being mutable is a "problem" in javascript. That's not true! Arrays, dictionaries, lists etc. should infact be mutable and this is what is being taken care of by almost every major language and for good reason. Immutable data types makes code safer by achieving strict control thus making your program more predictable! So primitive data types must be immutable for programs to run properly and give security as well! But the caveat is memory footprint! So this is why primitive data types must be immutable while the rest inorder to save memory and also computation time, they should be mutable. Data structures like dictionaries, lists, arrays etc have a good memory footprint, its just that we don't see it! So, it must be mutable thats the nature of these data structures! So, mutable arrays and lists is not a disadvantage but a feature! So, we need to work around on when we must create a copy to maintain state like the scenario you have explained.
Thanks for sharing