Logical Operators

Problem Statement

In this lesson, we'll learn how to negate and combine expressions with JavaScript's three logical operators: NOT (!), AND (&&), and OR (||).

Objectives

1. Use ! to negate an expression

2. Convert an expression to a boolean using !!

3. Link conditions with the && and || operators

Use ! to Negate an Expression

! NOT

The logical NOT operator (!), also called the bang operator, operates on an expression, returning the opposite of the expression's truthiness. If x resolves to a truthy value, !x returns false. If x is falsy, !x returns true:

const truthyValue = 'This value is truthy.';

!truthyValue;
// => false

const falsyValue = 0;

!falsyValue;
// => true

Convert an Expression to a Boolean Using !!

!!

In the lesson on conditional statements, we passed values into the Boolean() constructor function to check their truthiness. We'll learn all about constructor functions later in the course; for now, just think of it as a function that takes in some input, creates a new boolean from that input, and outputs the created boolean.

As a shorter way to convert any value into a boolean, we can use two NOT operators:

const truthyValue = 'This value is truthy.';

!truthyValue;
// => false

!!truthyValue;
// => true

Reading from left-to-right, the JavaScript engine sees the first ! and looks to the right to check what we're asking it to invert (!truthyValue). It then sees the second ! and looks to the right again, this time finding our truthyValue variable. The engine resolves truthyValue to "This value is truthy." and then executes the second ! operator on it. !truthyValue returns false, so instead of !!truthyValue we're now looking at !false. The remaining ! operator then executes on false, inverting the falsy value and evaluating to true.

Try inverting various values in the browser's JS console to get a feel for the NOT operator. See what happens when you stack a ton of them: !!!!!!!!!truthyValue.

On to the next!

Combine Conditions With the && and || Operators

&& AND

The logical AND (&&) operator takes two expressions:

expression1 && expression2;

The return value of the && operator is always one of the two expressions. If the first expression is falsy, && returns the value of the first expression. If the first expression is truthy, && returns the value of the second expression.

Again, if the first expression is falsy, && returns that value and exits without ever checking the second expression:

false && 'Anything';
// => false

// 4 * 0 returns 0, which is falsy
4 * 0 && 'Anything';
// => 0

If the first expression is truthy, && then returns whatever the second expression evaluates to:

true && false;
// => false

1 + 1 && 'Whatever';
// => "Whatever"

'The truthiest of truthy strings' && 9 * 9;
// => 81

There are three different ways the && operator can be evaluated:

Left side	Right side	Return value	Truthiness of return value
Falsy	Doesn't matter	Left side	Falsy
Truthy	Falsy	Right side	Falsy
Truthy	Truthy	Right side	Truthy

1. If the left-side expression is falsy, the right-side expression doesn't matter at all. The && operator returns the left side's falsy value and finishes.

2. If the left-side expression is truthy, the && operator returns the right side's value (whether it's truthy or falsy) and finishes. If you're feeling a little confused, that's ok. This is one of those concepts that's a a bit hard to understand unless you've played around with it in code, so make sure you're testing all of these new operators out in your browser's JavaScript console to get a feel for how they work.

OR

The logical OR (||) operator also takes two expressions:

expression1 || expression2;

The return value of the || operator is always one of the two expressions. If the first expression is truthy, || returns the value of the first expression. If the first expression is falsy, || returns the value of the second expression.

If the first expression is truthy, that value is immediately returned and the second expression is never evaluated:

true || 'Whatever';
// => true

1 + 1 || 'Whatever';
// => 2

If the first expression is falsy, || returns whatever the second expression evaluates to:

false || 'Whatever';
// => "Whatever"

1 === 2 || 8 * 8;
// => 64

'' || 'Not ' + 'an ' + 'empty ' + 'string';
// => "Not an empty string"

There are three different ways the || operator can be evaluated:

Left side	Right side	Return value	Truthiness of return value
Truthy	Doesn't matter	Left side	Truthy
Falsy	Truthy	Right side	Truthy
Falsy	Falsy	Right side	Falsy

1. If the left-side expression is truthy, the right-side expression doesn't matter at all. The || operator returns the left side's truthy value and completes.

2. If the left-side expression is falsy, the || operator returns the right side's value (regardless of whether it's truthy or falsy) and completes. As with the && operator, make sure you're testing out all of these outcomes in your browser's JS console!

Link Conditions with the && and || Operators

The && and || operators are often used to link multiple conditions in a conditional statement:

let user = 'Charles Babbage';

let friendCount = 3;

let message, messageColor;

if (user && friendCount) {
	message = `Hi ${user}! You have ${friendCount} ${
		friendCount === 1 ? 'friend' : 'friends'
	}!`;
} else if (user) {
	message = 'Link up with your friends to get the most out of Flatbook!';
} else {
	message = 'Please sign in.';
}
// => "Hi Charles Babbage! You have 3 friends!"

if (
	message === 'Please sign in.' ||
	message === 'Link up with your friends to get the most out of Flatbook!'
) {
	messageColor = 'red';
} else if (friendCount >= 1 && friendCount <= 10) {
	messageColor = 'blue';
} else if (friendCount >= 11 && friendCount <= 50) {
	messageColor = 'purple';
} else {
	messageColor = 'rainbow';
}
// => "blue"

Conclusion

Logical operators in Javascript are the powerful backbone on which most website logic is based. Once you understand how to control the different options available to you, the sky's the limit!

Resources

• MDN

  • Logical operators

  • Review of conditionals, comparisons, and logical operators