by Ashay Mandwarya 🖋️💻🍕

An introduction to Spread syntax in JavaScript

What is it and why do we need it?

Photo by Anton Darius | @theSollers on Unsplash

The spread syntax was introduced in the ES6 specification of JavaScript. It since has proved to be a valuable piece of code making the code clean and easy to understand.

MDN defines as:

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Let’s all agree that the above definition is a handful and none of us caught a word it is trying to say. So let’s start with the most basic things about the spread syntax.

  • The spread operator is just 3 dots ...
  • It can be used on iterables like an array or a string.
  • It expands an iterable to its individual elements
  • It can provide a function call with an array (or any other iterable) where 0 or more arguments were expected.

Example

The below snippet contains a function called sum which expects 3 arguments x, y, and z. We have an array with 3 elements, and we want to pass the elements in the array as the arguments for the function.

Before the spread operator was introduced, this was done via the apply function.

After the introduction of the spread operator, it could be done very simply:

As can be seen from the above snippet with the spread operator, we do not have to use the apply function. This saves us from writing more code.

The above example gives a very rough and brief idea about the spread operator. First, let’s get into more details regarding the same, and then we will see more examples.

Syntax

The spread operator can be used in many ways and scenarios such as

  • Inside function calls

When used in the above scenario the is called the rest parameter. We will see examples related to this in the examples section.

  • Creating/Extending an array/iterable:

Examples

  • As rest

… is used as an argument for a variadic function. A variadic function is a function which can have a variable number of parameters.

Here when we return args, we see that we get back our array which we passed as separate values in the call. This shows that the rest operator actually works exactly opposite of the spread syntax. One expands and one condenses the value.

One more thing to point out is that there is no specific number of parameters mentioned in the function definition. This means using … the function can have n number of arguments. We do not need to specify the parameters beforehand.

This is particularly a very flexible way of receiving arguments for a function for which the specific numbers of arguments aren’t determined like the Math.max and Math.min function. They are variadic functions as the numbers of inputs can be infinite for them.

Back to the example, to get the sum of all the arguments

We have to iterate the array and add all the individual elements to produce the result.

  • Push elements in an array

push() function is used to push elements into an array. The limitation with push is that we have to push elements one by one (push(1,2,3)). If there is an array whose elements are to be inserted in the array using push we will get a multidimensional array, which we did not ask for.

Again apply to the rescue

As we can see that using apply does not look very elegant and we need a simple and small syntax to do that. Let us use spread …

Elegant!

  • Copying an array

Simple!

The same result can be produced using an object

  • Concatenating 2 arrays

Concatenation is done using the concat function

Same can be achieved using the … operator

  • Converting a string to an array

This can be done using both the split function and the … operator

  • Use in max and min functions

The below snippet tends to find the maximum element in the array, so we pass the whole array in the function but we get the result as NaN

We can use apply, but as seen from the previous examples I hate using it

Same for min

Conclusion

We saw many situations where the spread operator comes in handy and reduces our code and also makes it super easy to understand.

If you like it Clap👏 and Follow👣 for more.

Google