What does OR Operator || in a Statement in JavaScript ?

JavaScript is a dynamic programming language that allows developers to write complex code with ease. One of the fundamental concepts in JavaScript is the use of operators, which are symbols that perform operations on one or more values. One such operator is the || (logical OR) operator, which can be used in a variety of ways to simplify code and make it more efficient.

The || (logical OR) Operator: The || operator in JavaScript is a binary operator that is used to evaluate two or more expressions and return the first truthy expression. A truthy value is any value that is not undefined, null, false, 0, NaN, or an empty string (”).  The logical OR operator evaluates its operands in a short-circuit manner. This means that it stops evaluating as soon as it encounters the first truth value. 

When the logical OR operator || is used in a variable declaration statement, it works in the following way:

• If the first operand (left-hand side) is truthy (i.e., has a value that is not false, 0, null, undefined, NaN, or an empty string), the operator returns the value of the first operand.
• If the first operand is falsy (i.e., has a value that is false, 0, null, undefined, NaN, or an empty string), the operator returns the value of the second operand (right-hand side).

Syntax:

expression1 || expression2

Here, expression1  and expression2 are the two expressions that are being compared. The logical OR operator || returns the value of the first truthy expression it encounters, or the value of the last expression if both expressions are false.

Here are all the possible approaches for using the || operator in JavaScript:

1. Logical OR operation: The || operator performs a logical OR operation between two values. If either of the operands is true, the operation returns true. If both operands are false, the operation returns false. This approach is commonly used in conditional statements to check for truthy values.

Example: In this example, the || operator performs a logical OR operation between true and false. Since the first operand is true, the operation returns true. Similarly, in the second example, the operation returns false because both operands are false. In the third example, the operation returns true because at least one of the operands is true.

Javascript

console.log(true || false); // true
console.log(false || false); // false
console.log(true || true); // true

Output

true
false
true

2. Default value assignment: When used in a var statement, the || operator can be used to set a default value for a variable. If the variable has not been assigned a value or if its value is falsy, the operator sets the default value. This approach is commonly used to provide fallback values.

Example:  In this example, the name variable is initially assigned an empty string. When the || operator is used to set a default value, it checks if the variable has a truthy value. Since an empty string is falsy, the operator sets the default value to “Geeks for Geeks”.  The name1 variable has a truthy value, so the operator does not change its value.

Javascript

let name = "";

// Geeks for Geeks
console.log(name || "Geeks for Geeks");
let name1 = "A computer science portal for geeks";

// A computer science portal for geeks
console.log(name1 || "Geeks for Geeks");

Output

Geeks for Geeks
A computer science portal for geeks

3. Default function argument: The || operator can also be used to set default values for function arguments. If an argument is not provided or is falsy, the operator sets the default value. This approach is commonly used to provide default arguments for functions.

Example:  In this example, the greet function takes an argument name. When the || operator is used to set a default value, it checks if the argument has a truthy value. If the argument is not provided or is falsy, the operator sets the default value to “Geek”. In the first function call, no argument is provided, so the default value is used. In the second function call, the argument “Geeks for Geeks” is provided, so the operator does not change its value.

Javascript

function greet(name) {
      name = name || "Geek";
      console.log("Hello, " + name + "!"); // Hello, Geeks!
}

greet(); // Hello, Geek!
greet("Geeks for Geeks"); // Hello, Geeks for Geeks!

Output

Hello, Geek!
Hello, Geeks for Geeks!

4. Chaining multiple OR operations: The || operator can be chained to check for multiple values. It returns the first truthy value it finds or the last value if all values are falsy. This approach is commonly used to select a value from a list of options.

Example: In this example, the || operator is chained to check for multiple values. The operator returns the first truthy value it finds or the last value if all values are falsy. In this case, if value1 is falsy, the operator checks value2. If value2 is also falsy, it checks value3. If all three values are false, the operator returns “default”.

Javascript

const value1 = null;
const value2 = undefined;
const value3 = "";
const defaultValue = "default";

const result = value1 || value2 || value3 || defaultValue;

console.log(result); // Output: default

Output

default

5. Checking for undefined values: The || operator can be used to check if a variable is undefined. If the variable is undefined, the operator returns the default value. This approach is commonly used to provide fallback values for variables that may not have been initialized.

Example: In this example, the value variable is not initialized, so it is undefined. When the || operator is used to check for undefined values, it returns the default value “default”. Similarly, the array variable has four elements, but the fourth element is undefined. When the || operator is used to set a default value for the item variable, it checks the fourth element first, which is undefined. Since undefined is falsy, the operator sets the default value to “default”.

Javascript

let value;
console.log(value || "default"); // default

let array = [1, 2, 3];
let item = array[3] || "default";
console.log(item); // default

Output

default
default