13

I'm looking at an ES6 class definition and don't understand the arguments to the constructor. Here's the class:

export class Modal {
    constructor($modal, {size = null,} = {}) {
        // stuff
    }
}

I'm confused by this {size = null,} = {}. Is that a single argument? What does it mean?

flyingL123
  • 7,686
  • 11
  • 66
  • 135
  • 2
    possible duplicate of [Where can I get info on the object parameter syntax for javascript functions?](http://stackoverflow.com/q/10804982/1048572) and [what does (state = {}) => state means](http://stackoverflow.com/q/35526463/1048572) – Bergi May 05 '16 at 19:11

1 Answers1

13

It's an object destructuring with a given default value.

If you pass an obj like

{ size: true }

you can access the "size" inside the constructor like a normal variable

export class Modal {
  constructor($modal, {size = null } = {}) {
    console.log(size); // prints the size value from the given object
  }
}

If you don't pass anything or you pass an object without "size", size will be null. You can make more of such assignments. Just seperate them by commas.

Example:

constructor($modal, { size = null, foo, bar = "test" } = {})

In this case if you pass an object without property "foo" it will be undefined, the rest acts like I mentioned above.

Also it's worth mentioning that you have to add = {} at the end of destructuring assignment in the constructor declaration. It's in case when you don't pass anything. Otherwise you would have to pass some object (may be empty).

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
Jakub Rożek
  • 2,110
  • 11
  • 12