Binary Logical Operators

Binary logical operators help you evaluate two expressions and return a result based on their truthiness. Let’s look at the three most common binary logical operators: logical AND, logical OR, and the nullish coalescing operator.

The logical AND operator is represented by a double ampersand (&&). It checks if both operands are true and returns a result. If both operands are truthy, it returns the second value, that is, the one on the right:

const result = true && 'hello';
 
console.log(result); // hello

In the example above, the text hello is logged to the console because both operands are true. If either operand is falsy, it returns the falsy value:

const result = 0 && 3;
 
console.log(result); // 0

Since 0 is a falsy value, the number 0 is logged to the console. And if both operands are falsy, it returns the first falsy value:

const result = false && 0;
 
console.log(result); // false

Since false is a falsey value, then false is logged to the console. The logical AND operator is useful when you want to check multiple conditions and ensure that all are true before proceeding. Here is an example:

if (2 < 3 && 3 < 4) {
 console.log('The if block runs'); 
} else {
 console.log('The else block runs');
} 

In the condition, since 2 is less than 3 AND 3 is less than 4, then the sentence The if block runs will be logged to the console.

The logical OR operator checks if at least one of the operands is truthy. If the first operand is truthy, it returns that value:

const result = 'This is truthy' || false;
 
console.log(result); // This is truthy

If the first operand is falsy but the second is truthy, the second value will be logged to the console:

const result = 0 || 'This is truthy';
 
console.log(result); // This is truthy

It is common to use the logical OR operator in if/else statements like this:

let userInput;
 
if (userInput || 'Guest') {
 console.log('A user is present');
} else {
 console.log('No user detected');
}

Since we didn’t assign a value to the userInput variable, it is currently undefined. The condition in the if statement checks if either the userInput variable or the string Guest are truthy. Since the string Guest is true in a boolean context like this, the string A user is present will be logged to the console.

The nullish coalescing operator is more sophisticated than logical OR and logical AND. Represented by a double question mark (??), it helps in scenarios where you want to return a value only if the first one is null or undefined. Here is an example of working with the nullish coalescing operator:

const result = null ?? 'default';
 
console.log(result); // default

Since null is a falsey value, the string default would be logged to the console. The nullish coalescing operator is incredibly useful in situations where null or undefined are the only values that should trigger a fallback or default value. Here is an example of dealing with a user’s preference settings:

const userSettings = {
 theme: null,
 volume: 0,
 notifications: false,
};
 
let theme = userSettings.theme ?? 'light';
console.log(theme); // light

In the example above, we have an object called userSettings that contains theme, volume and notifications properties. We are accessing the theme using dot notation like userSettings.theme. You will learn more about how to work with objects in a future lecture video. Since the user’s theme is currently set to null, then the string light will be logged to the console.