An Introduction to the Javascript Spread Operator

Use-Cases of this Tutorial

A short introduction to the Javascript Spread operator, its use-cases along with examples.

Know how to create arrays using Spread operator.

Know how to pass multiple parameters to a function using the Spread operator.

The Spread operator is an ES6 feature, newly added in Javascript. In code it is denoted by ... (three dots).

Spread syntax will expand an iterable, such as an array or a string. Expansion here means that the input object is broken down to its individual values.

For example consider an array. If we want to get individual elements of the array we would have used a loop. The Spread operator does the same thing — loops over it and gets individual values — and in shorter syntax. The expanded object can be for used for passing parameters to a function or for merging with another iterable object.

Iterable Objects

We have used the term "iterable" quite a lot in the earlier paragraph. In very simple words consider this as an object that be iterated — or looped. For example an array can be looped over its values. A String (basically an array of characters) can also be looped over its characters. A Set object that contains unique values can be looped. However a normal Javascript object cannot be looped (it is however possible to convert a normal object to a iterable object by following a set of rules).