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

How to document the return of a function, that is made from combining a spread objects with other properties?

I've got code that spreads the returned object, and adds in a new property It looks like this : /** * it does the things * @param {Object} input object containing id and key * @param {Object.string} id unique id to associate with return value *…
AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173
0
votes
2 answers

Why would you use the spread operator to spread a variable onto itself?

In the Google Getting started with Node.js tutorial they perform the following operation data = {...data}; in the code for sending data to Firestore. You can see it on their Github, line 63. As far as I can tell this doesn't do anything. Is there a…
Sam Dean
  • 433
  • 7
  • 22
0
votes
0 answers

Pass Rest parameter (ellipses dot) to another method in JS

I need to customize some methods, for example rollbar has method for log error: public error(...args: Rollbar.LogArgument[]): Rollbar.LogResult; function myErrorLogger(...args){ ... rollbar.error(args); //or rollbar.error.apply(null,…
Hamid
  • 1,099
  • 3
  • 22
  • 37
0
votes
1 answer

JavaScript - adding extra keys values to an object using spread operation or alternative approaches

Here is the code: let bucket = [[],[],[],[],[],[],[],[],[],[]]; bucket = {...Object.keys(bucket) .sort((a,b) => b-a) .filter(key => key > 0) .map(key => '-'+key), …
Vahe
  • 1,699
  • 3
  • 25
  • 76
0
votes
1 answer

How to spread a variable in AutoHotkey?

In JavaScript, we use the spread operator to spread an array of items, e.g. const arr = [1, 2, 3] console.log(...arr) // 1 2 3 And I want to achieve a similar effect in AHK: Position := [A_ScreenWidth / 2, A_ScreenHeight] MouseMove Position ; …
Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
0
votes
1 answer

TS: Typing higher order function with rest params ...args

I wrote a little helper function in Typescript but I am getting the error message A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556) export type TDemethodise = (f: Function) => (...args: any[]) => void export…
flooz
  • 143
  • 1
  • 4
0
votes
0 answers

Read-only error when using spread synatax in JavaScript modules

quick question: I want to use spread operator to push elements in my to-dos array. It works, when i declare an array and use it in creator function with spread syntax in same js file. However, i want to use a dedicated main.js or helper.js file to…
Kerem Z
  • 13
  • 5
0
votes
3 answers

I want to populate an array [ ] , with a spread syntax by a given number of times

So I have a var size that may vary which counts how many arrays are passed in an argument. concatenate(...arg){ let size = arg.length ; } I want to use spread syntax by a number of times equal with that size ,more specific I want to concatenate…
0
votes
0 answers

What does the three dots (...) mean in React Native when it includes "style"

I'm doing a course of React Native, and in one class about "Custom Components" and "props" i came across this: {...props.style} when i asked the teacher told me this: Three dots in JavaScript is called the Spread Syntax or Spread Operator. This…
danistor_m
  • 79
  • 1
  • 10
0
votes
1 answer

JavaScript: Pushing nested object key value pairs

I'm fetching JSON data from Firebase and wanting to transform the data in a different way. My question is how do I push a nested object key value pair into a single object? Here is my code... const postData = []; for (const key in data) { …
BGetchel
  • 11
  • 2
0
votes
0 answers

Spread types may only be created from object types.ts(2698)

I was refactoring the other people's code. The original fragment was: this.respondValue$ .subscribe((partForm) => { this.sale = { ...this.sale, ...partForm }; }); I wanted to introduce unsubscribe…
E F
  • 474
  • 3
  • 15
0
votes
2 answers

manipulating/filtering objects' props from an API with spread operator

Doing a React/Next course, in a momment we had to fetch an API returning a list of objects, with data to fill the page. It is done on Next's getStaticProps, and passed to frontend as props, manipulating some of the data to best fit, and ignoring…
0
votes
1 answer

Spread operator working in console.log and not working when trying to return or set in variable

So, I have a problem with a spread operator which is really annoying me right now. I searched a lot and nothing helped me. When I used console.log(...val) it shows data perfectly without any error, but when I try const data = ...val it throws an…
Dario K
  • 306
  • 1
  • 4
  • 15
0
votes
1 answer

Adding an item to cart, which is already added with another count

I am building an eCommerce app, and with the below code I'm implementing the add to cart functionality. The tricky part is when I try to add an item to cart that's already added with a different count. So in the below code, I'm not able to…
0
votes
1 answer

Unable to define an imported object from a different file , store in a state and spread it in another variable in React

I have defined an object which is the structure of the form which I will use. This file is createCourseForm.js and I am trying to import it in createCourseMain.js and store it in a state. Then I am trying to spread it in another variable so that I…
Avinash Toppo
  • 349
  • 1
  • 2
  • 10