How I destructure in params and options for each functions?

Question

For better code ES6, is good to use destructure to avoid duplicaton, right?

So, how I use same params and options in other functions, inside Class?

Example like:

const params = [
  title,
  text,
  confirm,
  buttonConfirm || "Ok",
  buttonCancel || "Cancel",
];
const options = {
  title: params.title,
  text: params.text,
  confirmButtonText: params.buttonConfirm,
  cancelButtonText: params.buttonCancel,
  showCancelButton: Boolean(params.confirm),
};

class Alert {
  success(...params) {
    alertPlugin({
      ...options,
      type: "success",
    }).then(
      () => params.confirm()
    );
  },

  error(...params) {
    alertPlugin({
      ...options,
      type: "error",
    }).then(
      () => params.confirm()
    );
  },

  warning(...params) {
    alertPlugin({
      ...options,
      type: "warning",
    }).then(
      () => params.confirm()
    );
  }
}

export default Alert;

And I call method with this code:

this.$alert.success({
  "Title custom",
  "Description custom",
  this.callbackSuccess,
  "Yeah!",
  "Noo!",
});

You can't use a spread operator to spread an object's properties to an array, it has to be in another object, ie `{...this.options}`. Look at [Object.values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values) if you want to get the object's values in array form — Patrick Evans, Nov 07 '17 at 20:07
@AdrianoResende That call to success isn't valid JS. Objects `{}` have keys and values whereas arrays `[]` have a list of values. The spread operator does different things for objects than it does in the parameter definition of a function. It seems like you want to join the param names in the class definition with the params passed into a function. You could do that with `_.zip` and `_.fromPairs` but I suggest finding a different approach. Namely, positional parameters. Or toss the class and make simple functions to alert.. — ktilcu, Nov 07 '17 at 20:15

score 0 · Answer 1 · answered Nov 08 '17 at 13:51

I think you are severely misunderstanding how destructuring works. It's not like a template, it does not help to avoid duplication. It just provides a nicer syntax to create variables that are initialised from object properties.

Rest/spread syntax helps with calling functions with multiple arguments, but all it does it create/take an array in the local scope. It does not help to avoid duplication. (Btw, spread syntax in object literals is invalid in ES6, although it is proposed to work in the future).

To avoid repeating code, use functions (as always!). In your case, it could be

function getOptions(type, [title, text, confirm, buttonConfirm = "Ok", buttonCancel = "Cancel"]) {
  return {
    title,
    text,
    confirmButtonText: buttonConfirm,
    cancelButtonText: buttonCancel,
    showCancelButton: Boolean(confirm),
    type
  };
}

export function success(...args) {
  return alertPlugin(getOptions("success", args));
}
export function error(...args) {
  return alertPlugin(getOptions("error", args));
}
export function warning(...args) {
  return alertPlugin(getOptions("warning", args));
}

(no need to make Actions a class - those methods should've been static as they don't need any instance, and that's what one doesn't do either).

How I destructure in params and options for each functions?

1 Answers1