Logical Operators Explained in JavaScript

Learn logical operators in JavaScirpt under 10 minutes

Ferenc Almasi • 2022 March 01 • 7 min read

• 
• 

This lesson is a preview from our interactive course

Say that we want to check two things at a time. We want to check if a number is greater than 10, but less than 100. How would we do that? That is where logical operators come into place. Let’s see what kind of logical operators we have in JavaScript.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Logical AND#

First, we have the logical AND operator. As in the imaginary situation above, it can be used exactly to combine multiple comparisons together. If all comparisons are true, then the statement is true as well. Let’s see what it would look like in terms of code:

const x = 50;

x > 10 && x < 100;

// Or inside an if statement
if (x > 10 && x < 100) {

}

To use the logical AND, we need to use two ampersands next to each other: &&. This means, that we only want the code to run inside the if statement if x is greater than 10, but less than 100.

Combining multiple comparisons together will create a boolean. If all statements are true, then the output will be true as well. If just one of the statements is false, then the output will be false too. Here is the result table for the logical AND:

Note that only two true values will produce a true output. In every other case, it will be evaluated as false. We can also combine as many statements together as we would like. We may also see this for variables when we try to define a boolean flag:

const x = 50;
const isTrue = x
    && x > 10
    && x < 100
    && x !== 49;

console.log(isTrue);

Take note that for readability, it is best if we break multiple comparisons into new lines, each one starting with the logical AND operator. If you have too many conditions, it is also recommended to use multiple variables instead of one.

What happens if we only want one statement to be true, but not all? That’s when we need to use the logical OR operator. If one of the operands is evaluated to true when using logical OR, then the expression itself will also be evaluated to true. To use logical OR, we need to use two pipes like so:

const x = 10;

x > 10 || x < 100;

// Or inside an if statement
if (x > 10 || x < 100) {

}

This means that even though x is not greater than 10, the expressions will still be evaluated to true because the second part is true. Let’s see how the result table looks like for the logical OR operator:

Note that when using logical OR, we will only get a false value if all operands are false. We can also combine different logical operators together, so we could have the following:

const x = 10;
const isTrue = x
    && x > 10
    || x < 100
    && x !== 49;

console.log(isTrue);

The logical OR operator is also commonly used during variable assignments to provide fallback values. Take the following as an example:

const uploadedFileName = null;
const fileName = uploadedFileName || 'unnamed';

console.log(fileName);

Here we say that the fileName should match the uploaded file's name. In case it is not provided (just like in the example above), then use a hard-coded string as the filename: "unnamed". We can chain this with multiple logical ORs, which will go from left to right until it finds a truthy value:

const uploadedFileName = null;
const defaultFileName = 'default';
const fileName = uploadedFileName || defaultFileName || 'unnamed';

console.log(fileName);

There is also an operator in JavaScript called the nullish coalescing operator that works in a similar way to logical OR. It can be used during variable assignments, just like the above, but this time, it is denoted with two question marks:

const foo = null ?? 'Foo Fighters';
const age = 0 ?? 42;

// console.log(foo);
console.log(age);

Using the nullish coalescing operator, we can return the left-hand side of the operand if it's falsy, but not null or undefined. This means that for foo, it will return the string (the right-hand side of the operand), but for the age, it will return 0 (the left-hand side of the operand).

This can be used to only filter null and undefined values. It's useful if we still want to work with "valid" falsy values such as false, or 0.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Remove ads

---

Logical NOT#

Lastly, we have the logical NOT operator. It is for negating values. This can be achieved by using an exclamation mark in front of a value. We have already seen this when we briefly touched it in the conditions and loops lesson:

!true;

We can also prefix entire expressions with it as well, by wrapping the expression into parentheses:

const x = 50;
const expression = !(x > 10 && x < 100);

console.log(expression)

We have also talked about double negation before. This is negating the negated value into its original state, while also converting it to a boolean in the process:

// Copy the code to the console to see its value
!!''

// Try to double negate the following values too:
// !!false
// !!null
// !![]

The result table for logical NOT is much simpler since we can only have two options:

These are all the logical operators in JavaScript that we need to know about. There is also a conditional operator we need to cover, called a ternary operator. It is used for conditionally assigning a value to a variable in the following way:

const age = 21;
const eligible = age > 21 ? 'yes' : 'no';

console.log(eligible);

So what does this mean exactly? It means that eligible should have the value of “yes”, in case age is greater than 21. If it is less than 21, it will have the value of “no”. We can also simply assign a comparison to a variable to create a boolean flag. So in the above example, if we only need a true or false value for the eligible, we can simply say the following:

const age = 21;
const eligible = age > 21;

console.log(eligible);

If we need a somewhat more elaborate condition and we still want to use a ternary, we can wrap the condition into parentheses to make use of both a logical and the ternary operator:

const age = 21;
const eligible = (age > 21 && age < 60) ? 'yes' : 'no';

console.log(eligible);

Make sure you don’t overdo writing everything in one line, otherwise your code will quickly become unreadable. Only use ternary for simple conditions. If you need more elaborate logic, use an if or switch statement.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Test Your Skills!#

Combine the following variables in a way that produces the expected values.

import { expect, it } from 'vitest';

// Test #1:
it('Combine the variables so that it produces "true"', () => {
    const a = 1;
    const b = true;
    const c = false;

    // Replace the question marks with the right operator
    const result = a ?? b ?? c;

    expect(result).toBe(true);
});

// Test #2:
it('Combine the variables so that it produces "false"', () => {
    const a = false;
    const b = true;

    // Replace the question marks with the right operator
    const result = !a ?? !b;

    expect(result).toBe(false);
});

// Test #3:
it('Combine the variables so that it produces "1"', () => {
    const a = true;
    const b = 1;
    const c = false;

    // Replace the question marks with the right operator
    const result = a ?? b ?? !c;

    expect(result).toBe(1);
});

• 
• 

✨ Request Tutorial

📚 More Webtips

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Master the Art of Frontend

• Access exclusive interactive lessons
• Unlimited access to hundreds of tutorials
• Remove ads to learn without distractions

Become a Pro

Recommended

How to Work With Event Listeners in Astro

Writing JavaScript in Astro

Ferenc Almasi • 2023 November 30 • 11 min read

How to Work With CSS in Astro

Learn the many ways of styling Astro components

Ferenc Almasi • 2023 November 28 • 9 min read

Astro vs JSX — What are the Differences?

Comparing two similar syntax

Ferenc Almasi • 2023 November 24 • 12 min read