What does "var FOO = FOO || {}" (assign a variable or an empty object to that variable) mean in Javascript?

Solution 1:

Your guess as to the intent of || {} is pretty close.

This particular pattern when seen at the top of files is used to create a namespace, i.e. a named object under which functions and variables can be created without unduly polluting the global object.

The reason why it's used is so that if you have two (or more) files:

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func1 = {
}

and

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func2 = {
}

both of which share the same namespace it then doesn't matter in which order the two files are loaded, you still get func1 and func2 correctly defined within the MY_NAMESPACE object correctly.

The first file loaded will create the initial MY_NAMESPACE object, and any subsequently loaded file will augment the object.

Usefully, this also allows asynchronous loading of scripts that share the same namespace which can improve page loading times. If the <script> tags have the defer attribute set you can't know in which order they'll be interpreted, so as described above this fixes that problem too.

Solution 2:

var AEROTWIST = AEROTWIST || {};

Basically this line is saying set the AEROTWIST variable to the value of the AEROTWIST variable, or set it to an empty object.

The double pipe || is an OR statement, and the second part of the OR is only executed if the first part returns false.

Therefore, if AEROTWIST already has a value, it will be kept as that value, but if it hasn't been set before, then it will be set as an empty object.

it's basically the same as saying this:

if(!AEROTWIST) {var AEROTWIST={};}

Hope that helps.