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

Question

Looking at an online source code I came across this at the top of several source files.

var FOO = FOO || {};
FOO.Bar = …;

But I have no ide

Answer 1

The || operator takes two values:

a || b

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

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

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

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

Answer 3

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

#1 Preventing overrides

Imagine you have your code split over multiple files and your co-workers are also working on an Object called FOO. Then it could lead to the case that someone already defined FOO and assigned functionality to it (like a skateboard function). Then you would override it, if you were not checking 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 will be gone if you load the JavaScript file homer.js after bart.js in your HTML because Homer defines a new FOO object (and thus overrides the existing one from Bart) so it only knows about the donut function.

So you need to use var FOO = FOO || {}; which means "FOO will be assigned to FOO (if it exists already) or a new blank object (if 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 and Homer are now checking for the existence of FOO before they define their methods, you can load bart.js and homer.js in any order without overriding each other's methods (if they have different names). So you will always get a FOO object which has the methods skateboard and donut (Yay!).

#2 Defining a new object

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

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

var FOO = {};

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

Answer 4

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.

Answer 5

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

Answer 6

Notice that in some version of IE this code won't work as expected. Because the var, the variable is redefined and assigned so – if I recall correctly the issue – you'll end up to have always a new object. That should fix the issue:

var AEROTWIST;
AEROTWIST = AEROTWIST || {};