Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript function declaration

There are six ways/contexts in which to create functions:

1) Standard declarative notation (most familiar to people with C background)

function foo() {}

All the rest are function expressions:

2) As a method of an object literal

var obj = {
    foo: function() {}
};

3) As a method of an instantiated object (created each time new is exectued)

var Obj = function() {
    this.foo = function() {};
};

4) As a method of a prototype (created only once, regardless of how many times new is executed)

var Obj = function() {};
Obj.prototype.foo = function() {};

5) As an anonymous function with a reference (same effect as #1) *

var foo = function() {};

6) As an immediately executed anonymous function (completely anonymous)

(function() {})();

* When I look at this statement, I consider the result. As such, I don't really consider these as anonymous, because a reference is immediately created to the function and is therefore no longer anonymous. But it's all the same to most people.


The first one is simply creating an anonymous function and assigning it to a variable some_func. So using some_func() will call the function.

The second one should be part of an object notation

var obj = {
  show:function(value){
    // some code here
  }
};

So, obj.show() will call the function

In both cases, you are creating an anonymous function. But in the first case, you are simply assigning it to a variable. Whereas in the second case you are assigning it as a member of an object (possibly among many others).


First is local (or global) variable with assigned anonymous function.

var some_name = function(val) {};
some_name(42);

Second is property of some object (or function with label in front of it) with assigned anonymous function.

var obj = {
    show: function(val) {},
    // ...
};
obj.show(42);

Functions are first-class citizens in JavaScript, so you could assign them to variables and call those functions from variable.

You can even declare function with other name than variable which that function will be assigned to. It is handy when you want to define recursive methods, for example instead of this:

var obj = {
    show: function(val) {
        if (val > 0) { this.show(val-1); }
        print(val);
    }
};

you could write:

var obj = {
    show: function f(val) {
        if (val > 0) { f(val-1); }
        print(val);
    }
};

One way of doing it:

var some_func = function(value) {  
    // some code here
}

Another way:

function some_funct() {
}

Yet another way:

var some_object={};
some_object["some_func"] = function() {};

or:

var some_object={};
some_object.some_func = function() {};

In other words, they are many ways to declare a function in JS.


Your second example is not correct.


The first one is a function declaration assigned to a variable (at least it should be, despite the fact that it's missing the variable type declaration first), the second one is probably related to a object declaration.


They are called anonymous functions; you can read more about them here:

http://www.ejball.com/EdAtWork/2005/03/28/JavaScriptAnonymousFunctions.aspx


The first example creates a global variable (if a local variable of that name doesn't already exist) called some_func, and assigns a function to it, so that some_func() may be invoked.

The second example is a function declaration inside an object. it assigns a function as the value of the show property of an object:

var myObj = {
    propString: "abc",
    propFunction: function() { alert('test'); }
};

myObj.propFunction();