With “spread operators”, introduced starting with ECMAScript 6 (ES6), it is possible to copy all or part of an existing array or object into another array or object, combine arrays or objects, and pass an array to a function as a topic.

The notation that identifies the spread operator is the three dots …

<script>
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
console.log(numbersCombined);
</script>

If we make a console.log of “numbersCombined”, we will see the new array

[ 1, 2, 3, 4, 5, 6 ]

The spread operator is often used in the destructuring of arrays (and objects), as in this example

<script>
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
console.log(rest);
</script>

By destructuring the “numbers” array, we obtained the variable “one” with value 1, the variable “two” with value 2, and the variable “rest” with value the array of residual elements.

[3, 4, 5, 6]

Let’s see an example of using spread operator with a function

<script>
function pippo(a, b, ...args) {
 console.log(args);
}

pippo(1, 2, 3, 4, 5);
</script>

The function foo receives as parameters “a”, “b”, and … the spread operator “args”: a is equal to 1, b is equal to 2, args is an array containing 3, 4 and 5.

Il risultato del console.log sarà infatti questo

[ 3, 4, 5 ]

In this further example we see how to use the spread operator to insert an array into another array

<script>
let x = ['A', 'B'];
let y = [...x, 'C', 'D'];
console.log(chars);
</script>

Il risultato sarà questo array

["A", "B", "C", "D"]

Finally let’s see how to use the spread operator to copy an array into a new array

<script>
var score = [50, 60, 70];
var copyscore = [...score ];
console.log(copyscore);
</script>

The result will be a “scorecopy” variable that contains the same value as the “score” variable

[50, 60, 70]

The spread operator and objects

Just as you can combine two arrays, you can combine two objects, as in the following example

<script>
const myCar = {
  brand: 'Audi',
  model: 'A3',
  color: 'nero'
}

const updateCar = {
  year: 2020, 
  color: 'giallo'
}

const myUpdatedCar = {...myCar , ...updateCar}
console.log(myUpdatedCar);
</script>

In the console we will see the new myUpdatedCar object which is nothing more than the combination of the two objects “myCar” and “updateCar”

{brand: "Audi", model: "A3", year: 2020, color: "giallo"}

As you can see, the object properties that have the same key (in our example the “color”) are inserted only once in the new object, with the value of the last property considered: this is why in our case the color is “ yellow”.

Let’s see another example in which we are going to “insert” one object into another

<script>
const person = {name:"mario", surname:"montella"};
const person2 = {... person, city:"naples"}
console.log(person2);
</script>

The variable “person2” will have this value

{ name: "mario", surname: "montella", city: "naples" }

Thank U! :)

The Spread Operator in Javascript

The spread operator and objects