This practical course explores JavaScript deep/shallow copy mechanisms and how they are generated with the spread operator. Deep and shallow copies may occur when a JavaScript variable is assigned to another variable.
Learning Objectives
- Learn how the shallow copy can occur in JavaScript.
- Learn the meaning of deep copy.
- Learn how spread operators can create deep or shallow copies of other data collections.
Intended Audience
This course is intended for anyone who wants to learn about what are JavaScript Deep/Shallow copies along with their interactions with the spread operator.
Prerequisites
Anyone with an interest in using the deep/shallow copies in JavaScript or who wants to improve their knowledge of JavaScript in general.
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.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.