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

Usage of Spread Operator in Array().fill()

When using a spread operator, a new object is created so: const foo = { a: 1 } const m1 = {...foo} const m2 = {...foo} m1 === m2 // false However, when using Array.fill(), this is not the case: const m3 = Array(2).fill({...foo}) m3[0] === m3[1] //…
nemo
  • 334
  • 1
  • 3
  • 10
0
votes
0 answers

Javascript spread operator replace object's nested array value

I have the following sample piece of code that I'm using to learn about the spread operator and updating react state. I understand how it is working, but I don't fully understand how the return {...inst, hobbies} syntax functions to update the…
mo_maat
  • 2,110
  • 12
  • 44
  • 72
0
votes
2 answers

Using spread syntax in Reducer

I am trying to use the spread syntax to update the state inside the reducer The state consists of an object, and the object has an array, I would like to update all properties in the object, except for the array, which I would like to add the next…
user3808307
  • 2,270
  • 9
  • 45
  • 99
0
votes
1 answer

Using spread operator to setState in multiple succession

I have some values stored in local storage. When my component mounts, I want to load these values into the state. However, only the last property being added is added to the state. I've checked the values on my localStorage, and they are all there.…
OctaviaLo
  • 1,268
  • 2
  • 21
  • 46
0
votes
1 answer

Cannot understand why spread operator is used

I'm using ngx-charts (charts library for Angular2+) and I found this line of code that I don't understand. @Input() activeEntries: any[] = []; /* ... */ /* Then, in a function */ this.activeEntries = [...this.activeEntries]; To me, it has no…
Valentin Coudert
  • 1,759
  • 3
  • 19
  • 44
0
votes
1 answer

How to simplify with spread syntax es6

How to simplify the code, I tried to generate the object and call for each change method and depends on arguments(newValues) I change some field, seems I have duplicate code, how to avoid it this case? Should I use some more difficult method to…
Palaniichuk Dmytro
  • 2,943
  • 12
  • 36
  • 66
0
votes
0 answers

Passing object to GSAP. Rotation and spread syntax collision?

I have a very strange problem with passing object to GSAP animation. At using variable called "clone" every parameter is working instead of "rotation" but when I will use "clone2" rotation is working too: animate(initial = false) { let scrolled…
Artimal
  • 651
  • 7
  • 24
0
votes
0 answers

How to use spread syntax to create variables from a JSON file?

{ "eggs":{ "protein":5.5, "count":10, "serving":3, "_comment":"Serving is per eggs" }, "chicken":{ "protein":23, "weight":900, "serving":4.5, "_comment":"Serving is per 100…
frank3stein
  • 706
  • 2
  • 7
  • 16
0
votes
1 answer

FormGroup and spread operator

I have an error that I don't understand with ReactiveForms. output var from roomsGroup returns an array of object like I wish. Then I use spread operator to pass all objects to the form group in roomingGroup. But only the first object is set. I…
Swarovski
  • 581
  • 2
  • 8
  • 25
0
votes
2 answers

Mapping array to object using spread

I would like to transform the follow array into a slightly modified object (see below). I'm also trying to practice using the spread operator, but haven't been able to figure out how to do it. I'm trying to avoid using lodash (for educational…
Campo Blanco
  • 37
  • 1
  • 6
0
votes
1 answer

If Spread Operator is not working in redux

If Spread Operator (...) is not working in redux. The spread operator is used for array construction and destructuring, and to fill function arguments from an array on invocation. A case when the operator spreads the array (or iterable object)…
PremKumar
  • 1,282
  • 4
  • 25
  • 43
0
votes
1 answer

ES2015 initialization of a module not works

my attempts to build a module wrapping a collection fail i have something like: // topic: chess gaming // file: src/core/Refs.js const COLS = 'abcdefgh'.split('') const ROWS = '12345678'.split('') const ALL = new Map() class Ref { constructor…
Hefeust
  • 501
  • 1
  • 5
  • 14
0
votes
1 answer

how to make a new array from specific property within each original array item

I have an array of items with this structure: originalArray = [ { product: { price: 10}, shipping: {...} }, { product: {price: 20}, shipping: {...}, } ] I want to make a new array that is just the products from each original…
mheavers
  • 29,530
  • 58
  • 194
  • 315
0
votes
1 answer

Why the obj is being mutated when I am modifying the cloned obj ( using {...})?

Lets take an object d. var d = { "e":{ "f": 3 } } Now copying d to t with {...} and assigning new prop. var t = {...d} t.e._f = 4 Why the object d is being mutated to { "e": Object { "_f": 4, "f": 3 } }
0
votes
1 answer

Using reserved keywords as object key with spread operators

Say I have an object that looks like this const props = { delete: function() { // stuffs }, hello: 'hello', other: 'other', } Now say I use spread operators and do something like this const {hello, ...otherStuffs} =…
Prasanna
  • 4,125
  • 18
  • 41