Javascript functions

Javascript functions are defined using function keyword. All the functions in javascript are objects or reference types, that can be assigned to a variable or passed as a parameter function.

Function Declaration

Functions can be declared in different ways

  1. Declaration way
    function keyword followed by the function name

    function greeting(name) {
       return 'Hello '+name;
    }
    greeting('Messi');
    Output: 'Hello Messi'
  2. Expression way
    In the expression way function doesn’t have a name and we assign the function to a variable. Functions that are declared without any name are called anonymous functions.

    var greeting = function (name) {
       return 'Hello '+name;
    }
    greeting('Messi');
    Output: 'Hello Messi'
  3. Function constructor
    Javascript provides a built-in function constructor called Function() through which a function can be defined.
var greeting  = new Function ("name", "return 'Hello ' + name ");
greeting('Messi');

Function Hoisting

In javascript, hoisting is a mechanism in which javascript engine will push the function declarations on to the top.  Therefore we can invoke a function even before we declare and it works without any error.

Note: Function hoisting works only for declaration way and in expression way js throws an error.

Hoisting declaration way

Hoisting expression way

Function as parameter

A function can be passed as a parameter to another function. In below syntax, we are passing an anonymous function as a parameter to Array sort function.

var bills = [40,50,10,60,70,30,50];

bills.sort(function(number1, number2){
return number1 - number2;
});
Output: [10, 30, 40, 50, 50, 60, 70]

Function invocation 

Function invoke is nothing but calling a function.

  1. Invoking function as a function
    function greeting(name) {
    return 'Hello '+name;
    }
    greeting('Messi');
  2. Invoking function as a method.
    var student = {
    name : 'vijay',
    location: 'Hyderabad',
    getDetails: function () { return this.name + this.location }
    };
    student.getDetails();
    output: "vijayHyderabad"

    In the above syntax, this refers to the current object.

  3. Immediately invoked functions
    Immediately invoked function expression (IIFE) also known as self invoking anonymous functions. Generally, functions need explicit invoke or call but Immediately invoked function expression (IIFE) functions are executed right after defining the function.

    (function() {
      console.log('Hello world');
    })();
    output: 'Hello world';

    These functions have their own scope and prevent global namespace pollution.

  4. call
    call allows us to specify this explicitly and invoke the function with the list of arguments. call was introduced in ECMAScript 3.

    
    function add(c){
    return console.log(this.a+this.b+c);
    }
    var obj = {
    a : 1,
    b : 2
    }
    add.call(obj,3);
    Output: 6
    
  5. apply
    apply method allows us to specify this explicitly and invoke the function with a single array of arguments. apply method was introduced in ECMAScript 3.

    var arr = [1,2,3,5,67,8];
    var max = Math.max.apply(null,arr);
    console.log(max);
    Output: 67
  6. bindbind came in ECMAScript 5. Bind method allows us to call a function with this set explicit. bind method returns a bounded function with the bound object.
this.x = 10;
var moduleX = {
	x : 20,
	getX: function() { return this.x; }
}
var retriveX = moduleX.getX;
retriveX();
var getBoundX = retriveX.bind(moduleX);
getBoundX();
Output: 20

(adsbygoogle = window.adsbygoogle || []).push({});

Leave a Reply

Your email address will not be published. Required fields are marked *