What does "options = options || {}" mean in Javascript?

Question

I came over a snippet of code the other day that I got curious about, but I'm not really sure what it actually does;

options = options || {};

My thought so far; sets variable options to value options if exists, if not, set to empty object.

Yes/no?

Answer 1

This is useful to setting default values to function arguments, e.g.:

function test (options) {
  options = options || {};
}

If you call test without arguments, options will be initialized with an empty object.

The Logical OR || operator will return its second operand if the first one is falsy.

Falsy values are: 0, null, undefined, the empty string (""), NaN, and of course false.

ES6 UPDATE: Now, we have real default parameter values in the language since ES6.

function test (options = {}) {
  //...
}

If you call the function with no arguments, or if it's called explicitly with the value undefined, the options argument will take the default value. Unlike the || operator example, other falsy values will not cause the use of the default value.

Answer 2

It's the default-pattern..

What you have in your snippet is the most common way to implement the default-pattern, it will return the value of the first operand that yields a true value when converted to boolean.

var some_data   = undefined;
var some_obj_1  = undefined;
var some_obj_2  = {foo: 123};

var str = some_data || "default";
var obj = some_obj1 || some_obj2  || {};

/* str == "default", obj == {foo: 123} */

^{the above is basically equivalent to doing the following more verbose alternative}

var str = undefined;
var obj = undefined;

if (some_data) str = some_data;
else           str = "default";

if      (some_obj1) obj = some_obj1;
else if (some_obj2) obj = some_obj2;
else                obj = {};

^{examples of values yield by the logical OR operator:}

1         || 3         -> 1
0         || 3         -> 3
undefined || 3         -> 3
NaN       || 3         -> 3
""        || "default" -> "default"
undefined || undefined -> undefined
false     || true      -> true
true      || false     -> true
null      || "test"    -> "test"
undefined || {}        -> {}
{}        || true      -> {}

null || false     || {} -> {}
0    || "!!"      || 9  -> "!!"

As you can see, if no match is found the value of the last operand is yield.

---

When is this useful?

There are several cases, though the most popular one is to set the default value of function arguments, as in the below:

function do_something (some_value) {
  some_value = some_value || "hello world";

  console.log ("saying: " + some_value);
}

...

do_something ("how ya doin'?");
do_something ();

saying: how ya doin'?
saying: hello world

---

Notes

This is notably one of the differences that javascript have compared to many other popular programming languages.

The operator || doesn't implicitly yield a boolean value but it keeps the operand types and yield the first one that will evaluate to true in a boolean expression.

Many programmers coming from languages where this isn't the case (C, C++, PHP, Python, etc, etc) find this rather confusing at first, and of course there is always the opposite; people coming from javascript (perl, etc) wonders why this feature isn't implemented elsewhere.

Answer 3

Yes. The sample is equivalent to this:

if (options) {
    options = options;
} else {
    options = {};
}

The OR operator (||) will short-circuit and return the first truthy value.

Answer 4

Yes, that's exactly what it does.

Answer 5

Found another variation of this:

options || (options = {});

Seems to do the same trick.