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
22
votes
6 answers

Why does VSCode not recognize the JavaScript spread operator and autocompletes instead?

I have been struggling with a really annoying behaviour of Visual Studio Code recently. Whenever I try to use the JavaScript spread syntax VSCode automatically autocompletes the next piece of code (wrongly). Note I am NOT hitting TAB. Here's a…
22
votes
4 answers

Using spread operator multiple times in javascript?

Why can't spread operator be used multiple times? let arr = [[[1, 2, 3]]]; console.log(arr); // Array [ Array[1] ] console.log(...arr); // Array [ Array[3] ] console.log(...(...arr)); // SyntaxError: expected '=>' after argument list, got ')' I…
madox2
  • 49,493
  • 17
  • 99
  • 99
20
votes
5 answers

Iterate over array of objects and change one property in each object

I find myself presented with this pattern quite a bit. I have an array of objects that I get back from my api, and I need to manipulate just one of the properties in all of the objects. Is there a way using ES6/Babel or Typescript to get that…
Richard.Davenport
  • 1,453
  • 3
  • 16
  • 31
19
votes
2 answers

Spread syntax ES6 with statement

I tried to write ternary operator with spread syntax and copy two objects. Is it possible to use ternary operator with spread syntax inside with literal objects? My code works okay, I just want to optimize it. hintStyle: disabled ?…
Palaniichuk Dmytro
  • 2,943
  • 12
  • 36
  • 66
19
votes
6 answers

Usage of rest parameter and spread operator in javascript

What's the usage of rest parameter that will be added in ECMAScript 6? For example, in ECMAScript 5 you can do the following to get an array of parameters starting from the second element: // ES 5 store('Joe', 'money'); store('Jane', 'letters',…
Tareq Salah
  • 3,720
  • 4
  • 34
  • 48
18
votes
2 answers

Spread syntax returns unexpected object

I am using node and i have used . babel-node "start": "nodemon --exec babel-node --presets es2015 index.js" My spread syntax is not working as expected. Here is my code. export const login = async (parentValue, { email, password }) => { …
Sarmad Shah
  • 3,725
  • 1
  • 20
  • 42
18
votes
4 answers

spread operator converting objects to array

I'm trying to convert a data structure like this: data = { 0:{A:a}, 1:{B:b}, 2:{C:c}, } into a structure like this: [ {0:{A:a}}, {1:{B:b}}, {2:{C:c}}, ] Using the spread operator like this: [...data] returns any empty array. I also…
Turnipdabeets
  • 5,815
  • 8
  • 40
  • 63
18
votes
3 answers

how to use object spread syntax in chrome dev tools

I started using object spread syntax to safely make a copy of the object while following immutability principles. I want to use it in chrome developer console - how to do this:
Probosckie
  • 1,585
  • 4
  • 25
  • 40
17
votes
5 answers

Spreading an array in a typescript function: Error TS2556

I am trying to use the spread-operator on a typescript-function call like this: function foo(x: number, y: number, z: number) { console.log(x + y + z); } const args = [0, 1, 2]; foo(...args); But on compilation, I get the error: "A spread…
Martin J.H.
  • 2,085
  • 1
  • 22
  • 37
17
votes
1 answer

How to return a spread operator in a map arrow function in one line

What I need to do is map over an Array and set a value to false on all of the objects. This was my first shot: data = data.map((item) => { item.active = false; return item; }) Works! But then there is Eslint, no-param-reassign. So I had to find…
Justin Lek
  • 199
  • 1
  • 2
  • 11
16
votes
4 answers

How to spread an object into a classes properties in JavaScript

Basically here's what I'm trying to accomplish. class Person { constructor (obj) { this.first = '' this.last = '' this.age = '' if (obj) { Object.assign(this, ...obj) } } } const a = new…
Alex Cory
  • 10,635
  • 10
  • 52
  • 62
15
votes
2 answers

Why does JavaScript's spread syntax allow {...null} but not [...null]?

Was updating a bit of code today that returns optional props to a React component. I discovered that even though the function sometimes returns null, it wouldn't error when the return value was immediately unpacked. Pedantic summary of the…
Stick
  • 253
  • 1
  • 2
  • 7
15
votes
3 answers

Is the ordering of props in JSX important?

If the o object contains a key/value pair of: foo: 'bar' can I depend on these outcomes?: // foo will be 'bar' // foo will be 'overridden'
Jonathan.Brink
  • 23,757
  • 20
  • 73
  • 115
15
votes
3 answers

Add object to the beginning of array using spread operator

I have an array like this: var oldArray = [{'value': '1', 'label': 'a'}, {'value': '2', 'label': 'b'}] what I want is using spread operator add a new object at the beginning of that array: BTW this works: var oldArray = [{'value': '1', 'label':…
Diego Unanue
  • 6,576
  • 8
  • 47
  • 67
11
votes
5 answers

Dart: spread operator for constructor

In my flutter app, I have widgets like below: Container( decoration: BoxDecoration( border: Border.all( color: Colors.red, width: 2, style: BorderStyle.solid, ), ), child: Text('Container 1'), ) Container( …
Giraldi
  • 16,451
  • 6
  • 33
  • 52
1 2
3
25 26