Javascript Property with three dots (...)

Question

I have a problem with code I am supposed to work with. I found a syntax I am not familiar with and I have trouble googling the documentation:

export const Something = class Something {
    constructor(someObject = {}) {
        this.someObject = {...Something.someObjectDefaultAsStaticMethod,...someThing};
    };
// The rest of the class
};

I have problems understanding what the three dots (...) in front of the parameter do. And "dots in parameter javascript" is a bad search term. Can someone help me, maybe tell me what this syntax is actually called or just directly link me to documentation?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator — Keith, Jan 26 '18 at 15:18
Possible duplicate of [Spread Syntax ES6](https://stackoverflow.com/questions/34559918/spread-syntax-es6) — BlackBeard, Aug 03 '18 at 10:35
Does this answer your question? [Spread Syntax vs Rest Parameter in ES2015 / ES6](https://stackoverflow.com/questions/33898512/spread-syntax-vs-rest-parameter-in-es2015-es6) — Henke, Mar 16 '21 at 08:06

str · Accepted Answer · 2018-08-03T10:38:14.753

9

That is not ES6 but has only been added in ECMAScript 2018.

It is called "Object Rest/Spread Properties" and is part of the Spread Syntax.

edited Aug 03 '18 at 10:38

answered Jan 26 '18 at 15:20

str

33,096
11
88
115

4

This answer is correct. But just to clarify - the array rest / spread operator is in ES6, the _object_ is in Stage 3. – dayuloli Jan 26 '18 at 15:22

score 4 · Answer 2 · answered May 08 '20 at 16:58

4

... (three dots in Javascript) is called the Spread Syntax or Spread Operator. This allows an iterable such as an array expression or string to be expanded or an object expression to be expanded wherever placed.

I want to list down the mostly used practical Use Cases of the Spread Syntax (Spread Operator). The following has been explained with examples in this stackoverflow answer.

Combine Arrays (Concatenate Arrays)
Copying Arrays
Calling Functions without Apply
Destructuring Arrays
Function Arguments as Rest Parameters
Using Math Functions
Combining Two Objects
Separate a String into Separate Characters

answered May 08 '20 at 16:58

Keet Sugathadasa

4,497
1
37
53

2

Thank you for this list!! – Alex Milewski May 09 '20 at 18:33
See this [stackoverflow answer](https://stackoverflow.com/a/50729063/7794769) for clear examples for each use case written out. – stomy Jun 16 '20 at 16:49
@Keet It would be nice if you write out clear code examples for each of your 8 use cases. – stomy Jun 16 '20 at 16:52
@stomy I have provided clear code examples in the link attached in the answer. https://stackoverflow.com/a/61683996/4388776 – Keet Sugathadasa Jun 16 '20 at 18:47

score 3 · Answer 3 · answered Jan 26 '18 at 15:45

3

The [...something] is the spread operator. It in essence allows for an array or string to be expanded. You will see it used often in React, but has many other use cases.

MDN has great documentation on the spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

answered Jan 26 '18 at 15:45

bdurb

31
3

1

Correct but note that it's not an *operator*; it's not part of the Expression grammar. – Pointy Mar 15 '20 at 15:52

Javascript Property with three dots (...)

3 Answers3

Linked

Related