I would like to know if JavaScript has "short-circuit" evaluation like && Operator in C#. If not, I would like to know if there is a workaround that makes sense to adopt.
Yes, JavaScript has "short-circuit" evaluation.
if (true == true || foo.foo){
// Passes, no errors because foo isn't defined.
}
if (false && foo.foo){
// Passes, no errors because foo isn't defined.
}
This answer goes into great detail on how short-circuiting works in JavaScript, with all the gotcha's and also relevant themes such as operator precedence, if you're looking for a quick definition and already understand how short-circuiting works, I'd recommending checking other answers.
First let's inspect the behaviour we are all familiar with, inside the if()
block, where we use &&
to check whether the two things are true
:
if (true && true) {
console.log('bar');
}
Now, your first instinct is probably to say: 'Ah yes, quite simple, the code executes the statement if both expr1
and expr2
are evaluated as true
'
Well, yes and no. You are technically correct, that is the behaviour you described, but that's not exactly how the code is evaluated and we'll need to delve deeper in order to fully understand.
&&
and ||
interpreted?:It's time to look "under the hood of the javascript engine". Let's consider this practical example:
function sanitise(x) {
if (isNaN(x)) {
return NaN;
}
return x;
}
let userinput = 0xFF; // as an example
const res = sanitise(userinput) && userinput + 5
console.log(res);
Well the result is 260
.. but why? In order to get the answer, we need to understand how does the short-circuit evaluation work.
By the MDN Definition the
&&
operator inexpr1 && expr2
is executed followingly:If
expr1
can be converted totrue
, returnsexpr2
; else, returnsexpr1
.
So this means, in our practical example, the const res
is evaluated the following way:
expr1
- sanitise(0xFF)
0xFF
is a valid hexadecimal number for 250, otherwise I'd return NaN
expr1
returned a "truthy" value, time to execute expr2
(otherwise I'd stop as NaN
is falsy)userinput
is truthy (a number), I can add +5
to itSo here, we were able to avoid additional if
blocks and further isNaN
checks with a simple usage of the &&
operator.
By now, we should at least have a picture how the short-circuit operators work. The universal rule goes:
(some falsy expression) && expr
will evaluate to falsy expression(some truthy expression) || expr
will evaluate to truthy expressionHere are some further examples for better comprehension:
function a() { console.log('a'); return false; }
function b() { console.log('b'); return true; }
if ( a() && b() ){
console.log('foobar');
}
//Evaluates a() as false, stops execution.
function a() { console.log('a'); return false; }
function b() { console.log('b'); return true; }
if ( a() || b() ){
console.log('foobar');
}
/* 1. Evaluates a() as false
2. So it should execute expr2, which is `b()`
3. b() returned as true, executing statement `console.log('foobar');`
*/
Nice, hopefully you're getting the hang of it! Last thing we need to know is a rule about operator precedence, that is:
&&
operator is always executed prior to the ||
operator.Consider the following example:
function a() { console.log('a'); return true;}
function b() { console.log('b'); return false;}
function c() { console.log('c'); return false;}
console.log(a() || b() && c());
// returns a() and stops execution
This will return as, perhaps confusingly to some as a()
. Reason is quite simple, it's just our eye-sight that's kind of deceiving us, because we're used to reading left-to-right. Let's take the console.log()
and what not out and focus purely on the evaluation
true || false && false
Now to wrap your head around this:
We said the &&
operator has precedence, so it gets evaluated as first. To help us better imagine the evaluation, think of the definition
expr1 && expr2
Where:
expr2
is false
expr1
is true || false
So that was the tricky part, now true || false
is evaluated (the expr1
- left-side of the &&
).
||
operator stops execution if expr1 || expr2
in expr1
evaluates as truthy, the expr1
is executed and code execution stops.The returned value is true
Well.. that was pretty tricky, all because of few weird rules and semantics. But remember, you can always escape operator precedence with the ()
- just like in math
function a() { console.log('a'); return true;}
function b() { console.log('b'); return false;}
function c() { console.log('c'); return false;}
console.log((a() || b()) && c());
/* 1. The () escape && operator precedence
2. a() is evaluated as false, so expr2 (c()) to be executed
3. c()
*/
©2020 All rights reserved.