Using namespace in javascript

Question

I was reading this JavaScript code.

What I don't understand, is why the author does this:

(function(namespace) {
    //more stuff here
    namespace.Game = Game;
})(window);

What is the purpose of namespace.Game = Game; instead of window.Game = Game;?

Does it make the Game function reusable?

Answer 1

Looks like author is from C++ community :P, so he used the variable name "namespace" !!!

Author of this created the IIFE (Immediately Invoked Function Expression) so he/she can create private/isolated scope, he is passing global window object as parameter for enhancing performance by reduce the scope lookup time.(Remember Javascript looks for property in local scope and way up chaining till global scope). So accessing window object at local scope reduce the lookup time. Then he/she updated the global object with property "Game".

Answer 2

Author creating the IIFE (Immediately Invoked Function Expression) and passing window object as an argument, so the current function expression has it's own isolated scope, still taking explicit control to accessing global variables

Answer 3

I will refer to Game as foo in the text below.

By doing so foo will be accessible trough the global window, like window.foo. However, the decision on where to share foo should not come from the same person that wrote foo, but rather from the person that integrates foo in his code. This is just a best practice for improved interoperability/reusability.

If you don't do this, foo won't be visible to anyone outside the IIFE.

If you assign foo to window directly, the other implementation party would have to modify your code instead of changing a single argument. It is all about what kind of knowledge do you really need inside your code. Do you really want to know about where foo will be shared, or do you just want to share it somewhere?

Also, if you simply access window from within your IIFE you are accessing a global variable. Please read here - "don't pollute global namespace".

Answer 4

To understand the point of IFEE, see What is the (function() { } )() construct in JavaScript?. Basically, it's all about avoiding global variables as much as possible.

So what about the use of the namespace parameter in this context? Well, the value of namespace is the window object, because the window object is passed to the self-executing anonymous function that encapsulates your code as the namespace parameter. So, namespace.Game = window.Game.

One reason for using a namespace parameter and not just the window object directly, is because namespace can be minified, while window cannot... which means you can save a lot of bytes if you need to reference the window object a lot.

Another reason for using a namespace variable, is because you might want your code to be compatible with other environments where the window object doesn't exist (like NodeJS) at some later time. Or, you might want your code to be rewritten as eg. a RequireJS module. Not hardcoding the window object anywhere except the anonymous function wrapped around your code makes that a lot easier.

Or maybe you just want to change the scope as some later point in time? Maybe you want to add your Game to a different object at some later point in time? This too would be a lot easier if you avoid hardcoding the window object anywhere except the anonymous function wrapped around your code.

Answer 5

This expression is called IIFE( immediately-invoked function expression ). The main usage is to create a 'scope'. Since only functions create scope in javascript. When you want to hide your values from global environment, you can use IIFE.

(function(namespace) { // begin IIFE
// These values inside can not be accessed from global.
// But we do need a way to access these values, we add all values to 'namespace',
namespace.Game = Game;
// we pass window to this IIFE, so 'namespace == 'window' inside it.
// namespace can be anyword, it is just a parameter.
// since 'window' is value exist in global, all data we appended to it can be access from global via 'window'.
// You can pass any object, or anything, it is just an argument, just like you invoke a function. e.g. if we pass 'Steam'( an object created before), then we can run 'Steam.Game'.
})(window);    // end IIFE
// later we can ,
// window.Game