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
