Understanding the Spread syntax in Javascript

Fatema Patel 2019-03-19

Objective

The introduction of ES6 has been a delight to several javascript developers as it unlocks several features that make it easier to do complex computations. This article focuses on one such feature which is Spread syntax.

The introduction of ES6 has been a delight to several javascript developers as it unlocks several features that make it easier to do complex computations. This article focuses on one such feature which is Spread syntax.

Let’s start with syntax, simple Spread syntax which is used by typing three dots {…} in JavaScript.

 

Spread Syntax

The spread syntax allows an array expression or string or anything which can be iterated to be expanded in places where zero or more arguments for function calls or elements for the array 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 say we have two arrays containing domestic and wild animals.

const domesticAnimals = [‘Cows’, ‘Sheep’, ‘Goat’];

const wildAnimals = [‘Lion’, ‘Tiger’, ‘Fox’];

and we need to combine two of them, we would normally use the concat() array method.

const newAnimalsArray = domesticAnimals.concat(wildAnimals);

 

Using the ES6 spread syntax, we could also write the above code like so:

const newAnimalsArray = [ …domesticAnimals, …wildAnimals];

 

These two lines of code both do the same thing, and the latter is known as the spread syntax. While generally, you would want to stick to using array methods when working with arrays, the advantage of using spread over concat can be seen in large operations where the spread operator is significantly faster. The spread syntax also enforces immutability, which is really important if you are working with data that should not be mutated. Basically, the spread syntax allows us to copy, into the new array, the values of already defined array(s).

Let’s check some use cases where we can use the Spread syntax.

  1. Inserting an array (push) / (concat)
  2. Copy an array(slice)
  3. Converting String to array
  4. Apply for new


1) Inserting an array   

Suppose we have two arrays to perform some operation you need to perform merging of these arrays into one.   

const arr1 = [3, 4]

const arr2 = [1, 2, 5];

now we merge one array to other so we can do it like

const arr3 = [1, 2, arr1, 5];

when you run this output is like [1, 2, [3, 4], 5]  and you expect like [1, 2, 3, 4, 5]

So, here we may use Spread Syntax of Javascript as above said the syntax is {…} Three dots we can use it like

const arr3 = [1, 2, …arr1, 5];

By running the above example you got a simple array instead of nesting array.


2) Copy an array

In Javascript, we can't copy an existed array by setting a new variable of an existed array.

const arr1 = [1, 2, 3];
const arr2 = arr1;

console.log(arr2);

Now, at first see, it looks like it worked — it looks like we’ve copied the values of arr1 into arr2. But that’s not what has happened. You see, when working with objects in javascript arrays are a type of object we assign by reference, not by value. This means that arr2 has been assigned to the same reference as arr. In other words, anything we do to arr2 will also affect the original arr array (and vice versa). Take a look below:

const arr1= [1, 2, 3];
const arr2 = arr1;

arr2.push(5);

console.log(arr1); // (5) [1, 2, 3, 5]

In this case, both arrays have the same element. Above, you push a new element into arr2 and it also affects arr1 too. You will see the new d element into arr1 also

so, here you also use Spread syntax to reducing this problem.

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

arr2.push(5);

console.log(arr1); //  (3) [1, 2, 3]

console.log(arr2); // (5) [1, 2, 3, 5]

while executing this code you will get an array which will insertt an element in arr2 only using spread syntax and arr1 remain as same as above

 

3) String converting to the array

While reading this paragraph you might be surprised because spread syntax is also used to convert a string to the array by just simply used the spread syntax within the pair of square braces.

const str = 'Hello';

const charArray = [...str];

console.log(charArray); // (5) ["H", "e", "l", "l", "o"]

 

4)  Apply for new

When calling a constructor with new, it's not possible to directly use an array and apply (apply does a [[Call]] and not a [[Construct]]). However, an array can be easily used with new thanks to spreading syntax:

const birthday = [14, 09, 1990];

const date = new Date(...birthday);

we can just write a two-line instead of long code.

Summary

A Spread syntax contains Three dots of syntax, we can use these for the array inserting an element , copy an array, concat of the array and converting strings to the array. We can also use it like new of a class  and we can use it smoothly & easily without any difficulty or it helps to reduce code burden form the developer.

Created on : 2019-03-19
Written by

Fatema Patel

Jr. React Native Developer

Tags
es6
javascript
Spread syntax
Spread syntax es6