DEV Community

Cover image for Three dots ( … ) in JavaScript

Three dots ( … ) in JavaScript

Sagar on September 15, 2018

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 abo...
Read full post
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 •

I missed writing about destructor. Thanks

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 •

Thanks for your feedback.

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
 
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
 
peterlitszo profile image
peterlits zo • • Edited

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?

Collapse
 
sagar profile image
Sagar •

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 •

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 •

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
 
radoncreep profile image
radoncreep •

Thank you Sagar!

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 •

Most welcome 👍🏻

Collapse
 
rockeek profile image
Rockeek •

Thanks mate! It was clear and helpful.

Collapse
 
sagar profile image
Sagar •

most welcome 😊

Collapse
 
stevetwitte profile image
Stephen Taylor Witte •

Great run down of two great new features!

Collapse
 
scriptingjs profile image
scriptingjs •

This was helpful

Collapse
 
sagar profile image
Sagar •

Thanks for your feedback

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

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
 
maosan132 profile image
Mauricio Santos •

Thanks, short and to the point.