Short-circuiting
When a condition or a particular expression is evaluated from left to right and the result appears before the complete evaluation of the expression, this occurs due to short-circuiting with operators. It avoids unnecessary work.
OR(||) short-circuiting
As we know the OR operator returns the true value even if one condition is true doesn't matter if the other condition is true or false.
const a = 1;
const b = 0;
console.log(a || b);
As the evaluation begins in the a || b expression the first value comes 1 so it logs 1 to the console without even evaluating b because the OR operator needs one truth value. So it got the first true value and logged it to the console. This behavior is known as short-circuiting with the OR operator. If the first value is false it will execute the second value to tell whether the value is true or false.
Examples -
console.log(1 || 0); // returns 1
console.log("Hi" || "Bye"); // returns Hi
console.log(null || "Hi"); // returns Hi
console.log("Hi" || null); // returns Hi
AND(&&) short-circuiting
The behavior of the AND operator is that it returns 0 even if one of the values is false or 0.
const c = 0;
const d = "Hi";
console.log(c && d); // returns 0
Here the execution flows as it first encounters a 0 or false value it will not check or execute b because it just needs one false value to give its output. This is known as short-circuiting with the AND operator. If the first value will be true it will execute the second value to confirm whether the output should be true or false;
Examples -
console.log(1 && 0); // return 0
console.log(null && "Hi"); // return null
console.log("Hi" && null); // return null
console.log("Hi" && "Bye"); // return Bye
Nullish coalescing operator
It is represented by the (??) sign, which returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
console.log(0 ?? "Hi"); // returns 0
console.log(null ?? "Hi"); // returns Hi
console.log("Hi" ?? null); // returns Hi
console.log(undefined ?? 1) // returns 1
You might be thinking what's the use of this special operator in a real case scenario? let me explain it with the help of an example -
Suppose you have to retrieve data and show it on your application or website. The data is in integer form it can be zero, or non-zero and we have to show errors to the user in case we don't get any data. It's not useful to do this with OR or AND operator as it will require an if-else condition to produce the same output which will unnecessarily increase the code. We can simply alert our user that an error happened when we will not get any data(null value).
const data = 0 ;
console.log(data || "no data recieved");
the above output will be the second expression which says "no data received" even though we have received 0 as the data value.
const data = 0;
console.log(data ?? "no data recieved");
the above output will be 0 as the ?? operator is null and undefined. It satisfied our condition to log value even if we received a 0 value.
Code and output
Follow up -
In case you find my work good and interesting follow me on hashnode Aashman Verma
as well as on my Twitter handle in my bio. 😀
Kindly comment below, it will help me to improve and share more about javascript in an easy language. In case you are still confused you can comment below or dm me on Twitter :). You can also suggest topics of blog.