JavaScript Variable fallback

Question

Please can someone explain to me what this line of code does:

var list  = calls[ev] || (calls[ev] = {});

My best guess:

It's setting the variable "list" with the value of calls.xxx, where xxx is a variable, ev. If calls[ev] doesn't exist, then it's creating it as an empty object and assigning that empty object to "list". Is that right?

Why are the parenthesis being used? Where can I find out more info on using || when setting variables, and the use of parenthesis in this context? Thanks!

The parenthesis are just ensuring the right evaluation of the expression, because `||` has a higher precedence than the assignment operator `=`. Without parenthesis, it was evaluated as `var list = (calls[ev] || calls[ev]) = {};` and would result in an error. The [MDN JavaScript reference](https://developer.mozilla.org/en/JavaScript/Reference) is pretty comprehensive. — Felix Kling, Mar 06 '12 at 15:12
possible duplicate of [What does the || operator do?](http://stackoverflow.com/questions/830618/what-does-the-operator-do) — Felix Kling, Mar 06 '12 at 15:13

score 18 · Accepted Answer · answered Mar 06 '12 at 15:14

This code is equivalent to

var list;
if (calls[ev])
  list = calls[ev];
else {
  calls[ev] = {};
  list = calls[ev];
}

Two features of the language are used:

The shortcut computation of boolean expressions (consider a || b. If a is true then b is not evaluated). Thus, if you assign var v = a || b; and a evaluates to something that can be cast to true, then b is not evaluated.
The assignment statement evaluates to the last assigned value (to enable var a = b = c;)

The parentheses are necessary to avoid this interpretation:

var list = (calls[ev] || calls[ev]) = {};

(which is an error).

score 13 · Answer 2 · answered Mar 06 '12 at 15:11

Your guess is right. This is a common way to declare "default" values for variables in JavaScript.

function foo(bar) {
    var bar = bar || 0; //This sets bar to 0 if it's not already set
    console.log(bar);
}

The way this works is that in JavaScript, an undefined variable is falsy, meaning that in any boolean comparaison operation, it will evaluate to false. You can then use the OR operator to combine two values and it will return the first value that evaluates to true.

Thank you, I arrived here looking for that explanation. – NiloVelez Feb 27 '15 at 23:49 — NiloVelez, Feb 27 '15 at 23:49

Paul Dixon · Answer 3 · 2012-03-06T15:16:50.063

|| or 'logical OR' has a higher precedence than the assignment operator =, thus the parentheses are necessary to ensure this idiom evaluates in the right order

The other thing to be aware of is that many languages, Javascript included, provide short-circuit evaluation of boolean operators like AND and OR. If the first operand of a logical-or evaluates true, there is no need to evaluate the second operand, as it would make no difference to the result.

Understand this, and you'll see this isn't some special assignment syntax, but an idiom, or pattern, that exploits a language feature to provide a more compact representation of an idea.

score 1 · Answer 4 · answered Mar 06 '12 at 15:16

you are right about your first guess. This is a common pattern for initialising javascript namespaces. It serves to make sure you dont overwrite a previous object with the same name. Most popular libraries will do something similar in order to create their namespace objects.

The parenthesis is there so that the expressions are evaluated in the proper order.

JavaScript Variable fallback

4 Answers4

Linked