javascript three dots syntax [duplicate]

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

Answer 1

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

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

Answer 2

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: "