JavaScript Ellipsis Three dots ( … ) in JavaScript

Hey! I'm Sagar. I love to write tutorials and articles to help developers better understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter @sagar_codes.

In this article, we are going to discuss a feature introduced in ES6 that is spread operator and rest operator. 🔥 🔥 🔥

I've become a big fan of the three dots that may change your style of solving the problem within JavaScript. We can use three dots … in two different ways as spread operator and rest operator.

Rest Parameters 😴

With rest parameters, we can gather any number of arguments into an array and do what we want with them. Rest parameters have been introduced to reduce the boilerplate code that was induced by the arguments. 🙌

function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

In myFunc's last parameter prefixed with … which will cause to all remaining arguments placed within the javascript array.

The rest parameters gather all remaining arguments so there is no sense 😕 to add rest parameters before the last parameter. Rest parameter must be the last formal parameter.

function myFunc(arg1, ...rest, arg2) {
  // arg2 ?
}

Rest parameters can be destructured (arrays only), that means that their data can be unpacked into distinct variables.

function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

Spread Operators ✨

The spread operator is used to expand elements of an iterable (like an array) into places where multiple elements can fit.

function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

There have always been a variety of ways to combine arrays, but the spread operator gives use a new method for combining arrays:

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

With spread operator, Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().

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 }

👉 Conclusion

When we see three dots (…) in the code, it's either rest parameters or the spread operator.

There's an easy way to distinguish between them:

1. When three dots (…) is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array.

2. When three dots (…) occurs in a function call or alike, it's called a "spread operator" and expands an array into a list.

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

😄 Happy Coding…

Comments

[Charlie Urt]

Woooow I like the way you explain the things. I have been reading some of MDN documentation, with a bunch of examples with three dots, and I needed a clear article about the three points and these use, 'cause I don't have context about it, and your article was really helpful, thanks a lot.

[Mauricio Santos]

Thanks, short and to the point.

[Oscar Quinteros]

First of all, thank you for this tutorial. What are the three dots doing on the code below?

const api = (method, path, data, token) => {
if(method === "GET" || method === "DELETE"){
return fetch(${API}/${path}, {
method: ${method},
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
...(token ? { Authorization: Bearer ${token} } : {})
},
})
.then(res => {
return res.json()
})
.catch(error => console.log(error))
}

[peterlits zo]

Well, you can try markdown's code block with three '`' at the code's begin and end.

Wait why it do not have code block?

[Sagar]

if a token is present then it will add Authorization: Bearer ${token} to headers else it will not add anything

[Rockeek]

Thanks mate! It was clear and helpful.

[Sagar]

most welcome 😊

[ComputerRoger]

Excellent article.

Small edit to replace "use" with "us":
"There have always been a variety of ways to combine arrays, but the spread operator gives use a new method for combining arrays:"
Should be:
"There have always been a variety of ways to combine arrays, but the spread operator gives us a new method for combining arrays:"

[Luis Lopez]

There's also function application:

function cube(x, y, z) {
  return x * y * z;
}

cube(...[2, 5, 10]);
//> 100

Using ... you can send an array as separate arguments.

[Leon]

In a document of Gatsby, there is a line of code that ... followed by nothing. What does it mean here?

import React from "react"
import { graphql } from "gatsby"
export default function IndexPost( props ) {
  return (...)
}
export const query = graphql`
  fragment SiteInformation on Site {
    siteMetadata {
      title
      siteDescription
    }
  }
`

[Sagar]

maybe Gatsby trying to say there should JSX written by the user and this is not valid case.

[Ceora Ford]

Tysm for this article! I have been trying to figure this out all night and then I found this article!!

[Sagar]

Most welcome 👍🏻

[Javier Lopez]

Thanks

[radoncreep]

Thank you Sagar!