Function in JavaScript

javascript functions

Function is a set of code, that is self-contained and referred by a name or variable. A function can be reused, thus they help to reduce code. Function comes under reference type. Variables declared inside functions are local variables. Thus they can be used only within same function, not outside function.

JavaScript functions are first-class objects. They can store value, can be changed, assigned to variables, stored in arrays and objects, can have function inside another function. typeof operator can detect datatype of functions.

Functions can be easily reused. To invoke a function, we can use events like click, hover, submit, focus, mousemove etc, or just call by function name followed by parentheses. Exp if function name is myFunction, use myFunction() to call or invoke function.

Type of Functions in Javascript

  • Function Declaration
  • Function Expression
  • Immediate Invoke Function
  • Recursive Function

<script>
    function add(){ // code inside}
            or
    var myfunction=function(){ // code inside } ;
</script>


Function Declarations

Function declaration is the most commonly used method to declare functions in javascript. A function keyword is started and followed by function name, then parentheses () and then code written inside curly brackets {}. Here is an example.

How to declare function in javascript


        function function_name(){
        
        }
        

To call or invoke a function, use function_name(). We can call a declared function after or before declaration. They are also known as named function.

Function declaration example


        sayHello()      // will work
        
    function sayhello(){
            alert("Hello there")
    }
    
        sayHello()      // will work
        
    document.querySelector("button").addEventListener("click",sayHello);
        

Function Expression

Another way to create function is function expression. In function expression, a variable is declared and then assigned a anonymous function, as it does not have a name. They are not named functions, as they are stored inside a variable.

Function Expression are only invoked after function. If we call a function expression before, an error will occur (function_name is not defined).


    good_bye()     // will not work
    var good_bye=function(){
        alert("Good Bye")
        };
    good_bye()     // will work
    
        //call using event listener
    document.querySelector("button").addEventListener("click",good_bye());
        

Call a function on button click.

To call a function on button click, use the example below. In first example, a function is created on button click. In Second example, an already build function ( myFunction) is invoked on button click. As function is used inside another function (addEventListener), no need to use parentheses.


  document.querySelector("button").addEventListener("click",function(){ 
    //action
});
    or
document.querySelector("button").addEventListener("click", myFunction);

function myFunction(){ 
    //action
};
        

Expression functions are first created and then invoked. If we call an expression function before, an error will occur. Also semicolon is required after function expression.


Parameters and Arguments

A Function can have parameters. Default parameter of a function is undefined. While declaration, they are called parameters, but when function is invoked, they are arguments.

Difference between parameters and arguments


    function mean(x,y,z){
        var sum =x+y+z;             // x, y and z are parameters
        var a=sum/3;
        return a;
        }
        
    var i=mean(1,2,9);              // 1,2,9 are arguments, value of i is 4          
    var j=mean(2,3,4);              // 2,3,4 are arguments, value of j is 3 
    
    typeof mean;                     // function
    typeof mean();                   // number
        

Immediate Invoke Function

Immediate Invoke Function or self invoking function are anonymous function who call themself.


        (function(){
            // statement inside
        }());