Js Basics Logical Operators Readme

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!

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

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us