What’s the difference between using objects and functions for namespacing in Javascript?

Question

I saw these 2 basic ways of namespacing in JavaScript.

1. Using object:

   var Namespace = { };

   Namespace.Class1 = function() { ... };

2. Using function:

   function Namespace() { };

   Namespace.Class1 = function() { ... };

How do they differ? Thank you.

Answer 1

As others have pointed out, a function is an object so the two forms can be interchangeable. As a side note, jQuery utilizes the function-as-namespace approach in order to support invocation and namespacing (in case you're wondering who else does that sort of thing or why).

However with the function-as-namespace approach, there are reserved properties that should not be touched or are otherwise immutable:

function Namespace(){}

Namespace.name = "foo";  // does nothing, "name" is immutable
Namespace.length = 3;    // does nothing, "length" is immutable
Namespace.caller = "me"; // does nothing, "caller" is immutable

Namespace.call = "1-800-555-5555" // prob not a good idea, because...

// some user of your library tries to invoke the
// standard "call()" method available on functions...
Namespace.call(this, arg); // Boom, TypeError

These properties do not intersect with Object so the object-as-namespace approach will not have these behaviours.

Answer 2

The first one declares a simple object while the second one declares a function. In JavaScript, functions are also objects, so there is almost no difference between the two except that in the second example you can call Namespace() as a function.

Answer 3

Well, if all you're doing us using that "Namespace" thing as a way to "contain" other names, then those two approaches are pretty much exactly the same. A function instance is just an object, after all.

Now, generally one would use a function like that if the function itself were to be used as a constructor, or as a "focal point" for a library (as is the case with jQuery).

Answer 4

They don't. Functions are "first class objects". All this means is that conceptually and internally they are stored and used in the same ways. Casablanca's point of one difference you can call it as a function is a good one though. You can also test for whether or not the class was defined through a function with the typeof operator.

typeof {} 

returns "object"

typeof (function())

returns "function"