Introduction to JavaScript Spread Operator. On the screen, I have a numbers array, and I will use a template literal to demonstrate the spread syntax. Console.log, backticks, dollar sign, curly brackets, square brackets, and now, I will type three dots. And this is the spread operator. And I will attach those three dots to the numbers array. I'm gonna execute this, and in the console, there's a string expression of one, two, three, four, five. Note they're not surrounded by square brackets. These are individual elements, separated by a comma. So what's happening here is that the spread operator allows the expansion of an iterable, such as an array, into its individual elements. And because of the way it works, it can be used in place of many built-in array methods.

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.

The spread operator allows for deep copies of non nested data in iterables. I'm referring to, in this case, a non multi-dimensional array, which means that there's no need to worry about any potential side effects. But, when dealing with shallow copies, there are side effects, and this can happen when working with nested iterables. Another purpose of the spread operator is array concatenation. Now JavaScript does have a built-in concatenation method. And to demonstrate this, I'm gonna begin by pasting in two arrays. Array A, that has the element values of one, two, three, and array B, that has the element values of four, five, and six. And I want to merge the values of these two arrays together using a new array, const ab equals square brackets.

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.