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
0
votes
4 answers

Spread Syntax with Map and Filter

I found this interesting problem and wanted to share with you guys. The question is : [...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x)),7] I easily solved the first section upto the filter as [0,1,(-1+1),(0+1),(1+1)] = [0,1,0,1,2]. I was…
0
votes
3 answers

Replacing an object with an empty prototype

I am trying to flush some data by replacing it entirely with an object that has a set of keys with empty values. e.g. const sportPrototype = { name: '', players: '', displacement: '', points: '', leagues: [] } var profileScratchpadOne =…
softcode
  • 4,358
  • 12
  • 41
  • 68
0
votes
1 answer

react extended component & typescript generics & setState

I have a react component PageLayout written in typescript: export interface IPageLayoutProps {...} export interface IPageLayoutActions {...} export interface IPageLayoutLocalState {...} export default class PageLayout

Lukas Kral
  • 987
  • 13
  • 22
0
votes
1 answer

Is there anyway to spread the return of a function call into props in jsx?

I can't come up with a way to do it, but what I want is:
boatcoder
  • 17,525
  • 18
  • 114
  • 178
0
votes
1 answer

How to use spread operator on angular 2 input

So I will do something like this often save(...keys: string[]) { keys.foreach(x => // save); } I can call this any of these ways because of the spread operator. save('string1', 'string2'); save(['string1', 'string2']); save('string'); I love…
Devcon
  • 767
  • 2
  • 8
  • 23
0
votes
0 answers

Destructuring with Spread in Node 6.5 not working

According to this compatibility table, there should be no problem with destructuring or the spread operator in Node 6.5 However, this code here: const things = { a: 1, b: 2, c: true, d: false }; const { a, b, ...rest } =…
Jona
  • 1,023
  • 2
  • 15
  • 39
0
votes
0 answers

Why doesn't babel understand this usage of the spread operator in react-starter-kit?

From the react-starter-kit, a very popular boilerplate: This line always fails whenever I try to run or build: plugins: ['transform-runtime', ...(DEBUG ? [] : ['transform-react-remove-prop-types', 'transform-react-constant-elements',…
tacos_tacos_tacos
  • 10,277
  • 11
  • 73
  • 126
0
votes
1 answer

Spread syntax gives error when copying react component properties

I'm using react and I'm trying to use the spread syntax. For some reason it doesn't work and it gives an error: const { className, children, ...otherprops } = this.props; Any idea what I'm doing wrong?
Golan Kiviti
  • 3,895
  • 7
  • 38
  • 63
0
votes
4 answers

How to add a method with ES6 Rest to a JS object

I have a Person constructor and I want to add a method supposed to add friends. I want to allow my user to pass a variable number of friends so I thought about the new "rest" feature of ES6. Sadly, I can't find my way out. Here's my first try (error…
Le Sparte
  • 163
  • 2
  • 12
0
votes
1 answer

having trouble with JavaScript spread syntax

I just read the MDN page for the ES6 spread syntax, and most of the examples on the page worked, but the last one did not: var obj = {"key1":"value1"}; function myFunction(x) { console.log(x); // undefined } myFunction(...obj); var args =…
anatta
  • 107
  • 4
0
votes
1 answer

Why does invoking Array.prototype.map directly on Array instance result in an "unmodified" array?

Why does invoking Array.prototype.map directly on Array instance o result in an "unmodified" array? var o = Array(3); // [ undefined, undefined, undefined ] o.map((x,y) => y*2); // [ undefined, undefined, undefined ] Instead, I have to use apply…
Ben Aston
  • 53,718
  • 65
  • 205
  • 331
-1
votes
1 answer

how to detect if array was created from iterator (or array spread)

Let's say we have: const foo = [1,2,3]; const bar = [1,...foo,3]; Is there a way to know from bar that it was created from items contained in foo? I thought to use Proxy but bar is init with spread operator, so we can't proxify bar first...
8HoLoN
  • 1,122
  • 5
  • 14
-1
votes
2 answers

How to spread object as method input parameter but not as arguments array?

I have a function expecting multiply parameter and an input object that contains information with same key name as parameter field name, take a small example, e.g const input = { firstName: 'first', lastName: 'last', age: 19 } function…
Drex
  • 3,346
  • 9
  • 33
  • 58
-1
votes
1 answer

Add to nested object with variable depth

I have an object of which the depth may increase when I fetch the api. Supposing it was a parent with children it would initially look something like this. { name: 'Mary' children: [ {name: 'Jude'}, {name: 'Kathy'}, {name: 'Joe'} …
user3808307
  • 2,270
  • 9
  • 45
  • 99
-1
votes
2 answers

convert javascript spread syntax to older version code

I have a piece of code which uses spread syntax. On my main server, the node js version is 0.10. For some reason, it's not possible to upgrade node js. So I'm converting all the arrow functions such that they are compatible with the old version of…
node_man
  • 1,359
  • 4
  • 23
  • 50
1 2 3
25
26