Calling a javascript function within a function

Question

I have seen javascript something like this

var Gallery = function () {

    var helloworld1 = function () {
        alert('hey1');
    }

    var helloworld2 = function () {
        alert('hey2');
    }

    var helloworld3 = function () {
        alert('hey3');
    }
}();

How would I call the helloworlds within this javascript file?

I've tried

• helloworld1();
• Gallery.helloworld1();
• Gallery().helloworld1();

But they don't seem to work.

Also, are there any reasons why I should be writing my javascript in the above manner, rather than just using

function helloworld() {
    alert('hey1');
}

Answer 1

Perhaps you want

var Gallery = {

    helloworld1: function () {
        alert('hey1');
    },

    helloworld2: function () {
        alert('hey2');
    },

    helloworld3: function () {
        alert('hey3');
    }
};

Gallery.helloworld2();

or

var Gallery = function () {

    this.helloworld1 = function () {
        alert('hey1');
    }

    this.helloworld2 = function () {
        alert('hey2');
    }

    this.helloworld3 = function () {
        alert('hey3');
    }
};

new Gallery().helloworld2();

---

Also, are there any reasons why I should be writing my javascript in the above manner?

It namespaces the functions. Everything to do with galleries is in the Gallery object.

Answer 2

Symbols declared in a function are only visible within that function (and inside other functions defined within it. That goes for symbols declared with var and function equally. Thus, in your first example, you cannot access those functions from outside the outer function.

Functions can be "exported" by having the outer container function return an object, with the functions as property values.

As to whether functions should be declared with function or var, it's a matter of personal style. I (personally) like function, but I know of many seriously talented JavaScript programmers who use var initializations.

Answer 3

About your 1st Question. What actually is happening that the variable Gallery is being assigned the value that your function is returning, which is basically undefined. You are not able to do Gallery.helloworld() because .. Gallery is undefined. The helloworld1() is not working as it would look for a helloworld1 function on the global object which is not defined again. This is because you defined these functions inside the function scope.

You need to do this to achieve what you are trying to do.

var Gallery = function(){
    return {
        helloworld1:function(){alert('hey1')},
        helloworld2:function(){alert('hey2')},
        helloworld3:function(){alert('hey3')}
    }
}();

This assigns Gallery to an object that has all the three functions as its properties. In this way then you can call. Gallery.helloworld1() which would print the alert.

This is a way of protecting an object from further modifications. E.g you could do this

var Gallery = function(){
    var realGallery = {no_of_pictures:1};
    return {
        getNumberOfPictures:function(){return realGallery.no_of_pictures;},
        increasePictures:function(){realGallery.no_of_pictures += 1;},
        decreasePictures:function(){realGallery.no_of_pictures -= 1;}

    }
}();

This way no one can directly set no_of_pictures on realGallery object. They can only be incremented or decremented. About your 2nd Question. It is generally not considered a good practice to use globals as anyone can tamper with them. Lets say you defined function helloworld() {alert('hey1');} Someone could easily redefine helloworld like this. function helloworld(){alert('go away right now !!');}

So someone could easily completely break down your application with some small hack. That's why globals are considered a bad practice in javascript.

Answer 4

If you notice in the code that you cited, the parentheses after the Gallery function. Those are there to call the function immediately. So as soon as the code runs, that function is called. And that particular function is assigning the 3 hello world functions to their respective variables. But there is no access to those functions because o the reasons the first answer stated. So I'm not sure of the purpose of that code.

Answer 5

The key here is you have a self executing function, which doesn't return a value, therefore you can't access anything from within it, regardless of whether it was declared using var or this.

The goal of this coding style is to avoid polluting the global space with lots of variables and functions. Everything is encapsulated into the Gallery function. Using this style, you wouldn't try to access anything from the outside. It is like a bootstrap function where a set of procedures are executed and then it finishes, without the need to call anything inside again.

If you want to access from the outside, you need to first remove the self executing part, and secondly declare public properties or public pointers to the private properties:

var Gallery = function () {

    var helloworld1 = function () {
        alert('hey1');
    }

    var helloworld2 = function () {
        alert('hey2');
    }

    var helloworld3 = function () {
        alert('hey3');
    }

    this.helloworld1 = helloworld1;
    this.helloworld2 = helloworld2;
    this.helloworld3 = helloworld3;

};

var g = new Gallery();
g.helloworld1();

If you were to have the function return itself, then you can access the inside (providing the methods/properties are made public with this:

var Gallery = function () {

    this.helloworld1 = function () {
        alert('hey1');
    }

    return this;
}();

console.log(Gallery.helloworld2);