Spread operator(...) in Javascript with examples

The spread operator allows an expression to be expanded in places where multiple values are expected. This is helpful in places like function calls, array literals or object literals where multiple values are used.

The spread operator syntax consists of three dots(…) prefixed to the iterable object. In this section, we will go through some examples to illustrate the spread operators.

Spread operator in arrays

We will first look at how to use the spread operator in the case of array literals.

let numbers = [1, 2, 3];

console.log(numbers); // [1, 2, 3]
console.log(...numbers); // 1 2 3

In the above example, we have declared an array numbers. We then log the values of numbers with and without the spread operator. As you can see, the spread operator expanded the values of the array(1 2 3). Similarly,

let greeting = ["Hello there! ", "what a ", "wonderful day."];

console.log(...greeting); // Hello there!  what a  wonderful day.

We will next look at an example of concatenating arrays using spread. Let’s say we have an array numbers and we want to concatenate it with newNumber. We can do so by making use of the concat method.

let numbers = [1, 2, 3],
    newNumber = 4;

let newArray = numbers.concat(newNumber);

console.log(newArray); // [1, 2, 3, 4]

Let’s use the spread operator to perform the same operation.

let numbers = [1, 2, 3],
    newNumber = 4;

let newArray = [...numbers, newNumber];

console.log(newArray); // [1, 2, 3, 4]

Similarly, let’s look at an example to concatenate two arrays.

let arr1 = [1, 2, 3],
    arr2 = [4, 5, 6];

let newArray = [...arr1, ...arr2];

console.log(newArray); // [1, 2, 3, 4, 5, 6]

Using spread in functions

Now let us look at how spread can help us during a function call. Suppose we have an array that needs to be passed as multiple arguments to a function. In es5, we can pass each element of array using the index.

let numbers = [1, 2];

function sum(a, b) {
    console.log(a); // 1
    console.log(b); // 2

    return a + b; // 3
};

let total = sum(numbers[0], numbers[1]);
console.log(total);

In this example, we have a function sum that takes two arguments. To pass the array numbers as arguments, we can specify each element like number[0] and number[2] while calling the sum function.

However, spread makes it easy for us to pass an array as arguments. The spread operator when used during a function call will expand the array as arguments and assign elements of array to arguments. For example,

let numbers = [1, 2];

function sum(a, b) {
    console.log(a); // 1
    console.log(b); // 2

    return a + b; // 3
};

let total = sum(...numbers);
console.log(total);

Here, we pass the array numbers during the function call with spread operator. The spread operator will expand the array such that first element 1 gets assigned to argument a and second element 2 gets assigned to argument b.

Using spread in objects

The spread in Javascript objects can be used to copy over properties from one object to another. It can also be used to combine objects. Let’s look at some examples.

const car = {
    wheels: 4
};

const ford = {...car};

console.log(ford); // {wheels: 4}

In this example, car is any object with property with a single property wheels. We can copy this object into a new object using the spread operator {...car}. If the new object consists of additional properties and you specify them accordingly.

const car = {
    wheels: 4
};

const ford = {
    ...car,
    'speed': 300
};

console.log(ford); // {wheels: 4, speed: 300}

Note that, the spread operator creates a shallow copy of the object. To illustrate this look at the example below:

const car = {
    wheels: 4
};

const ford = {...car};

car.wheels = 8;

console.log(car); // {wheels: 8}
console.log(ford); // {wheels: 4}

Here, we copied the car object in ford and later changed the value of the property wheels to 8 in the car object. But this change does not get reflected in object ford.

Let’s add another property tyres which will be an object.

const car = {
    wheels: 4,
    tyres: {
        brand: 'Good Year'
    }
};

const ford = {...car};

console.log(car); // {wheels: 4, tyres: {brand: 'Good Year'}}
console.log(ford); // {wheels: 4, tyres: {brand: 'Good Year'}}

Now, let’s change the car object’s tyres property such that it has a different brand name.

const car = {
    wheels: 4,
    tyres: {
        brand: 'Good Year'
    }
};

const ford = {...car};

car['tyres']['brand'] = 'Bridgestone';

console.log(car); // {wheels: 4, tyres: {brand: 'Bridgestone'}}
console.log(ford); // {wheels: 4, tyres: {brand: 'Bridgestone'}}

As you can see, we changed the car object not the ford object but still the ford object gets changed. This shows that the spread operator only shallow copies the object.

Spread operator in arrays#

Using spread in functions#

Using spread in objects#

Spread operator in arrays

Using spread in functions

Using spread in objects