Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 355
ptrn Avatar asked May 17 '10 17:05

ptrn


People also ask

What does options mean in JavaScript?

An options object is a normal JavaScript object that contains a set of named parameters that are passed into a function. For example, the jQuery. ajax function uses an options object. This function can take up to 34 parameters, all of which are optional.

What does || mean in jQuery?

Its kind of a side-effect use case of the logical OR operator. More specifically, it uses short circuiting. For example in the below case a || b. if a is true then b never gets executed, but if a is false then b gets executed.


2 Answers

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.

like image 161
Christian C. Salvadó Avatar answered Sep 28 '22 02:09

Christian C. Salvadó


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.

like image 32
Filip Roséen - refp Avatar answered Sep 28 '22 04:09

Filip Roséen - refp