OR(||) Logical Operator in JavaScript

Usage of Javascript OR(||) Logical Operator

Let us look at the important and useful applications of the javascript OR operator.

• Assigning default values: It is commonly used in default value assignments. If the left side of the operator is truthy, then it will be assigned. Otherwise, the right side will be assigned.
   

let name = userName || "Guest";

You can also try this code with Online Javascript Compiler

Run Code

• Short-circuit evaluation: The OR operator can be used in a condition where the operator's right-hand side is only evaluated if the left-hand side is falsy. We will discuss more about this feature in later sections.
• Combining conditions: The OR operator can be used to combine multiple conditions in a single statement.
   

if (age < 18 || age > 65) {
  // Do something
}

You can also try this code with Online Javascript Compiler

Run Code

• In ternary operator: The OR operator can also be used in ternary operator (conditional operator) where it will check the left operand first, and then it will check the right operand.
   

let result = x > 0 ? "Positive" : x < 0 ? "Negative" : "Zero"

You can also try this code with Online Javascript Compiler

Run Code

• In bitwise OR operator: The OR operator can also be used as a bitwise operator. It compares each bit of the first operand to the corresponding bit in the second operand. If either bit is 1, the corresponding result bit is set to 1. 
   

let z = x | y;

You can also try this code with Online Javascript Compiler

Run Code

These are just a few examples of how the javascript OR operator can be used. It's a versatile operator that can be used in many different ways to help simplify and streamline your code.

Implementation

Let us now consider an example code, which will demonstrate all the above-mentioned features of the OR operator in javascript. We suggest you to give a proper read to the comments in the code. These will help you understand the implementation in a better way. 

• JavaScript

JavaScript

// Assigning default values
let userName = "John";
let name = userName || "Guest"; // if userName is defined, its value will be assigned to name. If userName is undefined, the string "Guest" will be assigned to name.
console.log(name); 

// Short-circuit evaluation
let x;
let y = 10;
x = y || (x = 5); // if y is truthy, the x = 5 will not be executed. If y is falsy, x = 5 will be executed and 5 will be assigned to x
console.log(x); 

// Combining conditions
let age = 25;
let message = (age >= 21) ? "Welcome!" : "Sorry, you're not old enough"; // if age is greater than or equal to 21, the message "Welcome!" is assigned to the message. If not, the message "Sorry, you're not old enough" is assigned.
console.log(message); 

// In ternary operator
let a = -5;
let b = 20;
let result = a > 0 ? "Positive" : b > 0 ? "Positive" : "Zero"; // if a > 0 is true, it will return "Positive" otherwise it will check b > 0 if true it will return "Positive" otherwise it will return "Zero"
console.log(result); 

// In bitwise OR operator
let p = 60;
let q = 13;
let r = 0;
r = p | q; // compares each bit of p to the corresponding bit of q. If either bit is 1, the corresponding result bit is set to 1.

console.log(r); 

You can also try this code with Online Javascript Compiler

Run Code

Output:

John 
10
Welcome! 
Positive 
61

Short Circuit Evaluation

In JavaScript, the OR operator (||) uses short-circuit evaluation. This means that the right-hand side of the operator is only evaluated if the left-hand side is falsy. This is because the OR operator returns the first truthy value it encounters.

Here's an example:

let x = y || doSomething();

You can also try this code with Online Javascript Compiler

Run Code

In this case, if y is truthy, the doSomething() function will not be called. If y is falsy, the doSomething() function will be called, and its return value will be assigned to x.

Short-circuit evaluation can be useful in situations where you want to assign a default value to a variable but also want to avoid unnecessary function calls. For example, if you want to assign a default value to a variable only if the variable is undefined, you can use the OR operator like this:

let name = userName || "Guest";

You can also try this code with Online Javascript Compiler

Run Code

Here, if userName is defined, its value will be assigned to name. If userName is undefined, the string "Guest" will be assigned to name instead.

Short-circuit evaluation can also be used to execute a function conditionally. For example, if you have a function that should only be executed if a certain condition is met, you can use the OR operator like this:

