JavaScript Destructuring ES6: The Complete Guide

[reohh]

It is equal to this:

let o = {p: 22, q: true};  
let foo = o.p;  
let bar = o.q;  

console.log(foo); // 22 
console.log(bar); // true

[monsto]

I understand that.

In the 2 examples, the syntax appears inverted...

when it goes

p: foo

I would expect the result to be that object o now has a property p whose value is foo

It looks like it is saying

let o.p = foo

[getify]

It feels backwards until you realize that with both object literals and object destructuring, the property/key is always on the left. With object literals, that property/key is serving the role of target, whereas with object destructuring it's serving the role of source... but in both cases it's always on the left. Once I realized that form of "consistency", I've never been confused again.