DEV Community

The tale of three dots in Javascript

Gábor Soós on October 10, 2019

One upon a time, there was a significant upgrade to the Javascript language called ES6/ES2015. It introduced many different new features. One of th...

Read full post

WORMSS • Oct 11 '19 • Edited

You have a bug in your code.

// old way
const fruitsAndVegetables = fruits.concat(vegetables);
const fruitsAndVegetables = fruits.push('carrot');

The second line will set fruitsAndVegetables to the count of the new length of the array. Not the reference to the array itself

Gábor Soós • Oct 11 '19

Thanks for noting!

WORMSS • Oct 11 '19

Hmmm, now you are mutating fruit array.
Are you sure you were not trying to do something like

const fruitsAndVegetables = fruits.concat(vegetables);
const fruitsAndVegetables = fruits.slice();
fruitsAndVegetables.unshift('carrot');

I don't believe there is a neat little 1 liner to do the equivalent without wrapping 'carrot' in a temp array.

Gábor Soós • Oct 11 '19

I feel the same way...the new syntax is much more compact.

Adam Crockett 🌀 • Oct 10 '19

I still use the "old way" about as much as the new way ... because I'm old? Actually, no, I think I am used to manipulating things with methods not operators. But JavaScript is changing, pipeline, bind operators for example.

Fun things to know: spread does exist in other languages but in most cases it doesn't do as much as it does in JavaScript.

Gábor Soós • Oct 11 '19

It is an addition, syntactic sugar, old things still work. It has its pros and cons.

Adam Crockett 🌀 • Oct 10 '19 • Edited

Everything is syntax, valid or no it's still parsed and lexed to build an AST, so "part of the syntax" seems broad. If it isn't an operator perhaps it's more like a comma or semi token? But those describe white space, spread does a heck of a lot more, I'm not sure what it is now... Sorry to nitpick 😅

James Browning • Oct 15 '19

If we don't need the exact arguments before the rest, we don't have to name them. This example also works:

This isn't correct, parameters always have to be named, none of the popular engines support this.

Gábor Soós • Oct 15 '19

Thanks for noting

Daniel Rodríguez Rivero • Oct 11 '19

I was about to say the same. What he wrote is just wrong syntax. I may work if it is compiled to regular function, but in a native implementation it will not work.

Gábor Soós • Oct 11 '19

It is just old, not wrong, still runs in Chrome. Bad syntax would be non backward compatible breaking change.

Daniel Rodríguez Rivero • Oct 11 '19

It is not just old, is wrong. You can of course declare such function because the permissive nature of javascript, but if you try to run it you are going to get an error because arguments is an undefined variable. You can see it yourself in the (hopefully) attached screenshot.
But you don't have to trust me, is on the spec: developer.mozilla.org/en-US/docs/W...

Gábor Soós • Oct 14 '19

I had a misunderstanding here, thanks for linking the documentation

Daniel Rodríguez Rivero • Oct 14 '19

No problem. JS is a tricky language (sometimes 😄).

Adam Crockett 🌀 • Oct 10 '19

As soon as I wake up tomorrow, I'm gonna check this out in some console, I ask because 'assign' doesn't copy getters and setters, having used that for years and years, it came as a bit of a shock.

Daniel Worsnup • Oct 11 '19

I, too, was curious about this, so I decided to run some code in the console! It looks like both spread and assign will copy "normal" getters, but they will not copy getters that are explicitly marked as non-enumerable using Object.defineProperty or Reflect.defineProperty:

const obj1 = {
  get test() { return 'test' }
}

const obj2 = {}
Reflect.defineProperty(obj2, 'test', {
  enumerable: false,
  get() { return 'test' }
})

console.log(Object.keys(obj1)) // ['test']
console.log(Object.keys(obj2)) // []

const obj1Spread = { ...obj1 }
const obj1Assign = Object.assign({}, obj1)

const obj2Spread = { ...obj2 }
const obj2Assign = Object.assign({}, obj2)

console.log(Object.keys(obj1Spread)) // ['test']
console.log(Object.keys(obj1Assign)) // ['test']
console.log(Object.keys(obj2Spread)) // []
console.log(Object.keys(obj2Assign)) // []

However, when an object is an instance of a class that defines a getter, the getter is on the object's prototype and so it doesn't show up during enumeration and therefore doesn't get copied with object spread/assign:

class MyClass {
  get test() { return 'test' }
}

const obj = new MyClass()
const objSpread = { ...obj }

console.log(Object.keys(obj), Object.keys(objSpread)) // [], []

I would assume this behavior to be consistent with setters.

Gábor Soós • Oct 11 '19

Noted, updated the example.

Adam Crockett 🌀 • Oct 10 '19

Do setters and getters and discriptors get coppied?

Gábor Soós • Oct 11 '19

Added it as a warning, thanks.