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

What is wrong with my object spread operator usage?

var color3 = { name: 'Black', type: 'special', rating: 1 }; var rateColor3 = (colorName, Nrating) => ({ ...colorName, Nrating }); console.log(color3.rating); ///// 1 console.log(rateColor3(color3,…
0
votes
2 answers

Error with spread operation in array. TS1005: ',' expected. TypeScript

I cannot figure out what I missed on line row.sections[SECTION_ID. It always show me a typo error ','... FAQ: sections - is an array with objects inside. In this case I'm trying modify the specific object of the sections founded by custom flag…
Max Travis
  • 1,228
  • 4
  • 18
  • 41
0
votes
1 answer

How to spread the parameters of a previous instance of a class constructor to another instance

I would like to ask what I am doing wrong here My goal I want to create instances from a class constructor. The first is gonna be a more generic class called Person and then another that will inherit properties from that class. My question is When…
Evan
  • 583
  • 1
  • 5
  • 11
0
votes
0 answers

How can I use the spread operator to copy a value of a key within the same variable?

I'm familiar with the spread operator documentation examples on MDNenter link description here, and think they are very clear about copying an arrays values into a new variable: var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts,…
eagercoder
  • 526
  • 1
  • 10
  • 23
0
votes
1 answer

Destructuring Objects using Spread

this should be pretty easy, but I can't seem to get the syntax right. var newObject = {a:1,b:2,c:"three"}; var {...newObject} = newObject; console.log(a); // returns undefined I'm trying to automatically destructure my objects. I can…
Peter Breen
  • 447
  • 1
  • 10
  • 24
0
votes
2 answers

How to get around the error when using Spread to make an object copy where the object class has abstract methods?

In the following code, I have an abstract class, which requires extended classes to implement an abstract method. When using "spread" syntax, it complains about the implementation of the abstract method is missing. abstract class Test { …
user1589188
  • 5,316
  • 17
  • 67
  • 130
0
votes
1 answer

webpack js compiler issues with spread syntax from npm package

I have the following class: class AnalyticsService { /** Log an analytics event. */ log(options) { return Promise.all(this.logGoogleAnalytics(options), this.logKenticoAnalytics(options)); } /** Log an analytics event to GA. */ …
Pete
  • 57,112
  • 28
  • 117
  • 166
0
votes
0 answers

Can I specify the type of new local variables defined via TypeScript rest/spread assignment?

In TypeScript, can I specify the type of the local variables created using the object rest/spread assignment feature? The problem is that the ES6 syntax obj: Type normally used by TypeScript to specify the type of a local variable is used in ES6…
Justin Grant
  • 44,807
  • 15
  • 124
  • 208
0
votes
5 answers

Object.assign() , merge/overwrite keys, to copy the values of an array to create an object

i used to have an array with one object, like so: var myObj = [{'key': {an object}}]; I convert it to an object like so: Object.assign({}, ...myobj) to get this : {'key': [{an object}]} The issue, is that on myobj now i have two items, with the…
Theo Itzaris
  • 4,321
  • 3
  • 37
  • 68
0
votes
4 answers

Copy and Update a property of an object in an array

For my app using redux I have an array and I want to update some properties of one object. Because it's redux I need a copy of the array, therefore I want to use the spread operator. Input: const original = [{a: "original a", b: "original b"}, {c:…
solaire
  • 475
  • 5
  • 22
0
votes
1 answer
0
votes
0 answers

JavaScript — Correct way to use spread

I am gathering different values from a series of sequential forms and I am using spreads to pass this information along each step. The issue is that I am struggling to create the data format I wish. How should I structure the spread to the…
Diego Oriani
  • 1,647
  • 5
  • 22
  • 31
0
votes
0 answers

How to convert the array values to destructuring with spread operators

In service call i get a below response Currently i have foreach the collections and push the productID and ProductName in id and name into the options array and bind into html. Need to replace this with spread opreator with destructive…
Mohamed Sahir
  • 2,482
  • 8
  • 40
  • 71
0
votes
2 answers

What's the difference between list: {[id]:array1} and list: {...state.list, [id]:array1} in ReactJs?

This is my state: state = { list: {} }; In some function I change my state to: let id = 'ab12' let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}] this.setState({ list: { ...state.list, [id]: array1 } }); I…
Coder
  • 540
  • 1
  • 11
  • 34
0
votes
1 answer

awesome-typescript-loader: spread of empty array returns empty array

Well, everything was awesome until I went into spread of the empty array to render a couple of similar index-dependable components. I wrote this line of code (as usual): [...Array(3)].map((_, i) => {...}) // return something, you know or, more…
Limbo
  • 2,123
  • 21
  • 41