Function in JavaScript

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

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 check datatype of function.

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


JavaScript Function Example

Function Declaration


<script>
    function add(){ 
          // code inside
    } 
</script>

Function Expression


<script>
   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


<script>    
        sayHello()      // will work
        
    function sayhello(){
            alert("Hello there")
    }
    
        sayHello()      // will work
</script>       

<button onclick="sayHello()">Click</button>       
        

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).


<script>         
    good_bye()     // will not work
    var good_bye=function(){
        alert("Good Bye")
        };
    good_bye()     // will work
</script>  
<button onclick="good_bye()">Click</button>               
        

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.

Call a function using onclick attribute


<script> 
    function sayHi(){
    alert("Hi");
    }
<script>  
<button onclick="sayHi()">Say Hi</button>            
        

Call a function using addEventListener


<script> 
              
document.querySelector("button").addEventListener("click",function(){ 
    //action
});
<script>       
        

<script>        
document.querySelector("button").addEventListener("click", myFunction);

function myFunction(){ 
    //action
};
<script>       
        

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.


Return value

Every function returns a value. The default return value is undefined. return operator is used to get a custom value in return when function is called or invoked. This could be a string, number, function, array or object.

Function returns undefined


function sayHi(){
    var x="Hello";
}
sayHi();         // return undefined

Function returns string


function sayHi(){
    return "hello";
}
sayHi();         // return "hello"

Function returns function

Function can also returns a function. See example


function sayHi(){
    return function(){ return "hi"};
}
sayHi();           // return function
sayHi()();         // return "hi"

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
        

Function Properties

Functions are first class objects means they have properties and methods. These properties are same for function declaration and expression functions.

function.name

Return name of function. The name of function is always string.

Function Name Property


    function area1(){}
    var area2=function(){}; 
    var area3=function area4(){}; 
                                
    area1.name             // returns "area1"
    area2.name             // returns "area2"
    area3.name             // returns "area4"

function.length

Return total no of parameters used in function.

Function length Property


    function area1(x,y){ }
    function area2(x,y,z){ }
    
    area1.length         // return 2
    area2.length         // return 3

custom property

Apart from length and name, functions can have custom properties.


    function user(){ }
    
    user.brandname="Tech Altum";
    user.location="Noida";
    user.year=2012;
    
    user.name                 // return "user"
    user.brandname            // return "Tech Altum"
    user.location             // return "Noida"
    user.year                 // return 2012
    

Immediate Invoke Function

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


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