Cannot understand JavaScript instruction

Question

I am interested in the Wasabi tool. Please have a look on this piece of code .

I don't understand this instruction:

var W = window.Wasabi = window.Wasabi || {};

My final purpose is to adjust a CSS property, dynamically loaded by the JavaScript...

Thanks for the help.

Answer 1

Two things going on here.

• Logical OR operator:

a||b will return a if a is truthy or b otherwise.

so window.Wasabi||{} mean return window.Wasabi if it is defined or otherwise return a new empty object.

• Double assignment:

c=d=1 set d equal to 1 and c equal to d . ie set c and d to 1 .

• Putting these two things together:

if window.Wasabi is set already then just get a reference to it and store that in W . Otherwise create a new object, store a reference in window.Wasabi (to use next time) and call it W for use now.

Answer 2

If window.Wasabi doesn't exist, then window.Wasabi will be equal to {}. If it already exist, then don't change it. Finally, assign W to window.Wasabi. So, it would be like this code:

var W;

if (!window.Wasabi) {
    window.Wasabi = {};
}
W = window.Wasabi;

Answer 3

There are 2 not-so-obvious things in this statement. There's the 2 consecutive equals, and the || at the end. They are not related so Ill tackle them one by one.

var W=window.Wasabi=window.Wasabi;
//Shorthand for
var window.Wasabi=window.Wasabi;
var W=window.Wasabi;

In english, that'd be: W equals window.Wasabi which equals window.Wasabi.

Now, the || is an OR in an operation, it states to take the left most value, if it's a truthy value, OR the one on the right.

var window.Wasabi=window.Wasabi||{};
//equates to 
var window.Wasabi;
if(window.Wasabi){
    window.Wasabi=window.Wasabi;
}else{
    window.Wasabi={};
}

This pattern is very useful to give a default value to a variable. This will answer that Wasabi is at least an object...

Answer 4

There are two main javascript concepts to understand in this statement.

The first one is :

var x = y || {}

This is equivalent to :

if (y)
  x = y
else {
  x = {}

If y is truethy, then its value will be assigned to x . Else, x will be equal to {} (an empty object)

The second one is :

a = b = "something"

b will be assigned the value "something" and a will be assigned the value of b (which was just set to "something")

Both a and b will be assigned the value "something".

Application to your example :

var W=window.Wasabi=window.Wasabi||{};

If window.Wasabi is not defined (or is falsy), then it will be assigned to {} . Then the W variable will be assigned the value of window.Wasabi.

Is window.Wasabi is defined, then it will be assigned to the value of itself (nothing will happen), and W will be assigned the value of window.Wasabi.

It's a pretty dirty way to set the initial value of an object if it doesn't exist, but... it works.