ES6 default parameters with destructured object as second parameter referencing first parameter

Question

I am writing a method that takes two parameters: the first a jQuery object that contains a form, the second an "options" object with default parameters, some of which reference the form in the first parameter.

I know that a default parameter can reference the value of a default parameter which precedes it, so I wonder why my code is failing.

const validation = {
  validateForm(form, {
    btn: form.find('button'),
    action: null,
    displayErrInline: form.attr('validate') === 'inline',
    disableValidation: false
  }) {
    // do stuff
  }
};

Can someone please explain what is wrong with this?

score 1 · Accepted Answer · answered Nov 21 '17 at 14:54

I figured out what I was doing wrong. I was using colons to provide default values to the destructured object instead of the assignment variable.

Here is an example of the correct way to pass default values to a destructured object in a function's parameters:

const validation = {
  validateForm(form, {
    btn = form.find('button'),
    action = null,
    displayErrInline = form.attr('validate') === 'inline',
    disableValidation = false
  }) {
    // do stuff
  }
};

Optionally, I can assign an empty object (= {}) as the default value for the second argument to avoid errors if no second parameter is passed.

ES6 default parameters with destructured object as second parameter referencing first parameter

1 Answers1