Trying to understand JavaScript code // Namespaces

Question

I have a legacy PHP project with lots of JavaScript code that I try to understand.

Each of these JS files start with this code fragment:

var myproject = myproject || {};
registerNamespace = function(namespace) {
    var parts = namespace.split(".");
    var root = window;
    for ( var i = 0; i < parts.length; i++) {
        if (typeof root[parts[i]] == "undefined") {
            root[parts[i]] = {};
        }
        root = root[parts[i]];
    }
};

registerNamespace('myproject.main');

So we create a namespace called myproject in the first line.

The function registerNamespace splits a dot separated string into its parts and adds {part: {}} to the var "root" (which happens to be a copy (or a reference to?) the global namespace of the browser (that is: "window")).

So if a part is not in "root" already (== "undefined"), then we'll add the key/value pair {part: {}} to "root".

Now the thing that I don't understand: After the if statement we have an assignment that assigns root[parts[i]] to the variable "root" itself. Why?

In the first iteration of the loop we have parts[i] == "myproject" and root[parts[i]] == {}
So the assignment is root = {} ???

What is that last assigment good for?

Also: Is the variable root a reference to the global namespace "window"? So anything I write to "root" will write to "window"? Or is it a copy?

Can anyone enlighten me?

Jonathan Dupré · Accepted Answer · 2017-03-05 22:10:15Z

1

root is used as a reference.

First, it points to the global 'window' object. If myproject is not defined as a property of window, window.myproject is assigned to a new object.

Then root is used to point to the window.myproject. If main is not defined as a property of window.myproject, window.myproject.main assigned to a new object.

If the registerNamespace function had been called with, say, the string 'myproject.main.mynamespace', then root would have been reassigned to reference window.myproject.main, and so on.

root = window // root now points to the window object
root['main'] = {} // a new object is created, and root['main'] now points to it
root = root['main'] // root now points to root['main']

edited Mar 5, 2017 at 22:10

answered Mar 5, 2017 at 21:40

Jonathan Dupré

8381 gold badge8 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ugur Over a year ago

So registerNamespace("myproject.main")'s first iteration is root[parts[0]] == {}, that is root["myproject"] == {}, and then root is overwritten by {} ?

Jonathan Dupré Over a year ago

registerNamespace("myproject.main")'s first iteration is root[parts[0]] == {}, that is root["myproject"] == {}, and then root (which was referencing window) is then set to reference window.myproject which happens to == {}

Ugur Over a year ago

And all the while window is not overwritten by this? Why did the programmer start by root = window anyway? Why not root = {}?

Jonathan Dupré Over a year ago

Because root is scoped to the registerNamespace function. They want the namespace tree to be a global.

Collectives™ on Stack Overflow

Trying to understand JavaScript code // Namespaces

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related