DEV Community

loading...
Cover image for Three dots ( … ) in JavaScript

JavaScript Ellipsis Three dots ( … ) in JavaScript

Sagar
Software engineer with 4+ years of experience in building products for numerous domains like fin-tech, real estate, video streaming, retail, and now e-commerce.
Updated on ・2 min read

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);
Enter fullscreen mode Exit fullscreen mode

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 ?
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

👉 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…

Discussion (28)

Collapse
wheatup profile image
Hao • Edited

The other usage of ... I found is very useful:

Converting an iterable object:

// An array of HTMLElement, not the annoying NodeList object
const array = [...document.querySelectorAll('div')]; 
Enter fullscreen mode Exit fullscreen mode

Even a generator, how cool is that?

const array = [...(function*() {
  for (let i = 10; i > 0; i--) {
    yield i;
  }
  yield 'Launch';
})()];

console.log(array);    // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, "Launch"]
Enter fullscreen mode Exit fullscreen mode
Collapse
albertywu profile image
Albert Wu

Great article! This was a really great explanation of spread/rest.

I'd also add that three dots on the left-side of an equals sign is "destructuring assignment" and allows you to "pull out" values.

ex:

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30,40,50]

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // 10 
console.log(b); // 20 
console.log(rest); // { c: 30, d: 40 }
Enter fullscreen mode Exit fullscreen mode
Collapse
sagar profile image
Sagar Author

I missed writing about destructor. Thanks

Collapse
arfyfr profile image
Pascal Borschneck

Hi I noticed that the Shallow-cloning isn't working in Edge (18)

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

var clonedObj = { ...obj1 };

Result: error in console 'Expected identifier, string or number'
Collapse
migophotos profile image
migophotos

Great explanation! I knew about the rest parameters and even used them in my code, and now, thanks to your explanation, I will also use the spread operator. First of all, I replace all Object.assign() in my code with a short form.

Collapse
sagar profile image
Sagar Author

Thanks for your feedback.

Collapse
mylastore profile image
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))
}

Collapse
sagar profile image
Sagar Author

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

Collapse
ben profile image
Ben Halpern

Wonderful explanations, I've found this to be one of the more confusing elements of new JS.

Collapse
nhh profile image
Niklas

Me too, it seems to promote a „many positional arguments“ programming style instead of composing things into useful objects 🤔 Also the destructuring on the method definition is a part of this thing... i think

Collapse
sagar profile image
Sagar Author

Yes, Ben I found three dot operator confuse when use try to us in project. Thanks for your feedback.

Collapse
hileon profile image
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
    }
  }
`
Collapse
sagar profile image
Sagar Author

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

Collapse
computerroger profile image
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:"

Collapse
rockeek profile image
Rockeek

Thanks mate! It was clear and helpful.

Collapse
sagar profile image
Sagar Author

most welcome 😊

Collapse
stevetwitte profile image
Stephen Taylor Witte

Great run down of two great new features!

Collapse
gilangaramadan profile image
Gilang A. Ramadan

wow thank you! awesome explanation :)

Collapse
javier3131 profile image
Javier Lopez

Thanks

Collapse
rajivgoaple profile image
Rajiv Gopale

Nice Article

Collapse
ceeoreo profile image
Ceora Ford

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

Collapse
sagar profile image
Sagar Author

Most welcome 👍🏻

Collapse
njoash1 profile image
Toptips

This was helpful

Collapse
sagar profile image
Sagar Author

Thanks for your feedback

Collapse
gilluminate profile image
Jason Gill

It's important to note that this feature is available in all major browsers except for IE11

caniuse.com/#feat=rest-parameters

Collapse
kozmicluis profile image
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.

Collapse
mahmoudthepeltist profile image
MahmoudThePeltist • Edited

Thanks for the great explanation Sagar, rest/spread basically performs the exact same job as the "splat operator" in php.

Collapse
radoncreep profile image
radoncreep

Thank you Sagar!