What does "|| 0" do in JavaScript?

Question

I have a piece of JavaScript code that shows:

function(next, feather) {
  var l = Number(171) + (next || 0);
  var m = Math.max(1, l - 9);
  return {
    lc: 300 * (l + 1) * m + (5 * feather || 0)
  }
}

Now I've simplified it a little bit. But can anyone explain what the "|| 0" does? As far as I can tell it does nothing.

(Notice I replaced a function with Number(171), as that function effectively returns a number, feather is also supposed to be a number, 0 most of the time, 1 sometimes).

Answer 1

If next is falsy, 0 will be used in its place. JavaScript has no default value operator, so users have leveraged this approach, even though the language's creator has called it an abusage.

Answer 2

Well if you know next and feather are numbers, then yes, it has no function. However, if you were to pass in a value like undefined, which is effectively what will happen if you call the function without specifying any parameters, you'll see some difference:

var next = undefined;
console.log(171 + next);        // NaN
console.log(171 + (next || 0)); // 171

Of course, this isn't a foolproof method. Passing in null has no effect on the computation, and passing a non-empty string (e.g. "1"), will result in something very different.

Answer 3

variable || 0 looks up the variable, and if it is undefined, null, or empty (i.e. zero), it will use the number 0 instead. This actually makes sense because if it was anything other than zero itself, it would return NaN.

If that didn't make any sense, this should:

undefined * 1 == NaN;
(undefined || 0) * 1 == 0;

Answer 4

The && and || operators in JavaScript will shortcut evaluation. The way it's set up in the example you gave, if 'next' evaluates to a boolean TRUE then that will be added to 'l', otherwise '0' will be added.

Answer 5

If the next is falsy (false-like value) zero is used instead.

E.g. next || 0

equals something like

    if(!next) { return 0 } else { return next; }

It forces false-like values to be an actual zero number.

Answer 6

If the context before the logical or || is falsy (this includes nulls and undefineds), then it will take the value after it. So in your case, if next or feather is not defined or 0, then the value of 0 will be used in those calculations within the parenthesis, essentially the code will read as the following if both are 0 or undefined:

function(next, feather) {
  var l = Number(171) + 0;
  var m = Math.max(1, l - 9);
  return {
    lc: 300 * (l + 1) * m + 0
  }
}

Answer 7

Using the OR operator || in this scenario is basically short hand for checking weather or not next was included. If it were coming from some sort of number calculation, perhaps it was possible that next was NaN at times (which is always falsy) and so this was the workaround to make it 0.

var l = Number(171) + (next || 0);

A more readable approach would be to test for that case at the inset of the function

if( isNaN(next) )next = 0; 

Or to also include other tests as well

if( isNaN(next) || next === null || typeof(next) === "undefined" )next = 0;