JavaScript Functions

Here I explain different types of function creation methods in JavaScript

Create a basic function 

view plaincopy to clipboardprint?

1. function myFunction() {  
2.    alert("myFunction called");  
3. }  
4.   
5. myFunction(); //call function  

function myFunction() {
   alert("myFunction called");
}

myFunction(); //call function

Call a function when window load

view plaincopy to clipboardprint?

1. function init() {  
2.    alert("init called");  
3. }  
4.   
5. window.onload = init;  

function init() {
   alert("init called");
}

window.onload = init;

Call anonymous function when window load

view plaincopy to clipboardprint?

1. window.onload = function () {  
2.    alert("anonymous function called");  
3. };   

window.onload = function () {
   alert("anonymous function called");
}; 

Call a function with setTimeout

view plaincopy to clipboardprint?

1. function tOut() {  
2.    alert("tOut function called after 1000 milliseconds")  
3. }  
4.   
5. setTimeout(tOut, 1000);   

function tOut() {
   alert("tOut function called after 1000 milliseconds")
}

setTimeout(tOut, 1000); 

Call anonymous function with setTimeout

view plaincopy to clipboardprint?

1. setTimeout(function(){ alert("anonymous function called after 1000 milliseconds"); },1000);  

setTimeout(function(){ alert("anonymous function called after 1000 milliseconds"); },1000);

Create an inner function

view plaincopy to clipboardprint?

1. function outer() {  
2.   
3.    alert("outer - before");  
4.   
5.    function inner() {  
6.       alert("inner");  
7.    }  
8.   
9.    inner(); // can call inner  here  
10.    alert("outer - after");  
11.   
12. }  
13.   
14. outer();  
15. //inner(); // cannnot call inner here   

function outer() {

   alert("outer - before");

   function inner() {
      alert("inner");
   }

   inner(); // can call inner  here
   alert("outer - after");

}

outer();
//inner(); // cannnot call inner here 

view plaincopy to clipboardprint?

1. var inn;  
2.   
3. function outer() {  
4.    alert("outer - before");  
5.   
6.    function inner() {  
7.       alert("inner");  
8.   
9.    }  
10.   
11.    inn = inner;  
12.    alert("outer - after");  
13.   
14.   
15. }  
16. outer();  
17. inn(); // call inner here  

var inn;

function outer() {
   alert("outer - before");

   function inner() {
      alert("inner");

   }

   inn = inner;
   alert("outer - after");


}
outer();
inn(); // call inner here

view plaincopy to clipboardprint?

1. var f = function () {  
2.    alert("f")  
3. };  
4.   
5. f(); //call  

var f = function () {
   alert("f")
};

f(); //call

view plaincopy to clipboardprint?

1. var f = function myFunction() {  
2.    alert("myFunction")  
3. };  
4.   
5. f();  

var f = function myFunction() {
   alert("myFunction")
};

f();

view plaincopy to clipboardprint?

1. var ob = {};  
2. ob.func = function(){  alert("func") };  
3. ob.func(); //call  

var ob = {};
ob.func = function(){  alert("func") };
ob.func(); //call

view plaincopy to clipboardprint?

1. var ob = {  
2.     f1 : function(){ alert("f1"); },  
3.     f2 : function(){ alert("f2"); }  
4. }   
5.   
6. ob.f1(); // call  

var ob = {
    f1 : function(){ alert("f1"); },
    f2 : function(){ alert("f2"); }
} 

ob.f1(); // call

view plaincopy to clipboardprint?

1. var ob = {  
2.     f1 : function myFunction(){ alert("myFunction called"); }   
3. }  
4. ob.f1(); // call  

var ob = {
    f1 : function myFunction(){ alert("myFunction called"); } 
}
ob.f1(); // call

Call function using apply and call(not work on IE)

view plaincopy to clipboardprint?

1. function myFunc(){  
2.       
3.     for(var x in arguments){  
4.         alert(arguments[x]);  
5.     }  
6.   
7. }  
8.   
9. var o1 = {};  
10. var o2 = {};  
11.   
12. myFunc.apply(o1,[1,2,3]);  
13. myFunc.call(o2,1,2,3);   

function myFunc(){
    
    for(var x in arguments){
        alert(arguments[x]);
    }

}

var o1 = {};
var o2 = {};

myFunc.apply(o1,[1,2,3]);
myFunc.call(o2,1,2,3); 

Reference:  Secrets of the JavaScript Ninja