Here Is The Powerful Guide Of Spread Operator/Syntax In ES6

Spread Operator in ES6 or syntax ( according to MDN it is syntax) so let’s call it syntax. Well, they also call it three dot operator.

So how it looks like? Oh, it is simply three dots ...

When did it release? Of course in ES6.

What it actually does? The spread operator in ES6 turns iterable values into arguments. we will come back on definition later, for now

Let’s understand with an example.

Let say: you have two arrays called mid and all. And you have to insert mid in the middle of all. Quickly!!!

let mid = [3, 4];
let all = [1, 2, ...mid, 5, 6];

Expected Output: [1, 2, 3, 4, 5, 6]

Awesome!! That’s all, Yeah you got it!!

According to MDN, Here you got the long boring definition below:

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.

So that’s all, do I know all about it? Naa! man, life isn’t that easy 🙁

What actually you can do with spread syntax? Let’s break it down with examples in short.

#1 Apply for new

When calling a constructor with new it’s not possible to directly use an array as arguments. But now you can use an array directly for example:-

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

To see all 6 types of example the complete guide of Spread Operator/Syntax In ES6