Function

Function is a set of code, that is defined once and can be used n number of times. A function can be reused, thus they can avoid repetition of code. Function are reference datatype in javascript. Function includes multiple statements to perform task. A function can take input and then return output. Functions are one of the major building blocks in JavaScript.

Functions are callable entities. To call a function, we use parenthesis after function name, i.e sayHi(). All methods are build-in functions, that's why they must be called using parenthesis.

Function can be both User Defined and Pre-defined ( like alert, print, close, open etc ) are pre-defined functions in javascript.

javascript functions
JavaScript Functions

JavaScript functions are first-class objects. Means they are very powerful in javascript as compared to other programming languages. They are even more powerful than objects.

Why JavaScript Functions are first class objects?

  1. Functions can be assigned to variables.
  2. Functions can have properties and methods.
  3. Functions can return functions (High order function).
  4. Functions can have callbacks (High order 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.


JavaScript Function Declaration

Function Declaration


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

Function Expression


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

Call a Function

To call a function in javascript, use function name followed by parenthesis.


<script>
    function sayHi(){ 
        console.log('hello');               
    };

sayHi();

</script>

<script>
    var sayBye=function(){ 
    console.log('bye bye');               
};

sayBye();

</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 functionName(){
        // statements
    }

Call a function

To call or invoke a function, use function name followed by Parenthesis, i.e. ( ). For example, if function name is sayHi, use sayHi(). 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>         
    goodBye()     // will not work, syntax error
    var goodBye=function(){
        alert("Good Bye")
    };
    goodBye()     // will work
</script>  
<button onclick="goodBye()">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 built-in 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>            
        

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.


Arrow Functions

Arrow functions are actually short form of function expression. To call arrow functions, we have to declare function first and then call.

Arrow functions were introduced in ES6. Its recommended to use arrow function as a callback function.


    const myFunc1=(x,y)=>x+y;       // 2 parameters
    
    const myFunc2=(x)=>x*2;        // 1 parameter
    
    const myFunc3=x=>x*3;               // 1 parameter
    
    const myFunc4=x=>{return x*4};        // 1 parameter

Arrow function vs normal function

  1. no this keyword
  2. don't have argument object
  3. cannot create constructors

Best usage of arrow function

  1. callback function
  2. expression function where this is not required

this in function

this keyword in function refers to the current object. In a function, this keywords value depends upon how the function is called. For any function, this keyword is window object, but in strict mode, this keyword is undefined. For Events, this keyword is element on which event is triggered.

this in function

Window {parent: Window, opener: null, top: Window, length: 6, frames: Window, …}


    function sayHi(){ 
        console.log(this);        
    }
    sayHi()

this in strict mode

undefined

"use strict";
    function sayHi(){ 
        console.log(this);        
    }
    sayHi()

this in events

<body>...</body>


document.body.addEventListener("click",function(){ 
    console.log(this);      // this is body    
});

Where not to use this?

In expression function, this keyword refers to current object. But in arrow function, it is window object. For such cases, avoid using arrow functions for events.

Window {parent: Window, opener: null, top: Window, length: 6, frames: Window, …}


document.body.addEventListener("click",()=>{console.log(this)});

<body>...</body>


document.body.addEventListener("click",function(){console.log(this)});


Return value

Each function returns a value. The default return value is undefined for all function without return. 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 number


function getNumber(){
    return 2+3;
}
getNumber();         // return 5

Function returns function

Function can also returns a function. Both Functions that returns a function and callback ( function with argument function) are high order functions. See example


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

typeof function and return value

typeof function is "function" , but typeof function() is datatype of return value.


typeof mean;                     // datatype of function
typeof mean();                   // datatype of return value
       

Use return keyword in function only once and at the end. Actually return in function block the code after return keyword.


Parameters and Arguments

A Function can have parameters. While declaration, they are called parameters, but when function is invoked, they are arguments.

Parameters are used to provide dynamic values to function on runtime to get different output. Parameters could be of any datatype like string, number etc. The default parameter of function is undefined.

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, and i is 4          
var j=mean(2,3,4);           // 2,3,4 are arguments, and i is 3 
     

Function parameter and argument examples

Area of rectangle


    function getArea(x,y){
        return x*y;
    }
    getArea(2,3);                // return 6

Perimeter of rectangle


    function getPerimeter(x,y){
        return  2*(x+y);
    }
    getArea(2,3);                // return 10

Area of circle


    function getArea(r){
        return  3.14*r*r;
    }
    getArea(2);                // return 12.56

Default Parameter

The default parameter of any function is undefined. Using a function without argument will return invalid result like NaN as default parameters are undefined.


    function getArea(l,w){
        return  l*w;
    }
    getArea();     // return NaN

How to handle default parameters

To handle default parameters in javascript, we can use or operator ( || ) in function statement.


    function getArea(l,w){ 
        l=l || 0;
        w=w || 0;       
        return  l*w;
    }
    
    getArea();       // return 0

Handle default parameters in ES6

In JavaScript ES6, we can use assignment operator (=) in parameters to handle default parameters. This will pick assign value if argument is not defined.


    function getArea(l=0,w=0){      
        return  l*w;
    }
    
    getArea();       // return 0
    getArea(2,3);    // return 6

Function Properties

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

function.name

function.name is a readonly property which returns name of the 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

function.length is also a readonly property that returns total no of parameters used inside function.

Function length Property


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

name and length are readonly properties of function. We can only read values, but we cannot change.

custom property

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


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

Its better to use JavaScript Objects to declare properties and methods instead of functions. See example


var user={
            "name":"abc",
            "year":2012,
            "location":"Noida"
        }

Immediate Invoke Function

Immediate Invoke Function or self invoking function are anonymous function who call themself. They are not assigned and named. That's why they are anonymous. But they call themself on page load. They are mainly used to keep variables local.

Immediate Invoke Function Example


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

Immediate Invoke Function with parameters


    (function(x){
        console.log("Hello", x );
    }("user"));
        

It is recommended to use block scope {} with let instead of IIFE in ES6.


Frontend Video Tutorial