What does “var FOO = FOO || {}” (assign a variable

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 idea what || {} does.

I know {} is equal to new Object() and I think the || is for something like "if it already exists use its value else use the new object.

Why would I see this at the top of a source file?

Answer 1

Another common use for || is to set a default value for an undefined function parameter 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 usually is:

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

Answer 2

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 || {};

Answer 3

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 4

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 5

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 6

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!');
};