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

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

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

The reason why it's 13 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 12 of which share the same namespace it then 11 doesn't matter in which order the two files 10 are loaded, you still get func1 and func2 correctly 9 defined within the MY_NAMESPACE object correctly.

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

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

var AEROTWIST = AEROTWIST || {};

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

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

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

it's basically the same 1 as saying this:

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

Hope that helps.

There are two main parts that var FOO = FOO || {}; covers.

#1 Preventing overrides

Imagine 27 you have your code split over multiple files 26 and your co-workers are also working on 25 an Object called FOO. Then it could lead to 24 the case that someone already defined FOO and 23 assigned functionality to it (like a skateboard function). Then 22 you would override it, if you were not checking 21 if it already exists.

Problematic case:

// Definition of co-worker "Bart" in "bart.js"
var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker "Homer" in "homer.js"
var FOO = {};

FOO.donut = function() {
  alert('I like donuts!');
};

In this case the skateboard function 20 will be gone if you load the JavaScript 19 file homer.js after bart.js in your HTML because Homer 18 defines a new FOO object (and thus overrides 17 the existing one from Bart) so it only knows 16 about the donut function.

So you need to use var FOO = FOO || {}; which 15 means "FOO will be assigned to FOO (if it 14 exists already) or a new blank object (if 13 FOO does not exist already).

Solution:

var FOO = FOO || {};

// Definition of co-worker Bart in bart.js
FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker Homer in homer.js
var FOO = FOO || {};

FOO.donut = function() {
  alert('I like donuts!');
};

Because Bart 12 and Homer are now checking for the existence 11 of FOO before they define their methods, you 10 can load bart.js and homer.js in any order without overriding 9 each other's methods (if they have different 8 names). So you will always get a FOO object 7 which has the methods skateboard and donut (Yay!).

#2 Defining a new object

If you've 6 read through the first example then you 5 already now what's the purpose of the || {}.

Because 4 if there is no existing FOO object then the 3 OR-case will become active and creates a 2 new object, so you can assign functions 1 to it. Like:

var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

Another common use for || is to set a default 3 value for an undefined function parameter 2 also:

function display(a) {
  a = a || 'default'; // here we set the default value of a to be 'default'
  console.log(a);
}

// we call display without providing a parameter
display(); // this will log 'default'
display('test'); // this will log 'test' to the console

The equivalent in other programming 1 usually is:

function display(a = 'default') {
  // ...
}

If there is no value in AEROTWIST or it 3 is null or undefined the value assigned 2 to the new AEROTWIST will be {} (a blank 1 object)

The || operator takes two values:

a || b

If a is truthy, it 5 will return a. Otherwise, it will return 4 b.

The falsy values are null, undefined, 0, "", NaN and false. The 3 truthy values are everything else.

So if 2 a has not been set (is it undefined) it will return 1 b.

For || operations, JS will return the FIRST "truthy" value 12 it finds (reading left-to-right):

var bob = false || undefined ||  0  ||  null || "hi"
//          ^          ^         ^      ^        ^
//          nope       nope      nope   nope     yip
//
// => bob = "hi"

// --------------
// breaking
// --------------
var bob = false || "hi" ||  0  ||  null || undefined
//          ^       ^
//          nope    yip <-- stops here
//                          the rest are ignored
//
// => bob = "hi"

Another 11 trick is to use the && (and) to 10 ensure something exists before accessing 9 it.

For && operations, JS will return the LAST "truthy" value 8 it finds (reading left-to-right).

For example 7 if you're trying to read a property from 6 a multi-level object.

var obj = {
        foo : {
            bar : "hi"
        }
    }

var bob = obj && obj.foo && obj.foo.bar;
//          ^        ^              ^
//          yip      yip            use this
//
// => bob = "hi"

// --------------
// breaking:
// --------------
var bob = obj && obj.foo && obj.foo.sally && obj.foo.bar;
//        ^          ^              ^
//        yip        yip            nope  <-- stops here, 
//                   ^                        and returns the last "yip"
//                   |                        the rest are ignored   |
//                   '-----------------------------------------------'
//
// => bob = obj.foo

Both || and && operations 5 are read left-to-right... so you can have 4 things that might normally throw errors 3 toward the right side, since JS will simply 2 stop reading left-to-right once it detects 1 a truthy/falsey value.