How does the Javascript logical OR (||) operator work?

📣 Sponsor

The logical OR (or ||) operator in Javascript is an operator which returns the left hand side if the left hand side is truthy, but otherwise defaults and returns the right hand side. This means it can be used to test both logical statements, and also to return the right hand side operand should the left one be falsy. Let’s take a look at how it works.

What does truthy and falsy actually mean in Javascript?

Before we continue, lets first understand what falsy means. It may seem like a vague statement, but it actually has a very specific definition. The following values are falsy in Javascript:

false
0 or -0 or 0n
any empty string, i.e. ""
null
undefined
NaN

Similarly, truthy simply means anything that are not falsy.

Since falsy can mean 0 and "", it can sometimes be a bad choice for setting default values. For example, in some scenarios, if your value really is 0 and you want to show it, you won’t be able to with the || operator. For these cases, it’s better to consider the nullish coalescing operator.

How does the logical OR operator work in Javascript?

As mentioned, the || operator has two main functions in Javascript. Most commonly it is found in logical if..else statements, where it returns true if one or more of its operands is truthy, but it is also used to return the first value if it’s truthy, or default to the right hand side operand if not.

The || works in both of these ways because it actually returns a value.

Using logical OR with logic

You probably will have seen || most commonly used in logical statements like if and else. In these cases, we are typically testing a logical statement, so || will return true if one or more of its operands is truthy. What is happening below is the || operator returns a value, which the if statement then converts to true or false


let x = 100;

// This returns true, since both of these statements are correct.
if(x > 5 || x > 10) {
    // ...
}

// Since both "1" and "2" can be converted to true, this also returns true in this context.
if("1" || "2") {
    // ...
}

// Since both "" and null are falsy, they are converted to false, and as such this returns false.
if("" || null) {
    // ...
}

This is one of the main ways you will use || in your code, but it is also frequently used to return values based on how truthy or falsy they are.

Returning Values

Let’s look at another example now, outside of logical statements. As mentioned, || returns its left hand side if it’s truthy, but otherwise returns its right hand side.

That sounds a little confusing, so let’s look at a few examples.


// Is set to 1, since the first operand is falsy 
let x = false || 1;

// Is set to hello, since "hello" is truthy
let y = "hello" || true;

In the above example, since x has its left hand side set to false, x becomes 1. Similarly, in y since "hello" is not falsy, the value of y is "hello". This functionality is different from its application in logical statements and if..else statements, but can be useful in many situations.

Interestingly, even if the last item given is falsy, Javascript will still return it. For example:


// Is set to null since false is falsy
let x = false || null;

// Is set to false since 0 is falsy
let y = 0 || false;

Chaining the OR operator

It is possible to chain the || operator in Javascript. When chaining logical statements (in if..else clauses), the statement will return true if any chained item is truthy:


// This works since both "1" and true are truthy
if("1" || true || false) {
    // ...
    console.log('this works')
}

// This doesn't work since all values are falsy
if(false || null || undefined) {
    console.log('this does not work');
}

When we use || chained outside of logical statements, it will use the first truthy value found, or default to the final value. For example, below, x is equal to 3, y is true, and z is {}. If you’re wondering why z is {}, it’s because anything that is not falsy, is truthy, which means an object is truthy!


// x is set to 3
let x = false || 0 || 3;

// y is set to true
let y = false || true || 3;

// z is set to  {}
let z = {} || [] || x;

Conclusion

The || operator is frequently used in logical statements, as well as defaulting to non falsy values if one is found. It’s a flexible operator which is core to understanding Javascript. If you’re interested in another, similar, operator, you may also want to read about the nullish coalescing operator.

Last Updated 1657646422163