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
3 answers

ReactJS: Appending new object to an existing array with spread

I have this array object to begin with [ { "name": "child", "pax": {} } ] I wish to append new property which is an array. then I want to update/insert new object into that array. But something is wrong with my code function App() { …
Hanz
  • 499
  • 7
  • 18
0
votes
0 answers

How to use babel-standalone to transpile ES6 javascript that uses the spread/rest operator?

I need to make my javascript (which is in a non-Node.js environment) backwards compatible so I'm trying to utilize Babel to transpile my code as suggested in this post babel-standalone works great except it doesnt seem to work with the spread/rest…
Chris
  • 5,444
  • 16
  • 63
  • 119
0
votes
1 answer

Immutable state update. Update an array of objects in Redux

I have a state of type array that initially looks like that: const initialState = { spots: [] } On the first update it gets filled with objects and looks like that: state.spots = [ { id: '1', available: 1, path: 'xxx' }, { id: '2',…
ion
  • 1,033
  • 2
  • 16
  • 46
0
votes
1 answer

Implicit return with spread operator in .map() function

How to use spread operator in implicit return wherein I'm removing one key value from the array of the object. I can use explicit return but I want shortcode and other possible solution of the scenario. let array =…
0
votes
1 answer

How to use spread operator to add property to an object, not override it?

I have this function. function foo(newdata) { utils.method('GET', '/auth', { response: { data: { settings: { last_email_notification_shown_date: new Date(), email_notifications: null, …
user6898463
0
votes
3 answers

.map returning string in array instead of array of numbers

Playing around with some code I found and the results do not make sense to me. I do not understand why the REPL thinks the array is one long string value.. I have done nothing to indicate this is a string and I am wondering why the console is…
0TTT0
  • 1,288
  • 1
  • 13
  • 23
0
votes
1 answer

Spread Syntax JSONB column in postgres

How do I do the spread syntax in postgres UPDATE UPDATE TABLE set data={...original, ...} where id='' in postgres
Jackstine
  • 486
  • 4
  • 12
0
votes
0 answers

Js Spread syntax ([...]) not supported on Debian server Node -v v10.15.3

I'v just deployed my api on my server, it worked great until i used the spread syntax. Which now gives me back this error : (node:17373) UnhandledPromiseRejectionWarning: /home/admin/api/src/graphql/index.js:15 { ...accChild, [currKey]: { …
Bidoubiwa
  • 910
  • 2
  • 12
  • 25
0
votes
1 answer

How to use object assign instead of spread syntax in merge of array of data and object?

I am using the spread syntax in order to get the current object. const x = [{ port: 3000, typ: "port" }, { port: 4000, typ: "port" }]; const IDs = [3246237348, 738423894, 73824923] const y = { ...x[0], CSSID }; Object {port: 3000, typ: "port",…
Tabares
  • 4,083
  • 5
  • 40
  • 47
0
votes
2 answers

Merge tuple of objects into one object type

This function must support any number of arguments: type Result = "???" function merge(...sources: T): Result { return Object.assign({}, ...sources) } Example input with expected result type:…
aleclarson
  • 18,087
  • 14
  • 64
  • 91
0
votes
1 answer

Typescript reactjs Can't spread props to input tag

I have a reusable Input Component that I use throughout my application import * as React from 'react'; import styles from "./Input.module.css"; interface Props { input: Object; label: string; custom: Object; meta: { touched: boolean; …
user3476614
  • 537
  • 2
  • 8
  • 26
0
votes
1 answer

Javascript: Refactor array of objects without overwriting keys

I have an array of objects that I'd like to refactor (make a different structure).. Existing Array: [ 0: { category: 100 }, 1: { category: 101 }, 2: { category: 102 }, 3: { tag: 200 }, 4: { tag: 201 }, 5: { tag: 202 }, 6: { year: 300 }, …
Marty McGee
  • 745
  • 8
  • 11
0
votes
1 answer

Comparing two parameters of an object array in JavaScript

I am completing a homework assignment where I will have to filter an array into a new array for a vehicle with the term of “ford” in it. The assignment wants the format to be in ES6 using the arrow function syntax so something like const arr =…
0
votes
2 answers

React state : update an index of array objects without explicitly specifying keys

I have an array of objects in my state. I want to update the last object in array. But I don't want to explicitly mention the keys when updating the object. This is how my code looks right now. import React from 'react' import update from…
vikmalhotra
  • 9,981
  • 20
  • 97
  • 137
0
votes
1 answer

conditionally copy an object using ES6

Lets say I have the following two objects object1: { CustomerId: 1, CustomerData: [1,2,3,4] } object2: { CustomerId: 2, CustomerData: [11,22,33,44] CustomerOrders: [5,6,7,8] } Now I need to merge the two objects using the following…
tmp dev
  • 8,043
  • 16
  • 53
  • 108