Understanding the Purpose of the || Operator with Non-Boolean Operands in JavaScript

In JavaScript, the || operator, often referred to as the logical OR operator, is typically used to evaluate boolean expressions. However, you may encounter instances where the || operator is utilized with non-boolean values.

In such scenarios, the || operator behaves as a "default" operator. Instead of returning a boolean, it returns either the left or right operand based on certain rules.

Consider the following example from a large JS library that performs drawing operations in a canvas:

var $time = Date.now || function() {
  return  new Date;
};

In this example, the || operator is used to assign a value to the $time variable. If the Date.now method exists on the Date object, it will be assigned to the $time variable. Otherwise, an anonymous function that returns the current time is assigned instead.

The key to comprehending this behavior lies in understanding that the OR operator returns the first truthy value or the last falsey value in its operands. In this case, the Date.now method is a truthy value (assuming it exists), so it is returned. If Date.now does not exist, the anonymous function becomes the truthy value and is returned.

This usage of the || operator as a default operator is prevalent in JavaScript and aligns with its purpose as a way to specify default values. For instance, you could use it to assign a value to a variable if a specific property is not set:

var user = user || { name: "Unknown User" };

By understanding the || operator's behavior with non-boolean operands, you can harness its functionality to provide dynamic and versatile value assignments in your JavaScript code.