How does the var FOO = FOO || {} idiom in Javascript work?

Question

From this question: What does "var FOO = FOO || {}" (assign a variable or an empty object to that variable) mean in Javascript?

I've learned that var FOO = FOO || {} essentially means "If FOO exists, then leave it untouched, else make it an empty object".

But how?

This is how I would parse this syntax:

var FOO = (FOO || {})

So: If FOO exists AND evaluates to Boolean value of True, then (FOO || {}) will return True, so eventually FOO will be completely overwritten and will hold the Boolean value of True from now on.

Else (FOO || {}) will return to whatever Boolean value {} evalueates to. Since an empty object, which {} is, always evaluates to True...

Then in ANY case (FOO || {}) should evaluate to True, so...

In ANY POSSIBLE CASE, after evaluating var FOO = FOO || {}, FOO should hold the trivial Boolean value of True, regardless of whatever it was holding before. Essentially, to my understanding, var FOO = FOO || {} should be equivalent to var FOO = True.

Where is my mistake?

Answer 1

If FOO exists AND evaluates to Boolean value of True, then (FOO || {}) will return True

That isn't how the || operator works in JS.

A correct interpretation is:

If the left hand side is a true value, evaluate as the left hand side (i.e. FOO), otherwise evaluate as the right hand side (i.e. {}).

var zero = 0;
var one = 1;
var two = 2;

console.log(zero || two);
console.log(one || two);

Answer 2

So: If FOO exists AND evaluates to Boolean value of True, then (FOO || {}) will return True, so eventually FOO will be completely overwritten and will hold the Boolean value of True from now on.

That is wrong, but the below lines surprise you if your background is Strictly Typed Languages :)

The expression doesn't return a boolean value. It returns the expression that can be evaluated to true.

Here is the docs for the same

Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.

Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value.

Different examples given in docs might help you understand the above words.

o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // returns false

Answer 3

JavaScript || operator returns the expression itself not the boolean value. Here's a reference from Mozilla documentation

Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true.

Reference :

Conversion to True in boolean depends on whether the expression evaluates to a Truthy value.

Answer 4

So: If FOO exists AND evaluates to Boolean value of True, then (FOO || {}) will return True

The problem of the concept is the cast. Here the Object is not cast to Boolean, JS leave it untouched.

So, If FOO is defined (FOO || {}) will return FOO and if is not defined will return {}

Answer 5

This is because of Short Circuit Evaluation.

Short-circuit evaluation says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression: when the first argument of the AND (&&) function evaluates to false, the overall value must be false; and when the first argument of the OR (||) function evaluates to true, the overall value must be true.

But if the first argument of AND function evaluates to true, the second argument has to be executed or evaluated to determine the value of expression; and when the first argument of OR function evaluates to false, the second argument has to be executed or evaluated to determine the value of the expression.

In-case of FOO || {};

1. This returns FOO if FOO evaluates to TRUE, because there is no need to evaluate second argument if first one is true.
2. This returns {} if FOO evaluates to FALSE, because the second argument need to be evaluated to get the value of the expression.

See here for more details..