What is the spread operator?

In JavaScript, the spread syntax referes to the use of ellipsis or 3 dots (...) to expand an iterable array or object.

Syntax of spread operator is same as Rest parameter but it works in the exact opposite of it. Just one of JavaScript's quirks!

Syntax

        var arr = [...iterable];
                

In the aboves syntax, the ... is the spread operator.

What can the three dots do?

The spread operatoris useful for many comman tasks in JavaScript. Here are some of them:

• Copying Arrays / Objects
• Combining Arrays / Objects
• Adding items to Arrays / Objects
• Destructuring Fun
• As an argument
• Rest parameter (...)

Copying Arrays / Objects

Using the ... spread operator you can conveniently copy an object / array.

Array

        var arr = [1, 2, 3];
        var arr2 = [...arr];
        console.log(arr2); // [1, 2, 3]
                

Object

        var obj = {
            name: 'John',
            age: 30
        };
        var obj2 = {...obj};
        console.log(obj2);
        // {name: 'John', age: 30}
                

Combining Arrays / Objects

Using the ... spread operator you merge or concatenate objects / arrays.

Arrays

        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6];
        var arr3 = [...arr1, ...arr2];
        console.log(arr3); // [1, 2, 3, 4, 5, 6]
                

Objects

        var obj1 = {
            name: 'John',
            age: 30
        };
        var obj2 = {
            age: 40,
            job: 'developer',
        };
        var obj3 = {...obj1, ...obj2};
        console.log(obj3);
        // {
                name: 'John',
                age: 40,
                job: 'developer'
            }
                

Adding items to Arrays / Objects

Using the ... spread operator you can add items to arrays or objects.

Arrays

        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6];
        var arr3 = [...arr1, 7, ...arr2];
        console.log(arr3); // [1, 2, 3, 7, 4, 5, 6]
				

It can even be used with push and unshift methods

        // Adds arr2 items to end of array
        arr1.push(...arr2)
        //Adds arr2 items to start of array
        arr1.unshift(...arr2)
                

Object

        var obj1 = { hello: `👋🏻`};
        var obj2 = { world: `🌎`};
        var obj3 = {...obj1, ...obj2, love: '💙'};
        console.log(obj3);
        // {hello: '👋🏻', world: '🌎', love: '💙'}
                

Destructuring

Destructuring is a JavaScript feature that allows you to extract values from arrays and objects.

Array

	var arr = [1, 2, 3];
	var [a, b, c, d, e] = [...arr, 4, 5];
	console.log(a, b, c, d, e); // 1 2 3 4 5
				

Object

        let obj1 = {a: 1, b: 2};
        let {a, b, c} = {...obj1, c: 3};
        console.log(a, b, c); // 1 2 3
                

As an argument

You can use the spread operator to pass an array or object as an argument to a function.

        function sum(a, b, c) {
            return a + b + c;
        }
        let arr = [1, 2, 3];
        console.log(sum(...arr)); // 6
                

Rest parameter (...)

The rest parameter is a JavaScript feature that allows you to pass an arbitrary number of arguments to a function. But but but... how is it different from the previous examples?

The rest parameter is on the recieving side of the where as the spread operator is on the sending side.

Simply put, the rest operator takes all remaining elements (this is the reason it's named rest, as in the rest of the elements :P ) and puts them into an array.

        function sum(...args) {
            return args.reduce(
                (a, b) => a + b
            );
        }
        console.log(sum(1, 2, 3, 4, 5)); // 15
                

The rest parameter can be used while destructuring as well.

        let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
        console.log(x); // 1
        console.log(y); // 2
        console.log(z); // { a: 3, b: 4 }
                

Conclusion

The spread operator is a very powerful feature in JavaScript added in ES6.

I like the fact that it's so easy to use yet very powerful, makes working with arrays and objects much easier.

Knowing spread operators definitely saves you a lot of time when coding. It also makes your code more readable and maintainable.

I hope this article helped you learn a little bit about the spread operator.