Most programmers are familiar with the ‘&&’ and ‘||’ logical operators. What many do not know is how these operators behave in Javascript.

Quick review

In Javascript, the following values are considered falsy:

  • false
  • 0 (zero)
  • “” (empty string)
  • null
  • undefined
  • NaN (a special Number value meaning Not-a-Number!)
All other values are considered truthy.

Guard operator

Let’s say you want to access an attribute deep inside an object:

var name = data.person.name;

It’s entirely possible that not all objects in that chain are defined. So, to write safe code, we may want to do something like this:

var name;
if(data.person) {
  name = data.person.name;
}

To avoid nesting, which can sometimes make the code seem bulkier and more difficult to read, we can write the same code without the ‘if’ statement while still GUARD ourselves against possibly referencing an undefined object in the chain:

var name = data.person && data.person.name;

The reason why we can do this is because the ‘&&’ operator behaves in the following way:

  • If the value on the left is falsy, return it
  • If the value on the left is truthy, continue the evaluation of the value to the right recursively
  • If the last value is reached, return it no matter if it is falsy or truthy

var obj0;

// obj0 is undefined, so is falsy and is returned
// val0 is set to obj0, so is set to undefined
var val0 = obj0 && obj0.foo && obj0.foo.name;
var obj1 = {};

// obj1 is truthy, so continue
// obj1.foo is undefined (falsy), so return it
// val1 is therefore set to undefined
var val1 = obj1 && obj1.foo && obj1.foo.val;
var obj2 = {
  foo: {}
};

// obj2 is truthy, so continue
// obj2.foo is truthy, so continue
// obj2.foo.name is the last value, return it
// val2 is set to obj2.foo.name, which is undefined
var val2 = obj2 && obj2.foo && obj2.foo.name;
var obj3 = {
  foo: {
    name: 'Joe'
  }
};

// obj3 is truthy, continue
// obj3.foo is truthy, continue
// obj3.foo.name is the last value, return it
// val3 is set to obj3.foo.name, which is 'Joe'
var val3 = obj3 && obj3.foo && obj3.foo.name;

Since the ‘&&’ operator can be used to GUARD against errors when retrieving members of an object, it is commonly referred to as the ‘guard operator’.

Note that the ‘&&’ operator can be used in other scenarios as well:

var a = 1;
var b = 0;
var c = a && b;  // c is now set to 0, since b was the last value returned by the expression

Default operator

Where the ‘||’, on the other hand, returns the first truthy value in the expression.

var a = 0;
var b = 1;
var c = a || b; // c is set to 1, since b is the first truthy value in the expression

The ‘||’ operator is commonly referred to as the ‘Default operator’, because it is often used to assign a default value.

function myFunc(node, params) {
  
  // if params was an object that was passed in (is truthy), assign it to 'settings'
  // if params is not passed in (is falsy), assign a default object to 'settings'
  var settings = params || {isAwesome: true}; 
  
  if(settings.isAwesome)
    node.innerHTML = "Awesome";
}