The logical OR (or ) operator in JavaScript is an operator which returns the -hand side if the left-hand side is , but otherwise defaults and returns the right-hand side. || left truthy 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 Do Truthy and Falsy Actually Mean in JavaScript Before we continue, let’s first understand what means. It may seem like a vague statement, but it actually has a very specific definition. The following values are in JavaScript: falsy falsy false or or 0 -0 0n empty string, i.e. any "" null undefined NaN Similarly, simply means anything that . truthy is not falsy Since can mean and , it can sometimes be a bad choice for setting default values. falsy 0 "" For example, in some scenarios, if your value really is 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. 0 || 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 statements, where it returns true if one or more of its operands is , but it is also used to return the first value if it's , or default to the right-hand side operand if not. || if..else truthy truthy 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 and . In these cases, we are typically testing a logical statement, so will return if one or more of its operands is . || if else || true truthy What is happening below is the operator returns a value, which the statement then converts to or || if true 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 or they are. || truthy falsy Returning Values Let's look at another example now, outside of logical statements. As mentioned, returns its left-hand side if it's , but otherwise returns its right-hand side. || truthy 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 has its left-hand side set to , becomes 1. Similarly, in since is not , the value of is . This functionality is different from its application in logical statements and statements, but can be useful in many situations. x false x y "hello" falsy y "hello" if..else Interestingly, even if the last item given is , JavaScript will still return it. falsy 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 clauses), the statement will return true if any chained item is : || if..else 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 value found, or default to the final value. For example, below, is equal to , is , and is . If you're wondering why is , it's because anything that is not , is , which means an object is ! || truthy x 3 y true z {} z {} falsy truthy 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 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 . || falsy nullish coalescing operator

Chain

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The JavaScript Logical OR Operator: How Does it Work?

The JavaScript Logical OR Operator: How Does it Work?

Too Long; Didn't Read

Coin Mentioned

Johnny Simpson

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

The JavaScript Logical OR Operator: How Does it Work?

Too Long; Didn't Read

Coin Mentioned

Johnny Simpson

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES