8 ms·

The triple dot syntax (` `) in JavaScript: rest vs. spread

66 points by kiyanwang 5y ago

wruza 5y ago
This SO page describes that in more history and detail: https://stackoverflow.com/questions/44934828/is-it-spread-syntax-or-the-spread-operator https://stackoverflow.com/questions/44934828/is-it-spread-sy... But that’s just pedantic if you ask me. A constant source of “me smart” attitude in conversations with those unfamiliar with the concept of grammar. It’s okay to drive a car without being a qualified engine-eer.
- rauschma 5y ago
  For what it’s worth: That’s not what motivated this blog post. It was that I often encounter people who see the three dots being used in parameter definitions or destructuring and don’t understand what is going on (because they think it is spreading). The section on triple dots not being operators is more of a side note.
  - freedomben 5y ago
    I don't think GP was saying your blog post was pedantic. I think they were referring to the stack overflow answer (which, unlike yours, was kind of pedantic). Your post was great. That said, since we're discussing pedantry, I truly do mean for this to be constructive. In the US at least, most people avoid putting the "Dr." title in their name unless they're in a context where it specifically matters (such as on a course syllabus that they're teaching in university, for example). Medical doctors is an area where this is much less true. The "Dr." title can come off to many people as very pedantic unless it is specifically relevant to the situation. Part of that is probably because historically in software development/engineering there's been a stigma against people that didn't graduate or go to university, so people feel insecure about others with a lot more education than them. It's gotten a lot better, but there's definitely still some of that happening even now. I also want to say _thank you_ for your books and blog! I've found them quite helpful over the years. Javascript isn't my primary language so I often have to look things up, and I always click on your posts first because I know that they will: 1. Be brief and to the point (not a bunch of extra unrelated stuff to sort through) 2. Be very clear (never adds more confusion) 3. Be technically accurate 4. Thoroughly answer the question in the title Thanks for all you do kind sir!
    - reillyse 5y ago
      So it seems like the good Doctor does have a doctorate in a very relevant field. Informatics is quite closely related to programming especially as I understand in continental European universities. I find that knowing that the author has studied in the field for 10+ years is very relevant and adds authority to the blog.
    - rauschma 5y ago
      Thanks for the kind words! W.r.t. the “Dr.”: It’s interesting how much reactions differ. In Germany, people tend to think you are smart if you have a title. In the States, people tend to think you’re incapable of functioning in the real world. I’m still experimenting. The title has worked well for me w.r.t. branding. Sometimes I mention it, sometimes I don’t.
  - BeefWellington 5y ago
    The confusion is a byproduct of using the same syntax in multiple places. It's even easy to fall into the trap of reasoning through the logic of what's happening as spreading, e.g.: "If I put the spread syntax right before the argument in my function, I'm telling the engine to essentially spread [ arguments[n] ... arguments[arguments.length] ] into this single argument value, where 'n' is the position of my spread syntax." It's not truly correct but if you think about it in this manner it actually fits reasonably well into what the result is.
melony 5y ago
How efficient is spread? Is the underlying data copied by value? Copied on write? Or copied by reference only?
- adam_arthur 5y ago
  Copies the value of the reference if pointing to objects, or copies the value directly if primitive. There is no "pass by reference" in javascript, following the traditional definition, just the same as Java
- goto11 5y ago
  The semantics are pass-by-value, but objects are always references, so only the references are copied. That said the JavaScript spec does not require any specific implementation and implementation may chose various optimizations.
- brundolf 5y ago
  In JS there's no such thing as a reference to a primitive, and there's no such thing as an automatic deep-copy of a non-primitive
- kevingadd 5y ago
  Less efficient than classic JS 'arguments' in the case where you would use that, but in most cases it won't be a problem.
- Tehnix 5y ago
  If you are using the spread operator to copy data to create a new JS object in a performance sensitive loop, it will actually have a big enough overhead that you’ll have performance gains by listing the fields explicitly. Spreading introduces an overhead at runtime since the object has to be traversed to figure out what it contains before JS will know what to copy over. Edit: just to be clear, unless you’re looping over a million items or something up there, you should not care :)
  - mst 5y ago
    I wonder if v8 can optimise that if the object is constructed such that it can infer a 'type' for it (IIRC if v8 can see the list of keys at object construction time it remembers what they are for a bunch of things, no idea if this is one of them.)
cmg 5y ago
Interesting, does the HN system replace three dots (...) with a space in titles? The title of the article contains (`...`), but the title here just has a space.
- andrethegiant 5y ago
  OP's OS may have replaced three periods (`...`) with an ellipsis character (`…`), which HN probably filters out in titles.
  - cmg 5y ago
    Oh that's interesting. I assumed people copy/pasted titles when they submit!
    - hombre_fatal 5y ago
      macOS has ellipsis autocorrection, for example. I've had it turned off forever but perhaps it applies to <input type="text"> boxes like in the submission form.
    - freedomben 5y ago
      I wondered that too for a while as well. I then had two people on my team, one on windows and one on macos, and we discovered that macos (or something on the computer) was converting those automatically. macos (or some application(s) on macos) also seems to use a unicode version of double quotes " instead of the standard ascii one. I spent a ridiculous amount of time debugging a line in a shell script that had the unicode quotes instead of "normal" ones and broke in ways that were horrible to figure out. Eventually I discovered that he had composed the line in Slack and pasted it in. Definitely something to watch out for!
      - david_allison 5y ago
        I've had the same problem with contributors corrupting JSON. For reference: TextEdit - Preferences - Disable 'Smart Quotes' and 'Smart Dashes'
captainmuon 5y ago
"..." in JS is a lot like "*args" in Python, isn't it?
- jakear 5y ago
  It unifies *args and **kwargs.
  - Tagbert 5y ago
    Supersymmetry syntax
  - ludamad 5y ago
    I'm not sure I understand the point about kwargs. That's a feature specific to python keyword params - what's the JS equivalent with ... here?
    - brundolf 5y ago
      They're probably talking about the fact that it also works on objects (JS equivalent of dicts)
      - jakear 5y ago
        Yes, {**{'hello':1}, **{'world':2}} === {...{hello:1}, ...{world:2}} The name "kwargs" is unimportant, I'm referring to the ** operator itself. Edit: worth mentioning this applies in the consuming named arguments sense as well: ({arg1, arg2, ...rest}) => {}
- culi 5y ago
  except it's not just for function arguments/parameters. It can be used in all sorts of contexts to spread out an array or object. E.g. ```js const object1 = { field1: true, field2: 42 }; const object2 = { ...object1, field3: 'the meaning of life, the universe, and everything' }; ```
- valbaca 5y ago
oblak 5y ago
Life was hard before these sugars. Just a couple of years ago I spent a few months with people stuck in the late 2000s, technologically speaking. Their JS was your typical jQuery spaghetti from that time period. Did not have any fun explaining the new stuff, not to mention Promises, to people who were somehow convinced they knew better than me.
- wppick 5y ago
  > stuck in the late 2000s jQuery is still the dominant paradigm. It's used on like 80% of websites. Wordpress is also still very widely used
  - WXLCKNO 5y ago
    Right, but not for new projects.
  - have_faith 5y ago
    Isn’t jQuery mostly dominant in stats because it’s included in WordPress by default (definitely in 90% of Wordpress themes). It’s been a while since I checked so this could be out of date.
    - MBCook 5y ago
      Until very recently it was also a dependency of Bootstrap. That’s why it’s in my project (can’t upgrade yet).
      - mst 5y ago
        When using classic Angular (some time ago) with Bootstrap I ended up rewriting the JS parts of any bit of Bootstrap we used as Angular components for ease of debugging (I know lots of people hated Angular but it was still easier to only debug one framework-ish thing at once). The existence today of e.g. react-bootstrap suggests that I'm not the only one to have had this idea.
kevingadd 5y ago
rest/spread is a nice bit of syntax worth using in code, but when refactoring be aware that it is not a 1:1 replacement for use of the classic JS 'arguments' builtin. They have different performance characteristics, and in particular a `Function.apply(this, arguments)` and `Function.call(this, ...args)` have different underlying implementations by spec even if they appear to do the same thing, which can mean the latter may be much much slower than you expect, potentially triggering additional garbage collections. I've had to flag this in code review a couple times :(
- leeoniya 5y ago
  for high perf code, i've found Object.assign() to be significantly faster than spread *. it also invoke getters, whereas spread does not. * this statement will self-invalidate in 180 days.
  - eurasiantiger 5y ago
    So you’re p<0.05 sure that it’s faster?
