Understanding logical operators is essential for developers to write clear and efficient JavaScript code. Your code will become more flexible and potent as a result of these operators' ability to combine and evaluate various circumstances. The four most used logical operators in JavaScript will be examined in this blog post, and their behaviors will be clarified.
Introduction
At the outset of this blog, I want to admit that many developers, including myself, find the terms "&&" and "||" to be confusing. In order to clarify these ideas and assist those who might also find them difficult, this blog was established. Let's get started and dispel any myths regarding these operators!
In classical programming, the logical OR is meant to manipulate boolean values only. If any of its arguments are true, it returns true; otherwise, it returns false. In JavaScript, it is a bit trickier and more powerful.
Using || in Conditional Statements
Most of the time, OR is used in conditional statements to find truthy values. In other words, a chain of OR || returns the first truthy value, or the last one if no truthy value is found.
let result = name || age || city;
// 1. This evaluates the operands from left to right.
// 2. For each operand, it converts it to a boolean. If the result is true, it stops and returns the original value of the operand.
// 3. If all operands have been evaluated (i.e., all were false), it returns the last operand.
alert("John" || "25" || "New York"); // "John" (the first truthy value)
alert("" || "25" || "New York"); // "25" (the second truthy value)
alert("" || 0 || "New York"); // "New York" (the last truthy value)
alert("" || 0 || null); // null (all falsy, returns the last value)
Short-Circuit Evaluation with ||
Another feature of the OR || operator is the so-called "short-circuit" evaluation. It means that || processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument.
The importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call.
In the example below, only the second message is printed:
true || alert("not printed");
false || alert("printed");
&& (AND)
Represented with ampersands, the AND operator returns true if both operands are truthy, and false otherwise. Unlike OR, && finds the first falsy value or the last value if none were found.
let result = email && username && age;
// 1. Evaluates operands from left to right.
// 2. For each operand, it converts it to a boolean. If the result is false, it stops and returns the original value of that operand.
// 3. If all operands have been evaluated (i.e., all were truthy), it returns the last operand.
// if the first operand is truthy,
// AND returns the second operand:
alert("John" && "25"); // "25" (the second truthy value)
// if the first operand is falsy,
// AND returns it. The second operand is ignored.
alert("" && "25"); // "" (the first falsy value)
alert(0 && "New York"); // 0 (the first falsy value)
alert("John" && "Doe" && "" && "New York"); // "" (the first falsy value)
alert("John" && "Doe" && "25"); // "25" (the last one, all were truthy)
The precedence of && is greater than ||.
! (Not)
The ! operator is used to negate a boolean value. It turns true into false and false into true.
alert(!true); // false
alert(!"John"); // false
alert(!0); // true
alert(!""); // true
// Double NOT !! is sometimes used to convert values to a boolean type
alert(!!"non-empty string"); // true
alert(!!null); // false
?? (Nullish Coalescing)
The Nullish Coalescing operator ?? is a recent addition to JavaScript. It returns the first argument if it's not null or undefined; otherwise, it returns the second argument.
We can rewrite result = a ?? b using the operators that we already know, like this:
result = (a !== null && a !== undefined) ? a : b;
let name = null;
let city = null;
let country = "USA";
let result = name ?? city ?? country; // "USA" (the first defined value)
The important difference between || and ?? is that:
||returns the first truthy value.??returns the first defined value.
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0
Summary
It's crucial to master logical operators if you want to write clear, reliable JavaScript code. They give you the ability to construct complex conditional logic and successfully manage a variety of events.
Keep revising and practicing the usage of ||, &&, !, and ??, and you'll become more comfortable with them over time.