What is the name/term for structuring JavaScript in this way?

Question

I've been writing JavaScript with a particular style for the last year or so in work (example below) and was wondering if someone could tell me what the style or pattern is called. I assume it has a name but it's one of those things were if you don't know what to call it it's really tough to find any help on it.

var Page =
{
    DoStuff: function ()
    {
        // stuff gets done here
    },

    Save: function ()
    {
        // save logic
    }

};

The above js can then be called like this:

Page.Save();

We've been using it as it means we can kind of namespace the functions so if every page has a Save function they can all be called the same name but never conflict.

Apologies if this has been asked before but like I said it's really hard to find the answer when I'm not really sure what keyword to be using.

Update Thanks for the speedy response everyone. I have one more question on this if anyone can help. I had tried to do a sort of function overload in the past so that I could have something like this:

var Page = 
{
    DoStuff: function ()
    {
        // do stuff
    },

    DoStuff: function (name, type)
    {
        // do stuff with the name and type params
    }
};

But the functions end up overriding each other so the last one read in replaces the other and I end up with only one function instead of being able to call both

Page.DoStuff();
Page.DoStuff('lews0r', 'newbie');

Is it even possible to overload the functions in this namespacing/module structure? Or would I just have to stick with naming the second function something different like Page.DoStuff2() (and the award for best function name ever goes to...).

As you've said, `Page` could be called a "namespace". It's just an object with some callable properties... there is no real "pattern" there. — James Allardice, Jul 25 '13 at 14:56
Do you mean, OOP (Object Oriented Programming) or Javascript Classes? — Nadh, Jul 25 '13 at 14:56
This has been explained preety good here: http://stackoverflow.com/questions/9384865/javascript-colon-for-labeling-annonymous-functions — de_nuit, Jul 25 '13 at 15:11

score 1 · Accepted Answer · answered Jul 25 '13 at 15:16

Usually, I think people refer to these as "modules". "Namespaces" may also be a fitting term - by containing all functions inside either a product name, library name, or company name, you can avoid putting too many labels in the global namespace.

Nadh suggested it as "Object oriented programming"; I think generally the difference is that in object-oriented programming, you define a class, not an object - you tell the program how it can create as many instances of Page, sometimes modified in little ways, as you like. Some Javascript libraries offer various ways of doing this. But if you're directly assigning Page as "an object with these functions", I tend to think of that more as a "module". That's approximately how languages like Python tend to work.

There may not quite be an official name for most of these practices, since my personal belief is that ECMAScript (Javascript)'s original designers had never quite anticipated the ways it would eventually be used; people just got very inventive.

What is the name/term for structuring JavaScript in this way?

1 Answers1