The expression x = x || y is a common sight in JavaScript, and increasingly in other languages like Python and Ruby. But what does it actually mean, and why is it so prevalent? Understanding this construct is crucial for any programmer looking to write clean, efficient, and idiomatic code. This seemingly simple line of code packs a powerful punch, offering a concise way to handle default values and ensure variables are properly initialized. In this article, we’ll delve into the mechanics of the x = x || y construct, exploring its nuances, benefits, and potential pitfalls.

Understanding the OR Operator

At its core, the || symbol represents the logical OR operator. In most programming languages, the OR operator returns true if at least one of its operands is true, and false otherwise. However, JavaScript, along with some other languages, employs “short-circuit evaluation.” This means that if the left operand evaluates to a “truthy” value, the right operand is never evaluated.

Truthy values encompass anything that isn’t explicitly “falsy.” Falsy values in JavaScript include false, 0, -0, 0n, "", null, undefined, and NaN. Everything else is considered truthy.

This short-circuiting behavior is the key to understanding how x = x || y works.

The Assignment with OR: Default Values

The construct x = x || y leverages short-circuit evaluation to assign a default value to x if x is currently falsy. Here’s the breakdown:

1. If x is truthy (e.g., already has a value like a number, string, or object), the expression short-circuits, and x retains its current value.
2. If x is falsy (e.g., undefined, null, 0, ""), the OR operator evaluates the right operand, y, and assigns its value to x.

This effectively provides a concise way to set a default value for x if it hasn’t already been assigned one. It’s equivalent to writing:

if (!x) { x = y; }Practical Examples and Use Cases

Imagine you’re fetching user preferences from a database. If the user hasn’t set a preferred language, you want to default to English. You could use x = x || y like this:

let userLanguage = getLanguageFromDatabase(); userLanguage = userLanguage || "en_US";This ensures userLanguage will be “en_US” if the database returns null or undefined. Another example would be setting default configuration options.

Potential Pitfalls and Considerations

While convenient, x = x || y isn’t without its caveats. If x is intentionally set to a falsy value like 0 or "", this construct will overwrite it with y, which may not be the desired behavior. Consider this example:

let userScore = 0; // User starts with a score of 0 userScore = userScore || 10; // Oops! userScore is now 10In such cases, a more explicit check like if (typeof x === 'undefined' || x === null) might be preferable. Furthermore, understanding the nuances of truthy and falsy values is crucial to avoid unexpected results.

Nullish Coalescing Operator (??)

In modern JavaScript (ES2020 and later), the nullish coalescing operator (??) offers a more refined approach to default values. Unlike ||, ?? only assigns y to x if x is strictly null or undefined. This avoids the potential pitfalls of overwriting falsy values like 0 or "".

Using our previous example:

let userScore = 0; userScore = userScore ?? 10; // userScore remains 0- Logical OR (||): Returns the first truthy value or the last value if all are falsy.

• Nullish Coalescing Operator (??): Returns the right-hand side operand only if the left-hand side is null or undefined.

Learn More About JavaScript OperatorsFAQ

Q: Is x = x || y the same as x ||= y?

A: In languages that support the ||= operator (like Ruby), yes, they are functionally equivalent. However, JavaScript does not have a ||= operator.

Understanding the nuances of these operators empowers developers to write cleaner, more efficient, and predictable code. By selecting the right operator for the task, you can ensure your code behaves as expected, handling default values gracefully and avoiding unexpected side effects. Explore these concepts further in the resources linked below.

• MDN Web Docs: Logical OR
• MDN Web Docs: Nullish Coalescing Operator
• W3Schools: JavaScript Operators

Question & Answer :
I am debugging some JavaScript and can’t explain what this || does:

function (title, msg) { var title = title || 'Error'; var msg = msg || 'Error on Request'; } 

Why is this guy using var title = title || 'ERROR'? I sometimes see it without a var declaration as well.

What is the double pipe operator (||)?

The double pipe operator (||) is the logical OR operator . In most languages it works the following way:

• If the first value is false, it checks the second value. If that’s true, it returns true and if the second value is false, it returns false.
• If the first value is true, it always returns true, no matter what the second value is.

So basically it works like this function:

function or(x, y) { if (x) { return true; } else if (y) { return true; } else { return false; } } 

If you still don’t understand, look at this table:

| true false ------+--------------- true | true true false | true false 

In other words, it’s only false when both values are false.

How is it different in JavaScript?

JavaScript is a bit different, because it’s a loosely typed language. In this case it means that you can use || operator with values that are not booleans. Though it makes no sense, you can use this operator with for example a function and an object:

(function(){}) || {} 

What happens there?

If values are not boolean, JavaScript makes implicit conversion to boolean. It means that if the value is falsey (e.g. 0, "", null, undefined (see also All falsey values in JavaScript)), it will be treated as false; otherwise it’s treated as true.

So the above example should give true, because empty function is truthy. Well, it doesn’t. It returns the empty function. That’s because JavaScript’s || operator doesn’t work as I wrote at the beginning. It works the following way:

• If the first value is falsey, it returns the second value.
• If the first value is truthy, it returns the first value.

Surprised? Actually, it’s “compatible” with the traditional || operator. It could be written as following function:

function or(x, y) { if (x) { return x; } else { return y; } } 

If you pass a truthy value as x, it returns x, that is, a truthy value. So if you use it later in if clause:

(function(x, y) { var eitherXorY = x || y; if (eitherXorY) { console.log("Either x or y is truthy."); } else { console.log("Neither x nor y is truthy"); } }(true/*, undefined*/)); 

you get "Either x or y is truthy.".

If x was falsey, eitherXorY would be y. In this case you would get the "Either x or y is truthy." if y was truthy; otherwise you’d get "Neither x nor y is truthy".

The actual question

Now, when you know how || operator works, you can probably make out by yourself what does x = x || y mean. If x is truthy, x is assigned to x, so actually nothing happens; otherwise y is assigned to x. It is commonly used to define default parameters in functions. However, it is often considered a bad programming practice, because it prevents you from passing a falsey value (which is not necessarily undefined or null) as a parameter. Consider following example:

function badFunction(/* boolean */flagA) { flagA = flagA || true; console.log("flagA is set to " + (flagA ? "true" : "false")); } 

It looks valid at the first sight. However, what would happen if you passed false as flagA parameter (since it’s boolean, i.e. can be true or false)? It would become true. In this example, there is no way to set flagA to false.

It would be a better idea to explicitly check whether flagA is undefined, like that:

function goodFunction(/* boolean */flagA) { flagA = typeof flagA !== "undefined" ? flagA : true; console.log("flagA is set to " + (flagA ? "true" : "false")); } 

Though it’s longer, it always works and it’s easier to understand.

You can also use the ES6 syntax for default function parameters, but note that it doesn’t work in older browsers (like IE). If you want to support these browsers, you should transpile your code with Babel.

See also Logical Operators on MDN.