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

javascript namespaces variable-declaration or-operator
Ricardo Sanchez picture Ricardo Sanchez · Jun 22, 2011 · Viewed 18.4k times · Source

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

Alnitak picture Alnitak · Jun 22, 2011

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.

Related questions

How do I declare a namespace in JavaScript?

How do I create a namespace in JavaScript so that my objects and functions aren't overwritten by other same-named objects and functions? I've used the following: if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();} Is there a more …

Read More
How to use jQuery for XML parsing with namespaces

I'm new to jQuery and would like to parse an XML document. I'm able to parse regular XML with the default namespaces but with XML such as: <xml xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2…

Read More
createElement vs. createElementNS

What's the real difference between those two? I mean real, essential difference. What's the future holding for regular createElement? Svg is xml, not html. I get that. So we use createElementNS(ns_string, 'svg') And then setAttributeNS(null,,). Why? Why …

Read More