let x = checkCondition() || doSomething();

You can also try this code with Online Javascript Compiler

Run Code

In this case, if checkCondition() returns a truthy value, doSomething() will not be called. If checkCondition() returns a false value, doSomething() will get executed.

Short-circuit evaluation can also be useful when you want to assign a value to a variable only if it is currently undefined. For example, you can use the OR operator like this:

let x = x || 5;

You can also try this code with Online Javascript Compiler

Run Code

This will assign 5 to x if x is currently undefined or false.

Read about Bitwise Operators in C here.

Converting OR (||) to Other Logical Operators

The javascript OR operator (||) can be converted to other logical operators, such as the logical AND operator (&&) and the ternary operator (? :) using logical equivalences.

1. Converting OR to AND

Here's an example of how you can convert the OR operator to the AND operator:

Code: 

let a = true;
let b = false;
let c = a || b;  // c will be assigned the value "true"

// equivalent to
let c = !(!a && !b);  // c will also be assigned the value "true"

You can also try this code with Online Javascript Compiler

Run Code

2. Converting Or to Ternary Operator

Here's an example of how you can convert the OR operator to the ternary operator:

Code: 

let x = y || doSomething();

// equivalent to:
let x = y ? y : doSomething();

You can also try this code with Online Javascript Compiler

Run Code

Here's an example of how you can convert the OR operator to the ternary operator with a default value:

Code:

let name = userName || "Guest";

// equivalent to:
let name = userName ? userName : "Guest";

You can also try this code with Online Javascript Compiler

Run Code

It's important to note that these conversions may not always be equivalent and can lead to different behavior or results in certain situations. It's also important to note that not all the cases of the OR operator can be converted to other logical operators. Hence, we suggest you test your code after making such changes to ensure it still behaves as expected.

Must Read Fibonacci Series in JavaScript

Examples of OR(||) Operator in JavaScript

Example 1: Simple Condition Check

This example checks if either of two conditions is true.

let isWeekend = true;
let isHoliday = false;
if (isWeekend || isHoliday) {
   console.log("You can relax today!");
} else {
   console.log("It's a workday.");
}

You can also try this code with Online Javascript Compiler

Run Code

Output

You can relax today!

Example 2: Default Value Assignment

The OR operator is often used to assign a default value when a variable is null or undefined.

let userInput = null;
let defaultText = "Default Message";

let displayText = userInput || defaultText;
console.log(displayText);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Default Message

Frequently Asked Questions

How does the OR (||) operator handle non-Boolean values?

The OR (`||`) operator in JavaScript evaluates non-Boolean values by returning the first truthy operand it encounters, or the last operand if all are falsy. This behavior allows it to assign default values or check for non-null variables effectively in expressions.

Can the OR (||) operator be used with more than two operands?

Yes, the OR (`||`) operator can be used with more than two operands in JavaScript. It evaluates each operand from left to right and returns the first truthy value it finds, or the last value if all operands are falsy.

How does the OR (||) operator interact with functions in JavaScript?

The OR (`||`) operator can interact with functions by executing them in sequence and returning the result of the first truthy function. This can be useful for conditional function calls, where only the first function that produces a truthy result is executed.

What is the difference between the OR operator and the AND operator (&&) in JavaScript?

The OR operator (||) and the AND operator (&&) in JavaScript are both logical operators. The OR operator returns the first truthy value of the expressions on either side of it, while the AND operator returns the first falsy value of the expressions on either side of it. 

Conclusion

This article covered the JavaScript OR operator, exploring its use in assigning default values, performing logical operations, and leveraging short-circuiting. We learned how to apply these techniques effectively to enhance code functionality and readability.

We hope you liked reading this blog. If you wish to learn more about javascript, do visit these articles

• fundamentals of javascript.
• operators in javascript.
• functions in javascript.
• Difference Between "var", "let" and "const" in JS

Visit our website to read more such blogs. Make sure you enroll in our other courses as well. You can take mock tests, solve problems, and interview puzzles. Also, you can check out some exciting interview stuff- interview experiences and an interview bundle for placement preparations.