deleted 5y ago
[deleted]
aiddun 5y ago
Shameless plug, I introduced an ECMA proposal for a conditional rest and spread operator a few months ago and would appreciate support or suggestions if you would find it useful. https://es.discourse.group/t/conditionally-add-elements-to-declaratively-defined-arrays/1041 https://es.discourse.group/t/conditionally-add-elements-to-d...
- wruza 5y ago
  Not sure about the proposed form, but having proper expression-only ifs in arrays and objects would be nice. Including the spread syntax. [ "foo”, if (cond1) bar, if (cond2) ...baz, ] Pretty sure it was already proposed and rejected, but still.
  - archduck 5y ago
    This ain’t pretty, but it works: [ “foo”, ...(cond1 ? [bar] : []), ...(cond2 ? baz : []), ] --- Edit: note to self: read the link before commenting.
- somishere 5y ago
  Nice one. I run into this regularly, and it always leads to some kind of nullish spread spaghetti. I really like the idea of an empty / non-value operator that works on objects, arguments & iterables. Q - is it just a matter of liking posts on tc39 discourse to show support?
kamroot 5y ago
Any good resources to learn more about promises in-depth? Not your usual, cursory overview but in-depth with explanations for complicated usage (like promises returning promises etc.)?
- gherkinnn 5y ago
  The MDN Docs never disappoint[0]. Even more details can be gotten from the author of OP's link: Exploring JS[1]. And if you're wondering why the catch block isn't typed properly in Typescript, see this [2] thread. 0 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... 1 - https://exploringjs.com/es6/ch_async.html https://exploringjs.com/es6/ch_async.html 2 - https://github.com/microsoft/TypeScript/issues/6283#issuecomment-240804072 https://github.com/microsoft/TypeScript/issues/6283#issuecom...
- valbaca 5y ago
  It's meant for beginners, but I'm very partial to Eloquent JavaScript (I personally think it's one of the best programming books, period. And definitely one of the best JavaScript books) https://eloquentjavascript.net/11_async.html https://eloquentjavascript.net/11_async.html Full book: https://eloquentjavascript.net/ https://eloquentjavascript.net/
- rauschma 5y ago
  I have written four chapters about asynchronous JavaScript: – Foundations: https://exploringjs.com/impatient-js/ch_async-js.html https://exploringjs.com/impatient-js/ch_async-js.html – Promises for async programming: https://exploringjs.com/impatient-js/ch_promises.html https://exploringjs.com/impatient-js/ch_promises.html – Async functions: https://exploringjs.com/impatient-js/ch_async-functions.html https://exploringjs.com/impatient-js/ch_async-functions.html – Async iteration: https://exploringjs.com/impatient-js/ch_async-iteration.html https://exploringjs.com/impatient-js/ch_async-iteration.html

66 points by kiyanwang 5y ago

This SO page describes that in more history and detail: https://stackoverflow.com/questions/44934828/is-it-spread-syntax-or-the-spread-operator https://stackoverflow.com/questions/44934828/is-it-spread-sy... But that’s just pedantic if you ask me. A constant source of “me smart” attitude in conversations with those unfamiliar with the concept of grammar. It’s okay to drive a car without being a qualified engine-eer.

rauschma 5y ago
For what it’s worth: That’s not what motivated this blog post. It was that I often encounter people who see the three dots being used in parameter definitions or destructuring and don’t understand what is going on (because they think it is spreading). The section on triple dots not being operators is more of a side note.
- freedomben 5y ago
  I don't think GP was saying your blog post was pedantic. I think they were referring to the stack overflow answer (which, unlike yours, was kind of pedantic). Your post was great. That said, since we're discussing pedantry, I truly do mean for this to be constructive. In the US at least, most people avoid putting the "Dr." title in their name unless they're in a context where it specifically matters (such as on a course syllabus that they're teaching in university, for example). Medical doctors is an area where this is much less true. The "Dr." title can come off to many people as very pedantic unless it is specifically relevant to the situation. Part of that is probably because historically in software development/engineering there's been a stigma against people that didn't graduate or go to university, so people feel insecure about others with a lot more education than them. It's gotten a lot better, but there's definitely still some of that happening even now. I also want to say _thank you_ for your books and blog! I've found them quite helpful over the years. Javascript isn't my primary language so I often have to look things up, and I always click on your posts first because I know that they will: 1. Be brief and to the point (not a bunch of extra unrelated stuff to sort through) 2. Be very clear (never adds more confusion) 3. Be technically accurate 4. Thoroughly answer the question in the title Thanks for all you do kind sir!
  - reillyse 5y ago
    So it seems like the good Doctor does have a doctorate in a very relevant field. Informatics is quite closely related to programming especially as I understand in continental European universities. I find that knowing that the author has studied in the field for 10+ years is very relevant and adds authority to the blog.
  - rauschma 5y ago
    Thanks for the kind words! W.r.t. the “Dr.”: It’s interesting how much reactions differ. In Germany, people tend to think you are smart if you have a title. In the States, people tend to think you’re incapable of functioning in the real world. I’m still experimenting. The title has worked well for me w.r.t. branding. Sometimes I mention it, sometimes I don’t.
- BeefWellington 5y ago
  The confusion is a byproduct of using the same syntax in multiple places. It's even easy to fall into the trap of reasoning through the logic of what's happening as spreading, e.g.: "If I put the spread syntax right before the argument in my function, I'm telling the engine to essentially spread [ arguments[n] ... arguments[arguments.length] ] into this single argument value, where 'n' is the position of my spread syntax." It's not truly correct but if you think about it in this manner it actually fits reasonably well into what the result is.

melony 5y ago

How efficient is spread? Is the underlying data copied by value? Copied on write? Or copied by reference only?

adam_arthur 5y ago
Copies the value of the reference if pointing to objects, or copies the value directly if primitive. There is no "pass by reference" in javascript, following the traditional definition, just the same as Java
goto11 5y ago
The semantics are pass-by-value, but objects are always references, so only the references are copied. That said the JavaScript spec does not require any specific implementation and implementation may chose various optimizations.
brundolf 5y ago
In JS there's no such thing as a reference to a primitive, and there's no such thing as an automatic deep-copy of a non-primitive
kevingadd 5y ago
Less efficient than classic JS 'arguments' in the case where you would use that, but in most cases it won't be a problem.
Tehnix 5y ago
If you are using the spread operator to copy data to create a new JS object in a performance sensitive loop, it will actually have a big enough overhead that you’ll have performance gains by listing the fields explicitly. Spreading introduces an overhead at runtime since the object has to be traversed to figure out what it contains before JS will know what to copy over. Edit: just to be clear, unless you’re looping over a million items or something up there, you should not care :)
- mst 5y ago
  I wonder if v8 can optimise that if the object is constructed such that it can infer a 'type' for it (IIRC if v8 can see the list of keys at object construction time it remembers what they are for a bunch of things, no idea if this is one of them.)

