0

I have this code here in Vue JS that saves an image file to the instance data:

this.post.media = data[0];

It's throwing the ES Lint error prefer-destructuring.

How does a person destructure that? It's confusing me because either way, I will still have this.post.media =. It's one set operation.

Can anyone tell me how to destructure this and why it could be a good idea?

agm1984
  • 15,500
  • 6
  • 89
  • 113
  • If you need details on destructuring assignment (which is what the lint error refers) check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment – scrappedcola Jul 17 '18 at 18:04
  • 3
    Seems like ES Lint is starting to get a little too opinionated on coding style. This is not the first question I've seen regarding this particular lint error. – Patrick Roberts Jul 17 '18 at 18:04
  • Possible duplicate of [How to fix Eslint error "prefer-destructuring"?](https://stackoverflow.com/questions/47395070/how-to-fix-eslint-error-prefer-destructuring) – Patrick Roberts Jul 17 '18 at 18:08
  • I will try to re-word the question title. In my opinion, it's an advanced destructuring question. It appears to be quite rare. I'd like to keep the question but I'm having a hard time wording it in a way that would help future Googlers find this rare case. – agm1984 Jul 17 '18 at 18:13
  • 1
    @agm1984 there's nothing wrong with having a duplicate question. You can even accept the answer below and accept the duplicate suggestion. Just having this question (as is) will help future readers by providing an additional query to turn up results. – Patrick Roberts Jul 17 '18 at 18:23
  • That's great. I had to wait a few minutes to accept the answer. I think it's great and I hope someone can benefit from it in the future. – agm1984 Jul 17 '18 at 18:29
  • I think this destructuring is maybe a bit lackluster with one element, but if you had multiple, it would be more attractive for sure. – agm1984 Jul 17 '18 at 18:30

1 Answers1

4

You can do it like this:

const arr = [1, 2, 3];
const post = { media: 0 };

[post.media] = arr;

console.log(post.media);

So in your case

[this.post.media] = data;

But in my opinion there's nothing wrong with your line of code. It's totally readable and very clear what you're trying to achieve.

Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
Egor Stambakio
  • 17,836
  • 5
  • 33
  • 35
  • 1
    I had no idea you could explicitly assign object properties via destructuring like that... if anything I agree with your last comment, OP's is much clearer IMO. – Andrew Li Jul 17 '18 at 18:04
  • 2
    Why would you use a global? If this was supposed to be illustrative example, it isn't illustrative at all. – Estus Flask Jul 17 '18 at 18:04
  • @estus I was trying to show that you can assign deep property of an object, and global here is the simplest choice in my opinion. – Egor Stambakio Jul 17 '18 at 18:06
  • Thanks. I feel like that almost makes it more confusing for the PHP-centered guys on my team, lol. I think I can see it though. It looks similar to `const [a, b, c] = data` but without the const because it's an instance property. – agm1984 Jul 17 '18 at 18:07
  • @agm1984 exactly. – Egor Stambakio Jul 17 '18 at 18:07
  • 2
    @estus I took the liberty of modifying the answer. I'm sure he won't mind ;) – Patrick Roberts Jul 17 '18 at 18:11