DEV Community

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

Hao • Jul 24 '19 • 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')];

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"]

Albert Wu • Sep 17 '18

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 }

Sagar • Sep 18 '18

I missed writing about destructor. Thanks

migophotos • Sep 15 '18

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.

Sagar • Sep 16 '18

Thanks for your feedback.

Pascal Borschneck • Feb 19 '19

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'

Oscar Quinteros • Sep 30 '20

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))
}

Sagar • Oct 2 '20

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

peterlits zo • Feb 17 '22 • 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?

Leon • May 20 '20

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 • May 22 '20

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

Ben Halpern • Sep 15 '18

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

Niklas • Sep 15 '18

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

Sagar • Sep 16 '18

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

ComputerRoger • Jul 21 '20

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:"

Charlie Urt • Jun 7 '22

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.

Stephen Taylor Witte • Sep 15 '18

Great run down of two great new features!

scriptingjs • Sep 16 '18

This was helpful

Sagar • Sep 17 '18

Thanks for your feedback

Rajiv Gopale • Mar 15 '19

Nice Article

MahmoudThePeltist • Apr 6 '19 • Edited

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

Gilang A. Ramadan • Aug 7 '19

wow thank you! awesome explanation :)

radoncreep • Sep 17 '19

Thank you Sagar!

Javier Lopez • Feb 7 '20

Thanks

Ceora Ford • Apr 5 '20

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

Sagar • Apr 5 '20

Most welcome 👍🏻

Luis Lopez • May 24 '20

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.

Rockeek • Sep 24 '20

Thanks mate! It was clear and helpful.

Sagar • Sep 24 '20

most welcome 😊

Mauricio Santos • Aug 10 '21

Thanks, short and to the point.