Namespace vs self-invoking functions

Question

I have a question: What´s the better approach to limit the scope in Javascript: Using a namespace like this:

var NAMESPACE = {};
NAMESPACE.foo = function() { 
   console.log('Hello');
}
NAMESPACE.foo();

or should I use the self-invoking function like this

(function() {
    function foo() { console.log('Hello'); }
    foo();
})();

Is it always good to have a namespace or can I omit it if I just use one big self-invoking function where I put all my stuff?

What is the logical purpose of your question? – Caspar Kleijne Sep 07 '12 at 08:18 — Caspar Kleijne, Sep 07 '12 at 08:18

score 7 · Answer 1 · edited Jun 20 '20 at 09:12

Both of your code samples have very different applications.

NAMESPACE.foo = function(){} and (function(){})() are both function expressions and (just as function declarations) delimit the inner scope and have access to vars/functions in their outer scopes.

The main difference is, with the namespace you can call the function anywhere that is in the same scope as the namespace, while the IIFE will only be executed when encountered.

There is no "best practice" without context, so I'll give some examples:

If your function expression is supposed to only execute once, an IIFE will do the job very well while a namespace will take some memory until it is garbage collected.
If your function expression will run multiple times (e.g. inside a for loop), an IIFE will cause a performance loss (and is not recommended by JSLint, or anyone in fact). It's better to have a defined function object which you call multiple times than creating a new function object for each iteration.
Ultimately, it depends on your user case. IIFEs are executed when encountered (e.g. Program/Function Body, IF Block etc.), while a namespace will store the function object and allow you to call it whenever you need, provided it is accessible in the given scope.

Reading material

Immediately-Invoked Function Expression (IIFE) - Excellent read for understanding IIFEs.
How do JavaScript closures work?
Named function expressions demystified - Covers a good paragraph about Function Expression vs Declaration. Also covers browser-specific behavior.

score 3 · Answer 2 · answered Sep 07 '12 at 08:30

What I tend to do is combine the two. I'm not sure whether this is considered best practice but it works for me :)

var app = { }; //or whatever your namespace is  

(function(){

app.memberA = {
   init: function() { },
   anotherFunction: function() { }
   // ...
};

})();

(function(){

app.memberB = {
   init: function() { }
   // So on...
};

})();

members A and B would be defined in separate js resource files - bundled and minified for production! I find this gives a nice separation of concerns when building OO JS.

score 0 · Answer 3 · answered Sep 07 '12 at 08:16

0

Using a namespace puts something into the global scope.

Wrapping everything in a function and using only locally scoped variables doesn't.

The latter is clearly better for limiting scope.

Use a namespace if you need to expose parts of your code to other code in the page (which is typical for libraries). Define all the pieces of it inside a function though, as that reduces the chance of data escaping into global and gives you a closure for shared, private data in the namespace.

answered Sep 07 '12 at 08:16

Quentin

914,110
126
1,211
1,335

"Define all the pieces of it inside a function though." Why? – Fabian Sep 07 '12 at 08:18
I cannot remove my downvote after the edit was made. Flagged the answer for moderation attention. – Fabian Sep 07 '12 at 08:31

score 0 · Answer 4 · answered Sep 07 '12 at 08:27

0

You should wrap all your code in a self-invoking function, and if you need to share some functionality with other parts of the app, assign those methods to your custom namespace. That way you only expose exactly what you need to.

answered Sep 07 '12 at 08:27

armen.shimoon

6,303
24
32

Namespace vs self-invoking functions

4 Answers4

Reading material