Questions tagged [spread-syntax]

Please use this tag to refer to "..." (spread) syntax in JavaScript. Do not use for R language "spread" function, use [spread] instead. The spread syntax allows an iterable such as an array expression or string to be expanded in places where arguments for function calls, elements for array literals, or key-value pairs for object literals are expected.

Usage guidance

Use for questions about the ... (spread) syntax in ECMAScript.

Do not use for R language spread function, use instead.

About

Spread is a syntax added in ES6 allowing for substituting an iterable where a list of elements (e.g. in a function call) is expected:

(() => {
    const print = (q, a) => console.log(`-${q}? -${a}`);
    print(...["*", 42]); // spread in arguments

    const concat = (a, b) => [...a, ...b];
    concat([1,2],[3,4]); // spread in arrays
})();

The spread syntax is also used in spread properties, a TC39 proposal that is a part of ECMAScript since 2018 allowing own enumerable properties of an object to be copied to another in a concise manner:

(() => {
    const A = { answer: 42 };
    const Q = { question: "?" };

    const QnA = { ...A, ...Q };

    console.log(QnA.question); // "?"
    console.log(QnA.answer); // 42
})();
386 questions
1451
votes
22 answers

What are these three dots in React doing?

What does the ... do in this React (using JSX) code and what is it called?
Thomas Johansen
  • 14,837
  • 3
  • 14
  • 21
607
votes
49 answers

How to deep merge instead of shallow merge?

Both Object.assign and Object spread only do a shallow merge. An example of the problem: // No object nesting const x = { a: 1 } const y = { b: 1 } const z = { ...x, ...y } // { a: 1, b: 1 } The output is what you'd expect. However if I try…
Mike
  • 7,244
  • 5
  • 21
  • 27
153
votes
15 answers

Deep copy in ES6 using the spread syntax

I am trying to create a deep copy map method for my Redux project that will work with objects rather than arrays. I read that in Redux each state should not change anything in the previous states. export const mapCopy = (object, callback) => { …
Guy
  • 12,488
  • 16
  • 79
  • 119
149
votes
7 answers

Using spread syntax and new Set() with typescript

I am using following code to get unique numbers: let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3] However, typescript report following error: Type 'Set' is not an array type. I am not typescript ninja, could someone tell me what is wrong…
Eggy
  • 4,052
  • 7
  • 23
  • 39
134
votes
9 answers

TypeScript 2.8.3 Type must have a Symbol.iterator method that returns an iterator

I am running into an error that says Type must have a '[Symbol.iterator]()' method that returns an iterator. It hopes on the demarcated line: class Test { private async do() { const done = [...(await this.test())]; // Here's the error …
Tomáš Hübelbauer
  • 9,179
  • 14
  • 63
  • 125
110
votes
1 answer

Javascript ES6 spread operator on undefined

While developing my react App, I needed to send a conditional prop to a component so I found somewhere a pattern to do so, although it seems really weird to me and I couldn't understand how and why it worked. If I type: console.log(...undefined) …
omri_saadon
  • 10,193
  • 7
  • 33
  • 58
110
votes
3 answers

State as array of objects vs object keyed by id

In the chapter on Designing the State Shape, the docs suggest to keep your state in an object keyed by ID: Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. They go on to…
nickcoxdotme
  • 6,567
  • 9
  • 46
  • 72
95
votes
3 answers

Using spread operator to update an object value

I have a function that adds a key to incoming object, but I have been told to use the spread operator for that, I have been told that I can use the spread operator to create a new object with the same properties and then set isAvailable on it. …
Rasim Avcı
  • 1,123
  • 2
  • 10
  • 16
92
votes
6 answers

Array.from() vs spread syntax

Is there some difference between using Array.from(document.querySelectorAll('div')) or [...document.querySelectorAll('div')]? Here is a example: let spreadDivArray = [...document.querySelectorAll('div')]; console.log(spreadDivArray); let…
jotavejv
  • 1,936
  • 2
  • 16
  • 16
83
votes
11 answers

Spread Syntax vs Rest Parameter in ES2015 / ES6

I am confused about the spread syntax and rest parameter in ES2015. Can anybody explain the difference between them with proper examples?
80
votes
4 answers

Why does {. . . .0} evaluate to {}?

I just found {....0} in friend's code. Evaluating it in console returns {} (empty object). Why is that? What is the meaning of 4 dots in JavaScript?
Mist
  • 913
  • 6
  • 11
74
votes
3 answers

Spreading undefined in array vs object

Why does spreading undefined in an object return an empty object? {...undefined} // equals {}: console.log({...undefined}) And Why does spreading undefined in an array give you an error? [...undefined] // type…
0xtimur
  • 1,163
  • 3
  • 10
  • 16
68
votes
6 answers

JavaScript spread syntax in C#

Is there any implementation in C# like JavaScript's spread syntax? var arr = new []{"Hello", "World"}; Console.WriteLine(...arr); 3rd party edit Using a method public void greet(string salutation, string recipient) { …
jmvtrinidad
  • 3,347
  • 3
  • 22
  • 42
62
votes
2 answers

Is it spread "syntax" or the spread "operator"?

I've heard ... referred to both as 'spread syntax' and 'the spread operator', with the latter being a lot more popular. The URL of the relevant MDN documentation suggests that it was initially referred to as the spread operator but later changed to…
Andrew Li
  • 55,805
  • 14
  • 125
  • 143
51
votes
4 answers

What is SpreadElement in ECMAScript documentation? Is it the same as Spread syntax at MDN?

At ECMAScript specification the SpreadElement is described SpreadElement[Yield]: ...AssignmentExpression[In, ?Yield] Is this the same as the Spread syntax Spread syntax allows an iterable such as an array expression or string to be expanded in…
guest271314
  • 1
  • 15
  • 104
  • 177
1
2 3
25 26