- Learn how to about the side effects when working with spread operators.
Now on the screen, there is an array, named Weekdays, with the abbreviated weekday names of the week. One use case of the spread operator is constructing a new array literal, using elements from another array. I'm gonna make a new array, const, days of the week equal square brackets. And now, for the first element, I will type the spread operator, attaching it to the weekdays array. I will also add two additional elements with the abbreviated the names for Saturday and Sunday. Now I'm gonna console log days of the week. In the console, I have a new array that has the elements from the weekdays array, along with the additional elements that I added to the days of the week array.
For the first element, I'm gonna use the spread operator on the A array. For the second element, I will use the spread operator on the B array. So we can guess what's gonna happen here. Since the spread operator will expand each array into its individual elements, I'm gonna console log ab. And, in the console, there is a merged array with the values of one, two, three, four, five, and six. And order matters. If I had done B first, the new array would be four, five, six, one, two, three. Now, originally, spread syntax only worked on arrays, but that change with ES9, also known as is ES2018, which allowed for the use of the spread operator on objects, allowing for the expansion of an object into individual key value pairs.
On the screen, I have a car object with the properties of make, model, and color. And, using the spread operator, I'm gonna make a new object from this car object, while introducing something new. Unlike arrays, it's really easy to replace the values of properties when using the spread operator and creating a new object. To begin, I will type const newCar equals curly brackets. And, for the first property, I will use the spread operator on the existing car object. Now, if I were to leave this as it is, the new car object would have the same properties and values as the original car object. But now, I'm gonna type model and give it a value of Camry, along with the property of color, with a value of blue. And now, I will console log the new car. In the console, the new car object has the three original properties from the car object and the values of color and model have been updated.
What has happened here is, when using the spread operator, if there are two same name properties, the one that's defined last will be the one that is used. And I'm gonna demonstrate this further by merging the car object with the new car object inside of a new car two object. I'm gonna replace the console log with const newCarTwo equals curly brackets. And, for the first property, I'm gonna use the spread operator on car. And, for the second property, I'm gonna use the spread operator on the new car object. And I will console log newCarTwo to display its value.
So two things have happened here. First, I have merged two objects into a new object using the spread operator. Second, the results of the new car two object matches the same properties and values of the new car object. And this is because order matters when working with spread operators inside of objects. As mentioned earlier, because it was listed last, any properties in the new car object will take precedence over the car object as a proof of concept. Then we reverse the spread operators inside of the new car two object. And I will run the console log again. And now, the car two object properties and values matches the car object because it was defined last inside of the new car two object.
One last item. Just like a regular object literal, even when using the spread operator, new properties can be added to the object. I will add two new properties to the new car two object. First, door with a value of four and drive with a value of AWD. I will execute the console log again. And now, the new properties are part of the object literal. Of course, if these properties conflicted with the properties from the spread syntax, because they were defined after the previous properties, they would take precedence. 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.