Screenshot 2021 10 27 at 12.22.05 AM

What is Spread Syntax or The Concept of Three Dots in JavaScript

In this tutorial we learn how to implement the concept of Spread Syntax and three dots in JavaScript. It’s a simple procedure to walk you through and very easy to master.

The concept of three dots or Spread syntax is a very interesting in ES6. It is used to copy arrays into other arrays. 

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

It also allows us to append new arrays into already created and populated arrays. 

const arr1 = [1,2,3]
const arr2 = [4, 5, 6, ...arr1]

We can also spread arrays into variables while passing into functions. 

const addNumbers = (num1, num2, num3, num4) => {
    return num1+num2+num3+num4
const arr = [2, 3, 5, 2]
console.log( addNumbers(...arr) )

We can pass spread variables extracted from arrays  into Math functions. 

const arr = [2, 3, 5, 1]

I hope now three dots […] or spread syntax will never bother you. If you have any problems please write in the comments section.