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

How can I tell whether a variable will spread into a hash without throwing?

I want to know if an argument will throw if I use it in a key-value spread construction: { ...maybeIWillThrow } I've got a bunch of functions that use spread to concisely implement "default options" behavior, like so: const DEFAULTS = { bells:…
Tom
  • 8,509
  • 7
  • 49
  • 78
0
votes
1 answer

What purpose does spread syntax inside an object literal ({...object}) serve?

I have read the answer on I don't understand about spread syntax inside objects but still don't quite understand the purpose of using (specifically) {...object}. What purpose does {...object} serve? I have tested this in the node REPL, say I made an…
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
0
votes
2 answers

Property added to array in Angular app via spread operator breaking template rendering

I have some covid-19 data coming from a source which I can render ok. I don't control the endpoint so I take it as it comes. If the science i hear is correct for every two confirmed there may be one unconfirmed, so I want to show adds a suspected…
0
votes
1 answer

Object spread inside of new array

I have a Node.js program that is using Mongo Atlas search indexes and is utilizing the Aggregate function inside of the MongoDB driver. In order to search, the user would pass the search queries inside of the query parameters of the URL. That being…
Brandon Miller
  • 1,534
  • 1
  • 11
  • 16
0
votes
0 answers

Typescript TS2345 Arguments Spread Compile Issue

I'm not sure where to check, but I have a nodejs/TS folder that builds correctly on my laptop, but fails on my desktop. The code is: const result: GetResourceXHR = { ...p, done( s:…
Terry
  • 2,148
  • 2
  • 32
  • 53
0
votes
1 answer

Is there an easy way to change one value in a nested json data with TypeScript?

TypeScript version: ^3.5.3 For this json const config = { id: 1, title: "A good day", body: "Very detailed stories" publishedAt: "2021-01-20 12:21:12" } It can be changed to a new title with spread syntax as const newConfig = { …
iooi
  • 453
  • 2
  • 10
  • 23
0
votes
0 answers

React props optional spread attributes

I'm trying to provide multiple optional attributes between components in React. Example: File: GenericCard.js ... {this.props.cardheader}
Yechiam Weiss
  • 261
  • 4
  • 12
0
votes
1 answer

IE 11 Script1028 on spread within function, tried Array.prototype.push.apply

I have a .NET application which works perfectly in Chrome, FF, and Edge. I've been asked to retrofit some of our javascript to work in IE 11. I've already changed my compatibility to . I'm…
jtrauma
  • 19
  • 5
0
votes
1 answer

Can anyone please explain what's happening here with spread operator

The following code is giving me the output I wanted, But I need to understand more. Can anyone please explain what's happening here with spread operator, const myObject = { "employeeid": "160915848", "firstName": "tet", …
Joseph
  • 75
  • 1
  • 6
0
votes
3 answers

How to use JavaScript spread... syntax to change the one field of the object, that belongs to the array and is accessed by name-value pair?

Here is the code (it fails to compile at the sentence that builds the state2, i.e. at the second spread): let line_id = 6; let state = { invoice: { id: 1015, description: 'web order', }, lines: [ {id: 5, description: 'phone',…
TomR
  • 2,696
  • 6
  • 34
  • 87
0
votes
1 answer

Destructuring with spread syntax in reduce method using typescript

This is my example and it works using an alias. example below: 'aliasCatch' Passes typescript validation export type TProcessResponseFunc = (error: TError, stdout: TSTDOut, stderr: TSTDOut) => void; export interface IObjCMD { msg?: string; …
Steve Tomlin
  • 3,391
  • 3
  • 31
  • 63
0
votes
1 answer

...attributes in react-native function component

I have the following function component in a react-native app. In second line of code, there is ...attributes which is confusing. While I understand that it represents spread syntax in newer JavaScript version, but I cannot find what does attributes…
Sunil
  • 20,653
  • 28
  • 112
  • 197
0
votes
1 answer

quantiy variable being increased twice in react

I am trying to implement a simple e-commerce application where I have a home component and a cart component whenever I call handle increment or handle decrement, quantity variable is increased or decreased twice in both cart array and items array.so…
ash1102
  • 409
  • 4
  • 20
0
votes
2 answers

Cloned arrays affecting react state

I'm having issues with cloning arrays in my react application. I import an array with data to my app called ApplicationsData. It's an array of objects. import ApplicationsData from '../Store/Applications'; App component has the following…
0
votes
1 answer

Tesseract.js spread syntax (ellipsis) error "Unexpected token ..."

I am trying to use the tesseract.js package in a node app. I am starting with a basic example from the documentation: Tesseract = require("tesseract.js"); Tesseract.recognize( 'https://tesseract.projectnaptha.com/img/eng_bw.png', 'eng', {…
garson
  • 1,505
  • 3
  • 22
  • 56