Javascript Function Type

• « Previous
• Next »

Javascript functions are instances of the Function type with properties and methods.

Function names are pointers to function objects.

function expression.

Functions are typically defined using function-declaration syntax as follows:

function sum (num1, num2) {
   return num1 + num2;
}

We may also define it using a function expression.

var sum = function(num1, num2){
   return num1 + num2;
};

There is a semicolon after the end of the function.

function name

It's possible to have multiple names for a single function.

function sum(num1, num2){/*  w w  w .ja  v  a  2 s.com*/
   return num1 + num2;
}
console.log(sum(10,10));    //20

var anotherSum = sum;
console.log(anotherSum(10,10));  //20

sum = null;
console.log(anotherSum(10,10));  //20

The code above generates the following result.

No Overloading

There is no overloading in Javascript function as shows in the following code.

function addSomeNumber(num){
   return num + 100;
}
function addSomeNumber(num) {
   return num + 200;
}
var result = addSomeNumber(100);    //300

In this example, declaring two functions with the same name results in the last function overwriting the previous one.

Its equivalent form is:

var addSomeNumber = function (num){
   return num + 100;
};

addSomeNumber = function (num) {
   return num + 200;
};
var result = addSomeNumber(100);    //300

Function Declarations vs Expressions

Function declarations are read and available in an execution context before any code is executed.

Function expressions aren't complete until the execution reaches that line of code.

console.log(sum(10,10));
function sum(num1, num2){
   return num1 + num2;
}

The code above has no error, because function declarations are read and added to the execution context first.

Changing the function declaration to an equivalent function expression will cause an error, since the function is part of an initialization statement, not part of a function declaration.

console.log(sum(10,10));
var sum = function(num1, num2){
   return num1 + num2;
};

Example 2

We can assign the correct function expression to the variable myFunction based on condition.

/*from   w w  w. jav  a  2 s .  c  o  m*/
    //this is okay
    var myFunction;
    var condition = true;
    if(condition){
        myFunction = function(){
            console.log("Hi!");
        };
    } else {
        myFunction = function(){
            console.log("Yo!");
        };
    }
    console.log(myFunction.toString());

The code above generates the following result.

Functions as argument

function names in Javascript are variables, so functions can be used as value.

We can pass a function as an argument.

function callSomeFunction(someFunction, someArgument){
   return someFunction(someArgument);/* w  ww .  j  a  v a 2 s.  c om*/
}
function add10(num){
   return num + 10;
}

var result1 = callSomeFunction(add10, 10);
console.log(result1);   //20

function addString(name){
   return "Hello, " + name;
}

var result2 = callSomeFunction(addString, "XML");
console.log(result2);   

This function accepts two arguments. The first argument should be a function, and the second argument should be a value to pass to that function.

The code above generates the following result.

Functions as return values

function names in Javascript are variables, so functions can be used as value.

We can return a function as a value.

function compareField(propertyName) {/*from  w  w  w  .j a v  a2 s.  c o  m*/
    return function(object1, object2){
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if (value1 < value2){
            return -1;
        } else if (value1 > value2){
            return 1;
        } else {
            return 0;
        }
    };
}
var data = [{name: "Java", age: 28},
            {name: "XML", age: 29}];

data.sort(compareField("name"));
console.log(data[0].name);
console.log(data[1].name);

data.sort(compareField("age"));
console.log(data[0].name);
console.log(data[1].name);

The code above generates the following result.

• Next »
• « Previous