What does the following javascript syntax mean?

Question

I'm currently learning to develop javascript/jquery plugins and I've noticed many of them have the following syntax:

var pluginName = window.pluginName || {};

I'm having a hard time understanding what this means, specifically the OR curly braces part. If someone could shed light on what this means in the context of the code then that would be great.

Answer 1

That translates to:

var pluginName;
if (window.pluginName) {
    pluginName = window.pluginName;
} else {
    pluginName = {};
}

See for more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Answer 2

If window.pluginName is null or undefined (or something else falsy like false or 0 , but the intent is typically to check against undefined ), the variable pluginName will be set to point to an empty object.

This line relies on the OR to short circuit : if the first operand is a falsy value (false, or null or undefined ), the result of the expression will be the second operand: {} which is an empty object.

The idea is that a variable will be initialized to some (possibly empty) object.

Another instance of this short-circuit with an empty object is used in the javascript module pattern . Here's a good tutorial on the module pattern, but in particular, see the section on Loose Augmentation . Here's the example module definition from that section:

var MODULE = (function (my) {
   // add capabilities...

   return my;
}(MODULE || {}));

In that example, the code will define a new module (an object with a collection of properties/functions) in the global namespace, by calling an immediately-invoked function expression : the first time the function defining the module is executed, it will be passed an empty object, to which capabilities (properties, functions) will be added.

Answer 3

It's a way of making sure a variable is initialized to an object, usually so that object can then have data and/or methods added to it. It's often used if a framework splits the method definitions into different files, so that there's no order dependency on file loading to set up the library.

In this case, 'plugin' will either be assigned the current value of plugin, or if it's not there yet an empty object.

Answer 4

It is a much used shorthand for the code that ekuusela posted in one of the other answers:

var pluginName;
if (window.pluginName) {
    pluginName = window.pluginName;
} else {
    pluginName = {};
}

However: I want to add that this is bad practice in some use cases where it causes subtle bugs (although this particular example is fine). The reason is that the first statement before the || is falsy so all falsy statements would case the second stament to get executed which is not always what you want.

An example: Many people use this construct to test if parameters have been assigned a value and if not assign a default value. So for instance:

function repeat(text, nrOfRepeats) {
   text = text || '';
   nrOfRepeats = nrOfRepeats || 1;

   var i = 0, result = '';
   for (i = 0 ; i < nrOfRepeats; i++) {
     result += text;
   }
   return result;
}

When you'd call this function like this: repeat('hello', 0) , you'd expect to get back an empty string but you'd get back 'hello'. This is because the 0 parameter is falsy and nrOfRepeats = nrOfRepeats || 1 nrOfRepeats = nrOfRepeats || 1 would resolve to 1 instead of the 0 that you gave.

So be careful when you use this construct. Make sure that the first statement before the || can never be falsy when you don't want it to be. These values are considered falsy: 0, false, undefined, null, NaN, ''.