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.

Thanks to all for these good and prompt answers !

Oodini
– Oodini

2017-10-23 12:35:57 +00:00
Commented Oct 23, 2017 at 12:35 — Oodini
– Oodini, Commented Oct 23, 2017 at 12:35

Chris Charles · Accepted Answer · 2017-10-23 12:17:53Z

3

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. i.e. 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.

answered Oct 23, 2017 at 12:17

Chris Charles

4,44620 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user8811940 · Accepted Answer · 2017-10-23 12:14:25Z

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;

answered Oct 23, 2017 at 12:14

user8811940

Comments

Salketer · Accepted Answer · 2017-10-23 12:18:42Z

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...

mcoeur · Accepted Answer · 2017-10-23 12:27:52Z

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.

Collectives™ on Stack Overflow

Cannot understand JavaScript instruction

4 Answers 4

Comments

Comments

Comments

The first one is :

The second one is :

Application to your example :

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

The first one is :

The second one is :

Application to your example :

Comments

Related