The Spread Operator in Javascript

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.

The result of the console.log will in fact be this

[ 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>

The result will be this array

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

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" }

Good Luck!