使用'&&'作为if语句的简写？

Question

While I was killing time looking up Javascript shorthand patterns, I came across an interesting way of expressing an if statement here . The following works:

​var var1 = 5;
var var2 = 1;

var1 == 5 && var2++;

I think that's a totally cool (and shorter, cleaner) way of writing an if statement that only needs to do one operation. However, I ran into an issue with the following code as soon as I tried something else with it:

​var var1 = 5;
var var2 = 1;

var1 == 5 && var2 = 2;

Instead of working like the first code snippet, my test throws an error:

Uncaught ReferenceError: Invalid left-hand side in assignment

Why doesn't this work, and why is the left-hand side of my statement being called out as incorrect as opposed to the right hand?

Answer 1

This doesn't work because the && operator has higher precedence than the = operator . In other words, your code is interpreted like this:

(var1 == 5 && var2) = 2; 

If you manually put parentheses around the assignment, it will be interpreted correctly.

var1 == 5 && (var2 = 2); 

Other people will reprimand you for writing code like this, saying that is a bad idea because it makes the intent of the code harder to read--which is true, especially for people unfamiliar with this idiom--but it is important to try it out and experiment with things like this to see for yourself what happens. You've already encountered one of the annoying things about this approach.

Anyway, in cases like this, I personally prefer to use single line if statements, like this

if(condition) statement;

Although I'm sure others will tell you that that's bad style because you have to manually add brackets when you need more statements, this hasn't really bit me and IMO it's cleaner than using three lines just for a simple condition, like you said.

Answer 2

Don't be alarmed that this doesn't work as you'd expect, in fact less than a month ago Brendan Eich (Creator of JavaScript) was sharing with us that this type of use is better known as an "abusage" of the language, since this logical operator isn't meant to execute code like this, but rather it's meant to determine the value of an expression.

"I also agree...that the && line is an abusage, allowed due to JS's C heritage by way of Java, but frowned upon by most JS hackers; and that an if statement would be much better style..." http://brendaneich.com/2012/04/the-infernal-semicolon/

That being said, you can avoid the operator precedence issue by wrapping your statements:

(var1 == 5) && (var2 = 2)

Answer 3

because you are using an invalid operator on the right-hand side. its trying to read the entire statement as a single variable.

Answer 4

Or You could try using the ternary operator to make your code look concise.

Answer 5

Is

var1 == 5 && var2++;

an cleaner or more understandable than this?

var2 += var1 === 5 ? 1 : 0;

In addition, the above expresses intent far more clearly than your code: the next guy who has to look at your code will see it and understand immediately what's going on, but looking at your code:

var1 == 5 && var2++

Is going to raise red flags in her head, because it looks like a bug or a some sort of typo — which means she's going to have to spend time trying to understand what you were actually trying to accomplish and whether or not the wonky code was intentional or not.

My first reaction, looking at

var1 == 5 && var2++ ;

Is that an assignment was intended:

var1 = 5 && var2++ ;

But the developer bounced the = key by accident, turning it into an orphaned expression (that happens to have side-effects).

Further, orphan expressions like that is likely to get flagged by any decent linter, for instance eslint's no-unused-expressions rule, as they indicate a probable bug.