Order of evaluation in if statement in with ES6 destructuring

Question

I recently stumbled upon the new Destructuring Javascript feature that is available with ES6.

Found out a weird situation where i am not really sure of what is going on. Hopefully you guys will help me understand.

If i type this in my console:

var car={}
var {undefinedProp: es6Magic} = car;

I get an undefined. Looks fair to me, since car has no defined property.

But if i use an If statement around it i get a different and unexpected result:

function testPriorities() {
      var car = {}
      if ({
          undefinedProp: es6Magic
        } = car) {
        console.log('how do i even get here', es6Magic);
      }
    }

What the hell?

Why is that es6Magic is assigned with an undefined value and it still returns true?

What rules are being applied when running the if statement?

`({undefinedProp: es6Magic} = car)` returns an empty object `Object {}`. So, it's not false.. — choz, Jun 29 '17 at 16:44
you can't do destructuring in that way I'm afraid. Other than the fact that you're assigning rather than checking, the first part of the check is being parsed as an object, and not as syntactic sugar that is destructuring — towc, Jun 29 '17 at 16:44

score 3 · Accepted Answer · answered Jun 29 '17 at 17:49

If i type this in my console:
var car={}
var {undefinedProp: es6Magic} = car;
I get an undefined.

But not because es6Magic has an undefined value (it does, I mean it's not the reason). It's because variable declarations have no result value, and your complete snippet does not have a result (unlike expression statements).

But if i use an If statement around it i get a different and unexpected result:
var car = {}
if ({undefinedProp: es6Magic} = car) {
    console.log('how do i even get here', es6Magic);
}
I guess that is true because the car exists, but why does it evaluate differently from the console?

Actually you'll still get the undefined result from the last statement, after the console.log output.

And yes, the if condition evaluates to a truthy value because car exists - that's what assignment expressions always do. This doesn't even have anything to do with destructuring, … = car always evaluates to the right hand side car regardless what the left hand side target expression is.

You can also try

> var car = {}, es6Magic;
undefined
> ({undefinedProp: es6Magic} = car); // no `var` - plain assignment!
[object Object]

That last object Object exists because Car exists? – Tiago Bértolo Jun 29 '17 at 18:06 — Tiago Bértolo, Jun 29 '17 at 18:06
Yes, it literally *is* the `car` object. – Bergi Jun 29 '17 at 18:25 — Bergi, Jun 29 '17 at 18:25

Anurag Awasthi · Answer 2 · 2017-06-29T17:01:53.397

1

The if statement executes because you are basically doing assignment inside if statement which always return the assigned value which in this case is {} which evaluates to true.

var b

if(b={}){console.log("what!!")}

function a(){
  var car={}
  return {undefinedProp: es6Magic} = car;
}

console.log(a())

edited Jun 29 '17 at 17:01

answered Jun 29 '17 at 16:41

Anurag Awasthi

6,115
2
18
32

Does not work with undefined = undefined, so this isn't true. – Tiago Bértolo Jun 29 '17 at 16:45
basically it "ifs" the value of the thing you are making it into (and undefined is falseish) – Naftali Jun 29 '17 at 16:46
1

@TiagoBértolo The assignment returns the value which is being assigned(on the right side of `=`) which in your question is `{}` and `{}` evalutes to `true` – Anurag Awasthi Jun 29 '17 at 16:50
@anuragasaurus But what rule are you applying to say that? – Tiago Bértolo Jun 29 '17 at 16:51
es6Magic is assigned with an undefined value and it still returns true. – Tiago Bértolo Jun 29 '17 at 16:59

score 1 · Answer 3 · answered Jun 29 '17 at 16:43

The console shows undefined because a variable declaration doesn't return anything, it declares a variable.

The second version works because {foo: bar} is interpreted as an object literal, which you are assigning to. That returns the object, which is truthy. I would expect that to throw an error, which it does in the console:

Uncaught SyntaxError: Invalid destructuring assignment target

The literal shouldn't be a valid target, but a transpiler would most likely break that.

Everything is perfectly valid in my code sample. Not sure what you are refering to. Can you clarify? — Tiago Bértolo, Jun 29 '17 at 16:49

Order of evaluation in if statement in with ES6 destructuring

3 Answers3