The logical OR operator (||) in JavaScript is used to compare two values and return the first truthy value, or the last value if both are falsy. For example:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let a = 1; let b = 2; let c = 3; let d; let result = a || b || c || d; console.log(result); // 1
[/dm_code_snippet]
In this example, the variable result is assigned the value of a because it is the first truthy value (a number is always truthy in JavaScript). If a were falsy, the next value, b, would be used. If b were also falsy, the next value, c, would be used, and so on. If all values were falsy, the last value would be used.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let a = 0; let b = ""; let c = null; let d; let result = a || b || c || d; console.log(result); // undefined
[/dm_code_snippet]
In this example, all values are falsy, so the result is assigned the value of the last value, which is undefined.
It is often used for default values of variable or to check a variable if it’s defined or not.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let name = "John" let nickName = nickName || "No Nickname"; console.log(nickName); // "John"
[/dm_code_snippet]
In this example, nickName is assigned the value of name if nickName is truthy, otherwise it is assigned the default value “No Nickname”.
Another common use of the logical OR operator is to check if a variable has a certain value or not. For example, you can use it to check if a variable is undefined or null:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let a = null; let b = undefined; let c = "some value"; console.log(a == null); // true console.log(b == null); // true console.log(c == null); // false
[/dm_code_snippet]
It can also be used to provide a default value for a variable if it’s undefined or null:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let a = null; let b = undefined; let c = "some value"; a = a || "default value"; b = b || "default value"; c = c || "default value"; console.log(a); // "default value" console.log(b); // "default value" console.log(c); // "some value"
[/dm_code_snippet]
You can also use the logical OR operator with functions. For example, you can use it to call a fallback function if the first function call returns an error:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
function firstFunction() {
// some code
if (error) {
return null;
}
return data;
}
function fallbackFunction() {
// some code
return fallbackData;
}
let result = firstFunction() || fallbackFunction();
[/dm_code_snippet]
In this example, if the first function call returns an error (returns a falsy value), the fallback function is called and its return value is used. If the first function call returns valid data (a truthy value), that value is used.
It’s important to note that the logical OR operator only evaluates the second operand if the first operand is falsy. This means that the second operand is not executed if the first one is truthy. This is known as “short-circuit evaluation” and can be used to improve performance in certain cases.
