Read more

Caution when using the || operator to set defaults

Henning Koch
July 21, 2017Software engineer at makandra GmbH

I often see the use of || to set a default value for a variable that might be nil, null or undefined.

x = x || 'default-value'
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

This pattern should be avoided in all languages.

While using || works as intended when x is null or an actual object, it also sets the default value for other falsy Show archive.org snapshot values, such as false. false is a non-blank value that you never want to override with a default.

To make it worse, languages like JavaScript or Perl have many more falsey values Show archive.org snapshot , including the number 0 or the empty string ('').

Setting defaults correctly: Ruby

Prefer to check for nil? before overriding a value with a default:

x = 'default-value' if x.nil?

If you're reading from an options hash, you probably want to use fetch Show archive.org snapshot :

x = options.fetch(:x, 'default-value')

fetch returns the default value only if the key :x is missing from the Hash entirely. Note that there is a difference between a hash missing a key :x, and a hash that has :x assigned to nil. In the last case, the hash still has a key :x, and fetch will return its value nil.

Setting defaults correctly: JavaScript

Plain ES5 (no libraries)

Prefer to check if the variable is null or undefined before overriding its value with a default:

if (x === null || typeof x === 'undefined') {
  x = 'default-value';
}

ES-next

ES6 has the "nullish coalescing" syntax Show archive.org snapshot :

x = x ?? 'default-value'

If you are using Babel, you can transpile this syntax into ES5 using the @babel/plugin-proposal-nullish-coalescing-operator Show archive.org snapshot package.

With Lodash

If you are using Underscore or Lodash Show archive.org snapshot you can also write this as:

if (_.isUndefined(x) || _.isNull(x)) {
  x = 'default-value';
}

If you are using a recent version of Lodash you can also write this as:

if (_.isNil(x)) {
  x = 'default-value';
}

This is also possible in recent Lodash versions (but slower if your default value is expensive to construct):

x = _.defaultTo(x, 'default-value')

With CoffeeScript

CoffeeScript lets you write:

x ?= 'default-value'
Posted by Henning Koch to makandra dev (2017-07-21 11:10)