3 ms·

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

by melony 4y ago

adam_arthur 4y 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 4y 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 4y 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 4y 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 4y 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 4y 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.)
ridiculous_fish 4y ago
It's bad and overused. Example: the top SO answers for "find max of an array" suggest using spread [1]: Math.max(...array) but this runs into implementation-defined limits on the number of arguments you can pass to a function, which is often as low as 65k; now your function is needlessly limited and works differently across browsers. 1: https://stackoverflow.com/questions/1669190/find-the-min-max-element-of-an-array-in-javascript https://stackoverflow.com/questions/1669190/find-the-min-max... and https://stackoverflow.com/questions/45123468/max-of-array-in-javascript https://stackoverflow.com/questions/45123468/max-of-array-in...
- culi 4y ago
  is `.reduce` the preferred method then?
  - zeroonetwothree 4y ago
    You could use `reduce` but it's a lot slower than a normal loop. And if your array is tiny (such that perf doesn't matter) you can just do the spread operator, so there's no real reason to ever use it.
  - deleted 4y ago
    [deleted]
Jasper_ 4y ago
const foo = [...bar]; is about 20x slower than const foo = bar.slice(); Yes, 20x. It only gets worse the more you do it -- it's both slower and wastes more memory, because it relies on the Iterator protocol, which actually compiles to something like this: const foo = []; const iter = bar[Symbol.iterator](); while (true) { const it = iter.next(); foo.push(it.value); if (it.done) break; } Minus some extra error handling with try/catch. Note, that all those calls to .next() every loop have to be dispatched; they can be optimized away, but V8 and JSC are very picky about when they can inline something like this. Also note that every call to .next() returns a brand new object, which means a lot of GC pressure. If you're copying an array of 20,000 items, you just created 20,000 tiny objects of garbage which all need to be GC'd. Last I asked around, everyone said escape analysis would solve this. But in the 7 years I've been writing JS, I've never seen a single engine correctly elide this object creation. Every so often I boot up d8 with its assembly dumper and confirm, that yes, it is still creating a heap object, even in simple cases, yes, even with all optimizations enabled. I try and ban all uses of the iterator protocol (for...of, spread, some kinds of destructuring assignment) in all the high-performance code I write. It's helpful, but it's a huge battery drain. And it's because they just spec'd the feature wrong.
- melony 4y ago
  Why does React use it so much?

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

by melony 4y ago

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

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 4y 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 4y 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 4y 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 4y 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 4y 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.)

ridiculous_fish 4y ago

It's bad and overused. Example: the top SO answers for "find max of an array" suggest using spread [1]: Math.max(...array) but this runs into implementation-defined limits on the number of arguments you can pass to a function, which is often as low as 65k; now your function is needlessly limited and works differently across browsers. 1: https://stackoverflow.com/questions/1669190/find-the-min-max-element-of-an-array-in-javascript https://stackoverflow.com/questions/1669190/find-the-min-max... and https://stackoverflow.com/questions/45123468/max-of-array-in-javascript https://stackoverflow.com/questions/45123468/max-of-array-in...

culi 4y ago
is `.reduce` the preferred method then?
- zeroonetwothree 4y ago
  You could use `reduce` but it's a lot slower than a normal loop. And if your array is tiny (such that perf doesn't matter) you can just do the spread operator, so there's no real reason to ever use it.
- deleted 4y ago
  [deleted]

Jasper_ 4y ago

const foo = [...bar]; is about 20x slower than const foo = bar.slice(); Yes, 20x. It only gets worse the more you do it -- it's both slower and wastes more memory, because it relies on the Iterator protocol, which actually compiles to something like this: const foo = []; const iter = bar[Symbol.iterator](); while (true) { const it = iter.next(); foo.push(it.value); if (it.done) break; } Minus some extra error handling with try/catch. Note, that all those calls to .next() every loop have to be dispatched; they can be optimized away, but V8 and JSC are very picky about when they can inline something like this. Also note that every call to .next() returns a brand new object, which means a lot of GC pressure. If you're copying an array of 20,000 items, you just created 20,000 tiny objects of garbage which all need to be GC'd. Last I asked around, everyone said escape analysis would solve this. But in the 7 years I've been writing JS, I've never seen a single engine correctly elide this object creation. Every so often I boot up d8 with its assembly dumper and confirm, that yes, it is still creating a heap object, even in simple cases, yes, even with all optimizations enabled. I try and ban all uses of the iterator protocol (for...of, spread, some kinds of destructuring assignment) in all the high-performance code I write. It's helpful, but it's a huge battery drain. And it's because they just spec'd the feature wrong.

melony 4y ago
Why does React use it so much?