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

Increment a key's value (+1) within a series of objects contained in an array that's held in useState

const = [items, setItems] = useState([{ name: "foo", wait: 1 }, { name: "bar", wait: 5 }]) I need to increase the key's value, wait, by 1 for all objects inside items. Here is my attempt so far... setItems(items.map(e => [...e, e.wait++])) I get…
0
votes
1 answer

ES6: How can you add a property (which itself is an object) to an object conditionally only if that property exists

I'm following this great tutorial for adding a property (or not) to an object based on a condition. For example: { id: 'some-id', ...(true && { optionalField: 'something'})} But in my case I have an object which looks like this: What I'd like to…
0
votes
1 answer

prevent replacing ES6 Object spread notation in Terser

!(( input, processed = { foo: 1, ...input } ) => { window.console.log(processed) })({ bar: 2 // input configuration }) gets minified to: ((t, e = { foo: 1, bar: 2 }) => { …
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
0
votes
0 answers

Spread Or Rest Operator in Array Push

I want to understand why the ...list - spread syntax - (I believe it is spread because it deals with an iterable) is being added to the list this way. Does this mean list in collected in an array and pushed into the tempLists? const…
tksilicon
  • 3,276
  • 3
  • 24
  • 36
0
votes
1 answer

JS - Add new key to nested object with speard operator

I'm bit confused. Could you help me ? It's easy but I'm not able to solve my problem. I have tree like that. [{ label: "Label 1", colspan: 0, columns: [ { data: "Colunm1" }, { data:…
Yasin Yörük
  • 1,500
  • 7
  • 27
  • 51
0
votes
1 answer

How to deal with optional tuple element when using rest parameters to forward arguments to curried function (with strictNullChecking)

The goal: Get rid of the typescript error TS2345 where argument is not assignable to parameter The Problem: Im trying to curry an arrow function by forwarding all the arguments using a rest parameter and tuple as type. However, because I use a…
0
votes
3 answers

Unable to update a nested object within state

import React, { Component } from 'react'; import ColorBox from './ColorBox' import './ColorBoxes.css' class ColorBoxes extends Component { state = { colors: {} } clickedColor = (color) => { let newColor =…
Altaf
  • 399
  • 1
  • 5
  • 15
0
votes
1 answer

react-redux, change object key/value with parameters from two input fields with one actions

I'm trying to change input values in the object with one action. so the action gets key("title" and "content") value as a parameter from each input when its type. It filler the note array object id match with activeId. Assign value const noteValue =…
MachoBoy
  • 161
  • 4
  • 15
0
votes
3 answers

Type safe merge of object literals in typescript

I want to merge two typescript objects (using object spread): var one = { a: 1 } var two = { a: 2, b: 3 } var m = {...one, ...two} // problem as property `a` is overwritten I want to use the type system to ensure none of the properties in the…
AJP
  • 26,547
  • 23
  • 88
  • 127
0
votes
1 answer

How to in javascript update inner object array with spread operator

I have in my reducer for a store, need to update an inner array object value: for: export interface SiteState { site: Site; } and export interface Site { id: number | null; uuid: string; subscriptions?: (SubscriptionI)[] | null; } and…
Tony Ster
  • 200
  • 4
  • 22
0
votes
1 answer

typescript spread params how to test if empty?

I don't seam to be able to find an answer for something fairly simple regarding the spread operator on function parameters. Assume an interface interface Options { f1?: number; f2?: string; f3?: Object; } and function: private…
Felix
  • 1,662
  • 2
  • 18
  • 37
0
votes
3 answers

Object spread , new Redux state

I have the following state object in redux: console.log({ jobOffers: { filters: { employments: [], careerLevels: [], jobTypeProfiles: [], cities: [], countries: [], searchTerm: '', …
Gutelaunetyp
  • 2,144
  • 4
  • 15
  • 40
0
votes
1 answer

How can I append an item to an array in a React component using hooks?

I'm trying to build a chat room using Socket.io and React (hooks). I have events being emitted to and from the server, but when I try to update my messages array on the client side, the array is constantly replaced, rather than updated. Client…
Michael Lynch
  • 2,682
  • 3
  • 31
  • 59
0
votes
3 answers

JavaScript spread operator over a variable number of arguments?

The JavaScript spread operator can combine arrays like this: const a = [1,2,3]; const b = [4,5,6]; console.log([...a,...b]); Can I also use it when the number of arguments is unknown at "compile time"? In the following example I didn't know…
Konrad Höffner
  • 11,100
  • 16
  • 60
  • 118
0
votes
2 answers

Spread Syntax in Plugin not working in IE/edge

I have a plugin (react-form-with-constraints) in my react app (started with create-react-app and ejected). As this plugin uses spread syntax it doesn't work in IE and Edge. The error Edge gives: SCRIPT1028: SCRIPT1028: Expected identifier, string…
neekMarie
  • 11
  • 3