Javascript truthy and falsy , Javascript logic operators || and &&

In JavaScript, logical operators are used for boolean logic where a boolean value may be returned depending on the outcome of an expression. With the || (OR) operator, since values don't need to be explicitly true or false (they can be truthy or falsy), the operator can return non-boolean results when evaluated.

Introduction

To understand the || operator, let's first look at a fairly basic example. The logical OR operator may be used to provide a default value for a defined variable as follows:

var bar = false,
     foobar = 5,
     foo = bar || foobar; // foo = 5

In this case, foo will only be assigned the value of foobar if bar is considered falsy. A falsy value could be considered being equal to 0, false, undefined, null, NaN or empty (e.g "").

This pattern might look familiar as if you've written jQuery plugins before or used$.extend(), you'll see it implemented when checking for an options object to either be specified or set to an explicit default value:

function( options ) {
    options = $.extend({}, defaults, options || {});
}

Some developers also like using the || operator to set explicit null values when handling falsy values in an application. This helps ensure that values are intentionally nullified:

var foo = bar || null;

Commonly, you're unlikely to want null values but when you do, there's a certain comfort in not having to wonder if it's a desired value or if it indeed should be a nullified property or variable.

You may also see developers opting for this approach to default-namespacing, where rather than opting for a two-line statement consisting of namespace = namespace || {} and populating the object later, this is all done at once as follows:

var namespace = namespace || {
    utils:{},
    core:{}
};

Behind The Scenes

Now, JavaScript variables aren't typed, so a variable may be assigned a value (e.g. a number), despite being assigned through boolean operators:

console.log(null || NaN || undefined || false || 0 || 10);
// outputs: 10

What's happening here isn't quite magic—the expression is simply being lazily evaluated. The interpreter checks the value of the first part of the statement, null, establishes that it's falsy and continues moving forward until a falsy value isn't found (or if no truthy value is found, returning the last value). It's a neat trick that works in dynamic languages beyond just JavaScript, but won't work in static languages, where a type error will be thrown if you try the above.

If you're interesting in reading up more about the evaluation technique used in this example, check out short-circuit evaluation.

So, where is any of this useful? The OR operator can be applied to functions where we wish to provide a default value (as we've seen earlier) if falsy-ness is incurred as follows:

function foo( a, b ){
        a = a || 5;
        b = b || 6;
        console.log( 'Values:' + a + ',' +b );
}

Although, you're more likely to see a ternary to solve this problem in the wild, or perhaps something similar to this:

if(a && a === 5){
        // do something
}else{
        // do something else
}

You may be wondering why. In my opinion it comes down to two things:

Readability: Some developers feel that if/else is easier to read and it can certainly save time when you don't have to evaluate the expression in your mind while looking through code. I would argue that we still have to do the same with if/else, but it comes down to a matter of preference at the end of the day.

Performance: The developers I've discussed the OR operator with have had a perception that if statements had to be more performant than ||, however I believed they had to be at least equivalent performance-wise.

Performance Testing

With the aid of jsPerf, we can test out one example of OR vs IF to find out how they compare:

Performance testing: OR vs IF

var caseTrue = false;
function sum(){
        return 100 + 10;
}
// test 1
caseTrue || sum();
// test 2
if(!caseTrue){
        sum();
}