Spread Operator in JavaScript

With ES6, the spread operator was introduced. If you’ve seen three dots in your code followed by an iterable (…arr), it is exactly what we are talking about.

The spread operator expands the iterable in place and provides a shorter syntax for a bunch of operations. But, what does that even mean?

Let’s go through a couple of simple examples to understand it better:

Example 1:

Concatenating Arrays: Say we have two arrays:

let arrayFirst = [1, 2, 3];
let arraySecond = [4, 5, 6];

Now, if we want to concatenate the arrays, we would write something like:

let newArray = arrayFirst.concat(arraySecond);
console.log(newArray);
> [1, 2, 3, 4, 5, 6]

Let’s try doing this with the spread operator:

let newArrayUsingSpreadOperator = [...arrayFirst, ...arraySecond];
console.log(newArrayUsingSpreadOperator);
> [1, 2, 3, 4, 5, 6]

In the second scenario where we use the spread operator, what the JS engine does is it expands arrayFirst and arraySecond in-place, and the newArrayUsingSpreadOperator is assigned with the array [1, 2, 3, 4, 5, 6].

We can even do something like:

let insertIntoArray = [0, ...arrayFirst, ...arraySecond, 7, 8, 9];
console.log(insertIntoArray);
> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Example 2:

Cloning Arrays: Say we want to make a copy of an existing array to mutate it:

let array = [1, 2, 3];
let arrayCopy = array;

Now if we want to add new elements just to arrayCopy, the original array is also modified since the = operator does not create a new reference for the cloned array.

arrayCopy.push(4);
console.log(array);
> [1, 2, 3, 4]
console.log(arrayCopy);
> [1, 2, 3, 4]

We see above that the original array also changes. This can be avoided by cloning the original array using the spread operator. You will notice that mutating the copied array does not modify the original array since it creates a new reference for the array:

let arrayCopy = [...array];
arrayCopy.push(4);
console.log(array);
> [1, 2, 3]
console.log(arrayCopy);
> [1, 2, 3, 4]

The only gotcha here is that the cloning with a new reference works only for the first level. So if you have nested arrays, using the spread operator will not solve the reference problem.

Example 3:

Function Calls: Consider we have a function with takes in three numbers and returns the sum of the numbers. we can use the spread operator in the following way:

const funcSum = function(num1, num2, num3){
 let sum = num1 + num2 + num3;
 return sum;
}
console.log(funcSum(...arrayFirst));
> 6

The output of this function will be 6. Again, what happens here is that the spread operator expands the array in-place. So the function call looks something like funcSum(1, 2, 3). This looks so much better and cleaner than using something like:

funcSum(arrayFirst[0], arrayFirst[1], arrayFirst[2]);

Example 4:

Object Literals: The spread operator can also be used with objects. However, it works a little differently. Let’s look at an example where the spread operator is used to make a copy of an object with additional properties:

let a = {'firstName': 'John', 'lastName': 'Doe'}
let b = {'city': 'XYZ', 'zip': '12345'}
let c = {...a, ...b}
console.log( c );
> {city: "XYZ", firstName: "John", lastName: "Doe", zip: "12345" }

The spread operator can be used to create objects with new or updated properties. For example:

let a = {'firstName': 'John', 'lastName': 'Doe'}
let b = {'city': 'XYZ', 'zip': '12345'}
let c = {'city': 'ABC'}
let d = {...a, ...b, ...c}
console.log( d );
> {city: "ABC", firstName: "John", lastName: "Doe", zip: "12345" }

The spread operator is definitely useful when working with arrays and objects in JavaScript and can save developers time while coding!