14

In looking through some code I found online, I found this peculiar line of code (Javascript):

function values(b) {
    this.b = b || 0;
}

I simply can't figure out what the purpose of the ||0. If I'm not mistaken, since || returns a boolean, this value, b will always be whatever the boolean equivalent of the parameter is. If b is passed as true (ie 1 or true), then b should be true; otherwise, using one of the false values (ie. NaN, 0), this should be false. I then interpret this as the following:

b is true:

this.b = true || false; // will evaluate to true

b is false:

this.b = false || false; // will evaluate to false

I just don't see the value gained by adding ||0. Could someone please explain this to me?

user2864740
  • 60,010
  • 15
  • 145
  • 220
Vasu
  • 1,090
  • 3
  • 18
  • 35
  • 1
    || returns the expression to the right if the left side is falsy, not a boolean, unless a boolean expression happens to be to the right of "||" ... it turns null, undefined, "", false, etc into zero. – dandavis Jan 22 '14 at 03:17
  • In this case, it's used as a default value. When you call `new values()` without a b parameter, it'll set `b` to 0. Related http://programmers.stackexchange.com/q/203469/56971 – Benjamin Gruenbaum Jan 22 '14 at 03:18
  • 1
    If `b` is a falsy value, `this.b` will be set to `0`. – thefourtheye Jan 22 '14 at 03:18

6 Answers6

21

|| in a variable assignment is a common way to specify a default value. This is because of JavaScript's falsy values. In JavaScript, undefined, null, empty string and 0 all evaluate to false in a boolean context.

For example:

var blah = undefined;
if (blah) {
    console.log('got it!');
}
else {
    console.log('not true!');  // this one outputs
}

Using || in an assignment is a way of saying "if defined, otherwise use this".

For this code,

function values(b) {
    this.b = b || 0;
}

we can use a truth table:

b          this.b
------------------
5          5
10         10
0          0
undefined  0
null       0
''         0

The values really of interest are undefined and null. So what we really want is:

if (b !== undefined && b !== null) {
    this.b = b;
}
else {
    this.b = 0;
}

But this.b = b || 0 is much shorter to write.

digitalextremist
  • 5,952
  • 3
  • 43
  • 62
Brandon
  • 9,822
  • 3
  • 27
  • 37
4

This is a pretty classic question that gets tossed around relatively frequently.

The main purpose of utilizing something like x = x || 0 is to ensure that x will have a false value Boolean, as you've described, but rather than having null or false, you are returning 0.

The reasoning behind using the above rather than say, x = x || false is that you will end up returning 0 (much easier to manipulate integer or float based data) rather than the other values.

Everything you've suggested is relatively true. For example:

var x = x || false; // False
var y = x || 0;     // 0
var z = x || null;  // Null
alert(x);
alert(y);
alert(z);

If you had a purpose to use a true or false value, your suggestion would be perfectly adequate.

Nicholas Hazel
  • 3,758
  • 1
  • 22
  • 34
2

|| returns a boolean only when both of its operands are booleans. Otherwise, it returns (from left to right) the first operand that isn't "falsy" or the last one if it can't find any.

In that function, this.b is meant to be a number but the b argument to the function is optional (so it could be undefined). To make this.b always a number, they used that. So if you didn't pass b, it'd look like:

this.b = undefined || 0

And this.b will be set to zero because undefined is always "falsy".

A resource on truthy vs falsy: http://www.sitepoint.com/javascript-truthy-falsy/

The logic behind logical operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

rvighne
  • 20,755
  • 11
  • 51
  • 73
1

These are all equivalent:

this.b = b || 0;

if (b) { this.b=b } else { this.b=0 }

this.b = b ? b : 0;

this.b = 0; if (b) this.b=b;

Obviously the first one is less typing.

The reason the first one works is described fairly well on the MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

In short:

The && and || operators have a special feature whereby the values are evaluated for truthyness but the value is returned rather than just true or false.

In your case, expr1 || expr2, will return expr1 if it evaluates to true, otherwise expr2 will be returned.

bluefeet
  • 381
  • 1
  • 7
0

It is a way to define default value for a parameter. If b is undefined then this.b becomes 0.

vooD
  • 2,881
  • 2
  • 25
  • 34
  • (While it will also "accidentally" catch values like `""`, it's commonly used with coalescing `undefined` to a default.) – user2864740 Jan 22 '14 at 03:22
0

It gives a default value in the case that a parameter or return was missing (undefined). It's idiomatic and confusing to newcomers, but it is a better idea than just letting things go undefined. In the case of || 0, maybe you'll be doing some math later, and if assigned without that default, you'll start seeing NaN everywhere.

sqykly
  • 1,586
  • 10
  • 16