JavaScript Functions

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 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 (Function Expression).
2. Functions can have properties and methods (like objects).
3. Functions can return functions (High order function).
4. Functions can have parameter function, 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.

How to define function?

<script>
    function add(){ 
          // statements
    } 
</script>

<script>
   const add=function(){ 
        // statements
   };
</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>
    const 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.

    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.

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

Arrow Functions

Arrow functions are actually short form of function expression. They are called arrow as they use arrow symbol, i.e. => 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
    

Know more about Arrow Functions

this keyword

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

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

this in strict mode

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

this in events

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.

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

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(){
    const 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
       

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.

function mean(x,y,z){
    const sum =x+y+z;             // x, y and z are parameters
    const 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

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

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

    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 area1(){}
    const area2=function(){}; 
    const 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 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 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

const user={
    "name":"Tech Altum",
    "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"));
        

Frontend Video Tutorial