Here is the powerful guide of Spread Operator/Syntax in ES6

JavaScript , 0 Comments
Spread Operator

Spread Operator in ES6 or syntax (well 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);

#2 Spread in array literals.

Without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of push(), splice(), concat(), etc.

var parts = ['shoulders', 'knees']; 
var allParts = ['head',, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

You can use spread syntax anywhere in the array literal and it can be used multiple times. COOL!!!

#3 Copy an array.

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()

// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays as the following example shows (it’s the same with Object.assign() and spread syntax).

#4 A better way to concatenate arrays.

Normally we use concat()

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);

But with spread

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5]

Yeah! you can also do this.

arr1 = [...arr1, ...arr2, 6]; // arr1 is now [0, 1, 2, 3, 4, 5, 6]

unshift() is often used to insert an array of values at the start of an existing array. Without spread syntax:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Prepend all items from arr2 onto arr1
Array.prototype.unshift.apply(arr1, arr2) 
// arr1 is now [3, 4, 5, 0, 1, 2]

With Spread syntax

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; 
// arr1 is now [3, 4, 5, 0, 1, 2]

Note: Unlike unshift(), this creates a new arr1, and does not modify the original arr1 array in-place.

#5 Spread in object literals.

Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign(). For example:-

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Only for iterables

Spread syntax (other than in the case of spread properties) can be applied only to iterable objects:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

#6 Convert String to Array.

Boom!! Yes, you can also convert string to an array using spread syntax. For example:-

var str = "buginit";
var chars = [...str];
// chars is ['b', 'u', 'g', 'i', 'n', 'i', 't']

OMG!!!, here we covered almost all.

If you got something else please comment, and if you find this helpful share it.

Leave a Reply

Your email address will not be published.