0

I am in the process of building a React app which I have used Create React App as the build-environment. Within one of my (class-based) components I have the following line within the componentDidUpdate() method:

const toast = ([] = this.props.toast.toast);

If my understanding is correct, this is ES2016 syntax for setting default values if a variable is undefined. (Please let me know if this is not correct, although it's not the primary point of this question).

When my React app renders, I get the following warning in the console: Unexpected empty array pattern no-empty-pattern.

I understand that ESLint "moaning" about the fact it's an empty array. But as I want an empty array in that situation, why does this cause a warning?

Can I simply tell ESLint to ignore it (using // eslint-disable-line no-empty-pattern)?

Sheixt
  • 2,546
  • 12
  • 36
  • 65
  • 1
    Nope, you're understanding is way off. It's possible to use the `=` sign to do default value with parameters, `function(param = []) {}`, but for a typical assignment, you'd want `const toast = this.props.toast.toast || [];`, which is just a logical OR short-circuit. – Emile Bergeron Jan 17 '20 at 18:23
  • Does this answer your question? [JavaScript OR (||) variable assignment explanation](https://stackoverflow.com/questions/2100758/javascript-or-variable-assignment-explanation) – Emile Bergeron Jan 17 '20 at 18:30
  • Another one about function parameters: [Is there a better way to do optional function parameters in JavaScript?](https://stackoverflow.com/q/148901/1218980) which points to another good duplicate. – Emile Bergeron Jan 17 '20 at 18:31
  • [Default values when destructuring](https://stackoverflow.com/q/49233891/1218980) which also has a duplicate leading to a simple `||` when the value is not specifically `undefined`. – Emile Bergeron Jan 17 '20 at 18:32
  • Also, about [`no-empty-pattern`, looking at the documentation](https://eslint.org/docs/rules/no-empty-pattern) for the rule explains quite well what's happening. – Emile Bergeron Jan 17 '20 at 18:36
  • 1
    Thanks all for the links, turns out it was Prettier adjusting my errant syntax to produce the line I included in the question. This was compounded by my lack of experience with ES2016 and making some frankly terrible assumptions. – Sheixt Jan 17 '20 at 18:48

1 Answers1

3

That is not doing what you think it's doing at all. It's not setting anything to an empty array, nor is it a syntax for default variables. What it's doing is abusing array destructuring syntax without benefit. Try it yourself: if you execute this code, the value of toast will be undefined:

const toast = ([] = undefined);

There is no ES6 syntax for default variables, as far as I know, other than default function parameters, which is quite different from what you're using. If you want default variable values, just use the tried-and-true method of short-circuiting:

const toast = this.props.toast.toast || [];

To elaborate, proper array destructuring works something like this (assuming this.props.toast.toast is an array):

const [first, second, third] = this.props.toast.toast;
first === this.props.toast.toast[0]; // true
second === this.props.toast.toast[1]; // true
third === this.props.toast.toast[2]; // true
IceMetalPunk
  • 5,476
  • 3
  • 19
  • 26