62

I wanted to shorten an object literal in ES6 like this:

const loc = this.props.local;

The reason is loc.foo(); is a lot easier to type than this.props.local.foo();

But now ESLint complains:

Use object destructuring: prefer-destructuring

I've read the error description on eslint.org but I don't understand it. They have an example which looks very similar to my code but theirs seem to be ok?

var foo = object.bar;

How can I fix the error without setting it to ignore in the .eslintrc file?

Timo Ernst
  • 15,243
  • 23
  • 104
  • 165

3 Answers3

108

change your code from:

const local = this.props.local;

to: 

const { local } = this.props;

They are equivalent and you can call local.foo() in the same way. except that the second use object destructuring.

Badis Merabet
  • 13,970
  • 9
  • 40
  • 55
  • 4
    Thanks, that did the trick. I wonder why Airbnb styleguide thinks this is important. Imho it makes things just more complicated. – Timo Ernst Nov 20 '17 at 16:02
  • 1
    It's an ES6 feature used to unpack variables from arrays or objects. this syntax create an array from variables: `var x = [y, z]` . destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable. var [y, z] = x. same thing is true for objects. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment. That's it! – Badis Merabet Nov 20 '17 at 16:17
  • 12
    Yeah, this makes sense for extracting multiple values but not for a single one. Airbnb styleguide is a bit to strict at this point imho. – Timo Ernst Nov 20 '17 at 17:31
  • 1
    There is a typo here "lacal" should be "local" – MattG Mar 06 '18 at 11:35
  • @BadisMerabet Awsome :) – Bourbia Brahim Dec 20 '18 at 14:25
  • @BadisMerabet can you help with the redefining case ?: ``` let subdomain = {}; if (isBlank) { subdomain = object.property; } ``` – Alex Strizhak Nov 13 '20 at 15:36
  • Hi, is it possible to auto-fix this error with some eslint plugin(s)? – NeoZoom.lua Mar 26 '22 at 14:30
7

It's a new construct in ES 6 that allows you to match property of an object in assignment. The syntax you need is:

const { local: loc } = this.props

which translates to: "declare a constant loc and assign it the value of property local from this.props".

Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
ilmirons
  • 624
  • 6
  • 16
3

It's telling you to use

const {props: {local: loc}} = this;
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • 48
    This is so much uglier and confusing than just accessing a property normally. – Martin Dawson Jan 10 '18 at 14:14
  • 1
    @MartinDawson I agree, but you need to tell that the person who enabled their linter's `prefer-destructuring` rule :-) – Bergi Jan 10 '18 at 14:19
  • 1
    @Bergi I'd prefer to tell the person that even added that rule to the linter. Destructuring only makes sense to me when assigning to multiple variables at a time as it reduces repetition. Is there a way to only have the rule emit an error when it detects multiple consecutive declarations / assignments from the same object? – Patrick Roberts Jul 17 '18 at 18:17
  • 3
    @PatrickRoberts There's also repetition that can be avoided when variable name and property key are the same. To avoid the rule when this is not the case(as in this question), you seem to be able to turn `enforceForRenamedProperties` off. I don't know a setting that only enforces destructuring when there are multiple targets, you might want to file an issue for that. – Bergi Jul 17 '18 at 19:33
  • The more I use eslint, the more I realise a ton of rules doesn't mean more clarity – user3491125 Mar 14 '22 at 12:54