javascript three dots syntax

Question

I'm using Vuetify for a vue app, in this file I saw a very strange syntax which I can't find what it is

on line 38:

const data = {
    attrs: { disabled: this.disabled },
    class: this.classes,
    props: {},
    directives: [{
      name: 'ripple',
      value: this.ripple || false
    }],
    on: {
      ...(this.$listeners || {}),  // <<<---- here
      click: this.click
    }
  }

can anyone tell what is that three dots? any articles about this would be nice

thanks

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator — jeznag, Nov 16 '17 at 02:48
silly me, been searching `js ...()` about an hour with no result! — Developerium, Nov 16 '17 at 02:49

score 6 · Answer 1 · answered Nov 16 '17 at 02:47

6

That's the spread operator! It grabs all the properties from the object.

In that example, it'll copy the object without mutating it.

answered Nov 16 '17 at 02:47

xavdid

4,430
2
18
29

2

It'll shallow copy, which has implications. – Dave Newton Nov 16 '17 at 02:50

score 3 · Answer 2 · answered Nov 16 '17 at 03:04

it's a spread operator, which is used in ES6 for both objects and arrays in Javascript. Here, the returned value of (this.$listeners || {}) is extracted. This returned value, combined with click: this.click is added into another empty object, following the "on: "

javascript three dots syntax

2 Answers2