Almost a year back I came accross an interesting piece of code which used logical OR (||) in an assignment statement that looked something like this.

let testVariable = "Hello";
let evalResult = testVariable || "Bye";
console.log(evalResult);

I got really excited about the how of its working and I started asking myself a lot of questions like "Isn't it supposed to return a boolean?", "What happens if I use a && instead of ||?", "How does javascript evaluate statements with logical operators?" etc. So I started finding answers to my questions and here are my findings.

Under the hood

Logical operators ( && and || ) are supposed to be used with booleans and when used with booleans it returns a boolean. But the interesting thing is, these operators are actually returning one of the operands based on their truth value.

For instance the Logical OR is supposed to return true if either of the operand is true, To do this, javascript starts evaluating the expression from left to right, it first looks at the left operand, if it is true or it has a truthy value it just returns the first operand and doesn'r even check the second operand. if the first operand isn't true or it doesn't have a truthy value, javascript blindly returns the second value, as the truthy value of the second operand will be the result of evaluation of the entite expression.

Similarly logical AND (&&) checks for the truth value of the first operand and returns it, if its truth value is false else returns the second argument.

This property of javascript logical operaters not evaluating the expression fully before returning the result is called short circuit evaluation.

Using logical operators instead of tenary operator

We can take advantage of short circuit evaluation to actually replace some ternary operators with logical operators. Many times we endup in situations in which we have to return the value of a variable only when it is true or not null else return a default value or another variable.  We can write a simple ternary operator for this situation which can be read as "If a is true return a else return the string" and it looks like this

let a; // a is undefined, will be evaluated to false
let b = a ? a : "Something else, because a is false"; //ternary operation
console.log(b);

a = "I am a, and not false"; //a is a non empty string, will be evaluated to true
b = a ? a : "Something else"; //ternary operator
console.log(b);

The same code can be rewritten by using  logical OR as below

let a; // a is undefined, will be evaluated to false
let b = a || "Something else, because a is false"; //ternary operation
console.log(b);

a = "I am a, and not false"; //a is a non empty string, will be evaluated to true
b = a || "Something else"; //ternary operator
console.log(b);

Similary we can have a situation where we want return the variable only when it is false or evaluated to false else return something else. The ternary opertor for such a situation with variable name "a" can be read as  "If a is false return a else return the string". Code examples follow

let a = false; // a is false
let b = a ? "Something else" : a; //return a because a is false
console.log(b);

a = true; //a is true
b = a ? "Something else" : a; //returns the string because a is true
console.log(b);

The ternary operators can be rewritten using logical AND (&&) as below

let a = false; // a is false
let b = a && "Something else"; //return a because a is false
console.log(b);

a = true; //a is true
b = a && "Something else"; //returns the string because a is true
console.log(b);

This simple trick makes your code much cleaner, concise and fancy.


Please feel free to share your feedback or any comments with me on my mail. If you like this article and think this can help any of your friends, dont hesitate to share this.