What is this design called?

Question

I often see this pattern:

var suchAndSuch = new (function() {
    this.thing = "something";
    this.whoaLookAtThat = function() {
        return 4;
    }
    return {
        'thing' : thing,
        'whoaLookAtThat' : whoaLookAtThat
    }
})();

What is going on here? It's the return statement part that confuses the hell out of me.

I just don't get this particular use of an IIFE.

If nothing else, knowing what it's called would help me research it.

that code is missing "new ". with new, it's a module whose public methods can refer to private variables defined in the IIFE. — dandavis, Jan 22 '14 at 03:26
no, without "new " in there all it does is define a bunch of globals. with new, it's a standalone module... of course, it's not coded correctly to use new because there is neither "var " for the properties, or "this." for the return binding. — dandavis, Jan 22 '14 at 03:28
This is bad practice, as it binds thing/whoaLookAtThat to global window, http://jsfiddle.net/rooseve/FH9sH/. var thing/whoaLookAtThat will work. — Andrew, Jan 22 '14 at 03:28
@dandavis you're totally right, just learned something. Thanks. — temporary_user_name, Jan 22 '14 at 03:30
@Andrew I added in the missing 'new', so that is no longer true. — temporary_user_name, Jan 22 '14 at 03:30
if you add new, change the ruturn, eg: "thing," becomes "this.thing,"... — dandavis, Jan 22 '14 at 03:31
But seriously, wtf with the downvotes? How is this not a good question? — temporary_user_name, Jan 22 '14 at 03:31
@Aerovistae you don't need new. You just don't need `this.`. You just use private variables, i.e. `var`. — Jeff Shaver, Jan 22 '14 at 03:32
re: downvote: don't bother asking, nobody fesses up to being a jerk. you can prove it wasn't me... — dandavis, Jan 22 '14 at 03:32
@Aerovistae can't tell if that is sarcastic xD. It gets simpler. Basically, new is used with constructor functions, which this really isn't an example of. This is an example of a modular pattern which kind of allows JS to have private/public variables. My answer attempts to explain more — Jeff Shaver, Jan 22 '14 at 03:35
@dandavis: No, it's not missing `new` - [that pattern must be avoided!](http://stackoverflow.com/a/10406585/1048572) Better critisize the use of `this`. — Bergi, Jan 22 '14 at 03:45

score 5 · Accepted Answer · answered Jan 22 '14 at 03:34

This is a combination of an immediately executing function and a (bit of a messed up) closure. I think your example maybe a bit flawed it may be better if it was:

var suchAndSuch = (function() {
    var thing = "something";
    function setThing(newThing){
        //maybe do some error checking here
        thing = newThing;
    };
    function getThing(){
        return thing;
    };

    return {
        getThing : getThing,
        setThing : setThing
    }
})();

Then you would have a function that executes immediately returning a new object that effectively gives a private variable and an accessor function. I have used constructs like these many times.

score 1 · Answer 2 · answered Jan 22 '14 at 03:30

1

This is kind of an attempt to have public/private variables in JavaScript... I believe it is referred to as the modular pattern.

var suchAndSuch = (function() {
    var privateVariable = "something";
    var privateFunction = function() {
        return 4;
    }
    return {
        publicMethod1: function() {
            return privateVariable;
        },
        publicMethod2: function() {
            return privateFunction();
        }
    }
})();

Basically any variables declared inside the IIFE will be private. Then you return an object with methods. Since the object/methods were defined in the same scope as the private variables, the methods still have access to them. However, nothing else will.

answered Jan 22 '14 at 03:30

Jeff Shaver

3,315
18
19

So the thing that's still nagging at me is that your public methods are written as identifiers while mine are written as string literals. So if the public and private methods have the same name, is using strings necessary....or....what's even the difference? – temporary_user_name Jan 22 '14 at 03:34
When it comes to objects, if the property name doesn't have a space or special character, it doesn't need to be a string literal. It can be either. But either way they are accessed and used in the same way (for the most part). i.e. i could have done `'publicMethod2'` but it works the same either way. It would be, however, required to be a string literal if I wanted a property name like `public method 1`. There are spaces so it has to be a string literal. Then you would have to access it like `suchAndSuch['public method 1'];` – Jeff Shaver Jan 22 '14 at 03:38
This is called "*revealing module pattern*" - using an [IEFE](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that returns an object – Bergi Jan 22 '14 at 03:48

score 1 · Answer 3 · answered Jan 22 '14 at 03:34

It's called a self-invoking lambda. JS has function scope, so in order to politely conserve global namespace, you have to use a function. In order to make it execute immediately as if it was top level code that has block scope, you wrap it in (bla)() - hence self-invoking. When it actually returns an object with some subset of its scope as properties, it's usually assigned to a variable, and called module pattern.

The practice of returning a different object than the one created by new is what I see sometimes as a way of protecting code that forgets new and just calls the constructor. In that context, though, it doesn't make any sense to assign properties to this, since this is the window object. Otherwise, if you do use new, this is GCed immediately, so it still makes no sense.

What is this design called?

3 Answers3