What is … in JavaScript (Three dots) – Spread Syntax in Javascript ES6

Three dots or … in Javascript ES6 is a new Javascript ES6 feature called Spread Syntax

The title of this article is from a question of a friend on Group “Discussion on Javascript, ReactJS, VueJS, AngularJS“. And in this article, we will dive into this question?

We will try to explain (…) what to do in JavaScript. Hopefully, this will eliminate the ambiguity of this concept for you, and for developers who will find this article in the future and have the same questions. This is one of the exciting new features of ECMA6 of Javascript; (…) is one of these new Javascript functions.

Actually, I became a big fan of (…) can change the style of solving your problem in JavaScript. We can use three dots (…) according to these two different concepts: spread syntax and rest operator.

But first as the article, we will go into the example to master and this way of learning brings more efficiency.

1. Example Spread Syntax.

Example 1 

Without Spread syntax (…)

const arr = [1, 3];
function add(x, y) // here receive parameter x, y
  {
     return x + y; 
  }
const result = add(arr[0], arr[1]); 
console.log(result);

With Spread syntax (…)

const arr = [1, 3];
function add(x, y) // here receive parameter x, y
  {
     return x + y; 
  }
const result = add(...arr); 
console.log(result);

Example 2 

related to immutable (Immutability in javascript)

Without Spread syntax (…)

var new_arr  = ['a', 'b', 'c', 'd'];
var new_arr2 = new_arr;
new_arr2.push('e');

console.log(new_arr);//  ["a", "b", "c", "d", "e"]
console.log(new_arr2);// ["a", "b", "c", "d", "e"]

With Spread syntax (…)

var new_arr  = ['a', 'b', 'c', 'd'];
var new_arr2 = [...new_arr];
new_arr2.push('e');
console.log(new_arr);  // Output 'a', 'b', 'c', 'd'
console.log(new_arr2); // Output 'a', 'b', 'c', 'd', 'e'

In the first two examples, how do you imagine how the Spread syntax has a task? In simple example 1, Spread’s task is to make the code clearer and more concise. Help the coder save time and kb code.

But in Listing 2, we see that Spread’s task is not simple anymore, regarding Immutable in javascript. In the above code, we created a new_arr2 array with some values ​​and copied new_arr into new_arr2. That means the reference (address) new_arr has been assigned to new_arr. That means if we do anything with new_arr2, it will also affect new_arr and vice versa because they have the same reference (address).

But when using spread, the developer is no longer worried! Here we can use the spread syntax to eliminate this ambiguity.

If you can learn quickly through specific examples, you can stop here, and if any coder still doesn’t understand or is ambiguous, please read the next section.

2. Concept Spread syntax (…)

As we said at the beginning of the article, we can use three (…) in two different concepts: spread syntax and rest operator. 

2.1 – Spread syntax 

This is useful when we want to copy the properties of an object to another object but with a little modification of the value of some properties. For example :

const object1 = {
    fullName: 'Anonystick',
    occupation: 'Software developer',
    age: 31,
    website: 'https://anonystick.com'
};
console.log(object1)
//Name: "Anonystick", occupation: "Software developer", age: 31, website: "https://anonystick.com"}

and we want to create different objects with only a change of Fullname. We can do this very easily with the help of the spread syntax:

const object2 = {
   ...object1,
   fullName: 'Tom',
}
console.log(object2)
//{fullName: "Tom", occupation: "Software developer", age: 31, website: "https://anonystick.com"}

It only takes one step. So cool!

2.2 – Rest operator. 

This I really found very useful, Sometimes we have to design some API that can accept n parameter numbers, in these situations can be really useful. Let me try to explain to you with a simple example, We want to design a method to sum n numbers:

function sum(...numbers){
  return numbers.reduce((sum, val)=>{
      return sum += val;
    });
}

Let’s try to run now

sum(3,5) 
sum(1,2, 3, 5)

Cool ?.. right !!!

? 3. Conclusion

When we see three dots (…) in the code, it is rest parameters or the spread syntax. There is an easy way to distinguish between them:

1. When three dots (…) are at the end of the function parameters, it is “Rest operator” and gathers the rest of the list of arguments into an array. 
2. When three dots (…) occur in a function call or similar, it is called the “Spread syntax” and extends an array into a list.

Thanks for reading. I hope you enjoy this article please feel free to like, comment or share this article with your friends.

? Happy Coding…

For the best article we refer to the following source:

https://dev.to/sagar/three-dots—in-javascript-26ci

https://medium.com/@oprearocks/what-do-the-three-dots-mean-in-javascript-bc5749439c9a

https://scotch.io/bar-talk/javascripts-three-dots-spread-vs-rest-operators543

https://code4developers.com/spread-syntax-in-javascript/