cmg 5y ago

Interesting, does the HN system replace three dots (...) with a space in titles? The title of the article contains (`...`), but the title here just has a space.

andrethegiant 5y ago
OP's OS may have replaced three periods (`...`) with an ellipsis character (`…`), which HN probably filters out in titles.
- cmg 5y ago
  Oh that's interesting. I assumed people copy/pasted titles when they submit!
  - hombre_fatal 5y ago
    macOS has ellipsis autocorrection, for example. I've had it turned off forever but perhaps it applies to <input type="text"> boxes like in the submission form.
  - freedomben 5y ago
    I wondered that too for a while as well. I then had two people on my team, one on windows and one on macos, and we discovered that macos (or something on the computer) was converting those automatically. macos (or some application(s) on macos) also seems to use a unicode version of double quotes " instead of the standard ascii one. I spent a ridiculous amount of time debugging a line in a shell script that had the unicode quotes instead of "normal" ones and broke in ways that were horrible to figure out. Eventually I discovered that he had composed the line in Slack and pasted it in. Definitely something to watch out for!
    - david_allison 5y ago
      I've had the same problem with contributors corrupting JSON. For reference: TextEdit - Preferences - Disable 'Smart Quotes' and 'Smart Dashes'

captainmuon 5y ago

"..." in JS is a lot like "*args" in Python, isn't it?

jakear 5y ago
It unifies *args and **kwargs.
- Tagbert 5y ago
  Supersymmetry syntax
- ludamad 5y ago
  I'm not sure I understand the point about kwargs. That's a feature specific to python keyword params - what's the JS equivalent with ... here?
  - brundolf 5y ago
    They're probably talking about the fact that it also works on objects (JS equivalent of dicts)
    - jakear 5y ago
      Yes, {**{'hello':1}, **{'world':2}} === {...{hello:1}, ...{world:2}} The name "kwargs" is unimportant, I'm referring to the ** operator itself. Edit: worth mentioning this applies in the consuming named arguments sense as well: ({arg1, arg2, ...rest}) => {}
culi 5y ago
except it's not just for function arguments/parameters. It can be used in all sorts of contexts to spread out an array or object. E.g. ```js const object1 = { field1: true, field2: 42 }; const object2 = { ...object1, field3: 'the meaning of life, the universe, and everything' }; ```
valbaca 5y ago

oblak 5y ago

