Introduction to JavaScript Deep/Shallow Copies and the Spread Operator. When working with the spread operator, you have to be aware of the potential issues with deep and shallow copy. To begin, on the screen I have a variable called name, which is assigned a value equal to Farish. And I also have another variable called first name, and that is set equal to the name variable. Now I'm going to execute the console log for first name. In the console, the assigned value for first name is Farish, which is equal to the assigned value of the name variable. Now I'm gonna uncomment the code below and comment out the initial console log.

Now the first name variable has been reassigned a new value equal to Stacy. I will execute both console logs and in the console, the first name displays the Stacy value and the name variable displays the Farish value. So this worked as expected and it will always work as one would expect when dealing with primitive data types that have been assigned to variables. The roles change when collections of data, such as arrays, are assigned to variables. Now on the screen, I have a variable called numbers, which is assigned to an array with the values of one, two and three. I also have a numbers copy variable, and that is equal to the numbers array. When I execute the console log for numbers copy, the values displayed matches the numbers variable values.

Now below the console log, I'm going to access the numbers copy array at the index of one, and I'm going to set it to a new value equal to five. I'm going to comment out the console log above and uncomment both the console logs below. I'm going to execute the console logs and both arrays at the index of one equal five. Does this mean if I change the value in the numbers copy array, it will change that value for the same index in the numbers array? Yes. Whenever you have a variable with a data collection data type such as an array, if you assign that variable as a value of another variable behind the scenes you aren't actually assigning a value. You're creating a memory reference from the new variable to the existing variable. And this is known as a shallow copy. Now, when working with the spread operator, the rules do change a little bit. So let's take a look.

On the screen I have two arrays, the first one named one D for one dimensional array and deep copy which is equal to a new array formed by using the spread syntax on the one D array. I will execute the console log and the values in the deep copy array matches what exists in the one D array. Now I'm gonna uncomment the additional code below and comment out console log. So on line 9, I'm changing the first value of the deep copy array to four. And I will now execute both console logs and there are two arrays with different first element values. When working with non-nested data within a interval, whenever using the spread operator, it creates a deep copy. And what is meant by the term deep copy? It means that when copying values from one variable to another, all memory references to the initial variable are removed, creating an independent copy. And when the new variable is manipulated, there's no side effects, but there is a scenario where the spread syntax can create a shallow copy.

Now on the screen, I have a multi-dimensional array named two D and at the index of three, instead of a single value I have another array. I also have another array name, shallow copy, which was created using the spread operator on the two D array. I will execute the console logs and on the right of the screen the results match, which is expected. Now I'm going to comment out the console logs and uncomment the additional code that is below. On line 10, I am changing the value of the first element of the inner array that is at the index of three to six. I will execute the console logs again and now on the right, both arrays match. When working with multi-dimensional arrays, the nested data portion of that array is treated as a shallow copy. This means that the inner array inside of the shallow copy variable is pointing to the inner array of the two D variable. The non nested data portion is a deep copy. There is no memory reference. Does this mean that you shouldn't use the spread operator on nested multi-dimensional arrays? No. It just means you need to be aware of the situation and you may have to use other options. And that's it. Thanks for watching at Cloud Academy.