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
1 answer

ESLint Parsing error: Unexpected token ... on only one rest operator

I am getting a weird eslint error when using the spread operator a certain way. I am using it all over my application, but this one line is throwing an error //this is ok const sortById = arr => [...arr].sort((a, b) => (parseInt(a.EMPLOYEE_ID) <…
kemotoe
  • 1,730
  • 13
  • 27
0
votes
1 answer

Spread Operator is not working ...this.state.attributes

Spread operator is not working Getting error "unexpected token this" Below is package.json we have used { "name": "@coreui/coreui-free-react-admin-template", "version": "2.0.5", …
Agrawal Shraddha
  • 734
  • 1
  • 5
  • 18
0
votes
1 answer

spread operator is not working in react as {...this.state.attributes}

I am facing issue unexpected token this as ...this is not working as attribute in React. this has value in this scope. Thanks in advance. Regards, Shraddha Agrawal
Agrawal Shraddha
  • 734
  • 1
  • 5
  • 18
0
votes
3 answers

Unexpected behavior from the spread syntax in JavaScript

I was experimenting with the spread syntax and am having difficulty making rational sense out of its behavior in a particular situation. In one instance, when I use: const art = ["hello"] console.log( [{...art}] ) the return value is => [ { '0':…
Dog
  • 2,726
  • 7
  • 29
  • 66
0
votes
2 answers

Better way to create an object from an object of properties?

In my app, I'm creating several different objects using data from an API request as follows: const newRelationship = new Relationship( data.id, data.account_id, data.name, data.description, data.created_at, data.created_by, …
James Mulholland
  • 1,782
  • 1
  • 14
  • 21
0
votes
1 answer

setting up the babel plugin for spread operator correctly

Attempting to use babel-plugin-transform-es2015-spread in my project. Installed the module. npm install --save-dev babel-plugin-transform-es2015-spread .babelrc looks like. { "presets": [ ["env", { "include":…
noi.m
  • 3,070
  • 5
  • 34
  • 57
0
votes
2 answers

SetState in an array with React spread operator

I have a value in my react state that looks like so: appointmentsData = { "05-01-2018": [ { id: "1", friendly: "9:00am - 10:00am", openDateTime: "9:00am", closeDateTime: "10:00am" } ] }; I have a new piece of…
allencoded
  • 7,015
  • 17
  • 72
  • 126
0
votes
0 answers

React spread operator throwing error on nested state updatey

I am trying to update a nested state in my React login component to handle change to the login form fields. Login Container Component class Login extends Component { constructor() { super(); // define state this.state…
0
votes
2 answers

How to assign an object some keys by javaScript spread syntax

I have the following object: var inv = {roles: {"xxx00": {roleId: "zzzz33"}}, assign: [1, 2, 3] } This is the result: { roles: { "1234": {roleId: null}, "5678": {roleId: null}}} I need to consolidate the object with this result: {roles: {"1234":…
Leonardo Uribe
  • 123
  • 1
  • 13
0
votes
1 answer

React - Spread MapStateToProps with the same props

I have this MapStateToProps: const mapStateToProps = (state) => { const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const ESFReport = getESFReport(state); const resultStatusReport =…
Lizz Parody
  • 1,705
  • 11
  • 29
  • 48
0
votes
0 answers

Neutrino not transforming spread operator

I'm new to Neutrino, but I have my project working for everything but the object spread operator let bar = {...foo, x: 1} yields Module parse failed: Unexpected token over and over. I'm already using the react preset/middleware, but I went ahead and…
Dave Welling
  • 1,678
  • 1
  • 17
  • 13
0
votes
1 answer

Typescript promise all mixed array and spread operator

I have a promise all with a mixed array and I'm using a spread operator to split the output in 2 variables, the first as IUnpackedFile and the rest as IDescriptionBody[]. The way I solved it is casting the 2 variables using the as keyword. Code…
Luca Marangon
  • 762
  • 1
  • 8
  • 13
0
votes
1 answer

How to use ES6 object extension mark `...`?

As the subject, is it OK to use ... in that way to copy properties in an object to another? Chrome always throws syntax error when I was trying to use it in an object like: var a = function(){ return {c: 2}; } var b = {...a()};
0
votes
2 answers

Webpack is not building because of javascript spread operator

I get unexpected token error for spread operator, how can I do it build the bundle without removing the code ? Here is my webpack config file Unexpected token (85:32) 83 | console.log( 84 | 'return value 1 ' + > 85 | …
Rasim Avcı
  • 1,123
  • 2
  • 10
  • 16
0
votes
3 answers

Spread syntax doesn't work to destructive an array

I am new to Javascript and is confused why the following won't work? var array = [1, 2, 3, 4] var spread = ...array; I was expecting it would become 1, 2, 3, 4. Instead, it gave an error message Unexpected token .... Can anyone explain this to me?…
geekydude703
  • 187
  • 1
  • 1
  • 13