Life was hard before these sugars. Just a couple of years ago I spent a few months with people stuck in the late 2000s, technologically speaking. Their JS was your typical jQuery spaghetti from that time period. Did not have any fun explaining the new stuff, not to mention Promises, to people who were somehow convinced they knew better than me.

wppick 5y ago
> stuck in the late 2000s jQuery is still the dominant paradigm. It's used on like 80% of websites. Wordpress is also still very widely used
- WXLCKNO 5y ago
  Right, but not for new projects.
- have_faith 5y ago
  Isn’t jQuery mostly dominant in stats because it’s included in WordPress by default (definitely in 90% of Wordpress themes). It’s been a while since I checked so this could be out of date.
  - MBCook 5y ago
    Until very recently it was also a dependency of Bootstrap. That’s why it’s in my project (can’t upgrade yet).
    - mst 5y ago
      When using classic Angular (some time ago) with Bootstrap I ended up rewriting the JS parts of any bit of Bootstrap we used as Angular components for ease of debugging (I know lots of people hated Angular but it was still easier to only debug one framework-ish thing at once). The existence today of e.g. react-bootstrap suggests that I'm not the only one to have had this idea.

kevingadd 5y ago

rest/spread is a nice bit of syntax worth using in code, but when refactoring be aware that it is not a 1:1 replacement for use of the classic JS 'arguments' builtin. They have different performance characteristics, and in particular a `Function.apply(this, arguments)` and `Function.call(this, ...args)` have different underlying implementations by spec even if they appear to do the same thing, which can mean the latter may be much much slower than you expect, potentially triggering additional garbage collections. I've had to flag this in code review a couple times :(

leeoniya 5y ago
for high perf code, i've found Object.assign() to be significantly faster than spread *. it also invoke getters, whereas spread does not. * this statement will self-invalidate in 180 days.
- eurasiantiger 5y ago
  So you’re p<0.05 sure that it’s faster?

deleted 5y ago

[deleted]

aiddun 5y ago

Shameless plug, I introduced an ECMA proposal for a conditional rest and spread operator a few months ago and would appreciate support or suggestions if you would find it useful. https://es.discourse.group/t/conditionally-add-elements-to-declaratively-defined-arrays/1041 https://es.discourse.group/t/conditionally-add-elements-to-d...

wruza 5y ago
Not sure about the proposed form, but having proper expression-only ifs in arrays and objects would be nice. Including the spread syntax. [ "foo”, if (cond1) bar, if (cond2) ...baz, ] Pretty sure it was already proposed and rejected, but still.
- archduck 5y ago
  This ain’t pretty, but it works: [ “foo”, ...(cond1 ? [bar] : []), ...(cond2 ? baz : []), ] --- Edit: note to self: read the link before commenting.
somishere 5y ago
Nice one. I run into this regularly, and it always leads to some kind of nullish spread spaghetti. I really like the idea of an empty / non-value operator that works on objects, arguments & iterables. Q - is it just a matter of liking posts on tc39 discourse to show support?

kamroot 5y ago

Any good resources to learn more about promises in-depth? Not your usual, cursory overview but in-depth with explanations for complicated usage (like promises returning promises etc.)?

gherkinnn 5y ago
The MDN Docs never disappoint[0]. Even more details can be gotten from the author of OP's link: Exploring JS[1]. And if you're wondering why the catch block isn't typed properly in Typescript, see this [2] thread. 0 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... 1 - https://exploringjs.com/es6/ch_async.html https://exploringjs.com/es6/ch_async.html 2 - https://github.com/microsoft/TypeScript/issues/6283#issuecomment-240804072 https://github.com/microsoft/TypeScript/issues/6283#issuecom...
valbaca 5y ago
It's meant for beginners, but I'm very partial to Eloquent JavaScript (I personally think it's one of the best programming books, period. And definitely one of the best JavaScript books) https://eloquentjavascript.net/11_async.html https://eloquentjavascript.net/11_async.html Full book: https://eloquentjavascript.net/ https://eloquentjavascript.net/
rauschma 5y ago
I have written four chapters about asynchronous JavaScript: – Foundations: https://exploringjs.com/impatient-js/ch_async-js.html https://exploringjs.com/impatient-js/ch_async-js.html – Promises for async programming: https://exploringjs.com/impatient-js/ch_promises.html https://exploringjs.com/impatient-js/ch_promises.html – Async functions: https://exploringjs.com/impatient-js/ch_async-functions.html https://exploringjs.com/impatient-js/ch_async-functions.html – Async iteration: https://exploringjs.com/impatient-js/ch_async-iteration.html https://exploringjs.com/impatient-js/ch_async-iteration.html