Over the last few years, JavaScript has seen massive improvements to its syntax and functionality with the addition of a bunch new features.

One of the most useful of those new features is the spread operator (aka the … operator)

Spread is super helpful, but its syntax is not particularly meaningful upon first glance. It doesn’t tell you much as to what it does. Fortunately, once you learn the three main uses for Spread, it will become one of your favourite tools in the JS toolbox!

_According to MDN: _“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.”

There are three places you can use spread:

1. Function calls
2. Array literals
3. Object literals

Spread & Functions

When passing arguments to a function, We can use spread to expand an iterable element. Rather than having to pass each argument individually, We can “Spread” out each item as its argument.

**Math.min**is a function which accepts any number of arguments and returns the minimum value. If we wanted to find the minimum value of an array, It doesn’t work to pass the entire array in:

const temperatures = [76,72,68,79,54,65];

Math.min(temperatures)
//Result
▶ NaN

Instead, we can use spread to expand our array, Passing in each element as an argument:

const temperatures = [76,72,68,79,54,65];
Math.min(...temperatures) 
//the same as Math.min(76,72,68,79,54,65)
//Result
▶ 54

Here’s one more example of using console.log. If we pass an entire array to console.log

const tvShows = ["Six Feet Under", “Chernobyl”, “Black Mirror”, "Fleabag " ]

console.log(tvShows);

#programming #javascript #spread-operator #web-development #es6