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?
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.
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With