Javascript functions





Javascript functions are defined using the 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 the 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.




  1. call
    A call allows us to specify this explicitly and invoke the function with the list of arguments. The calls were 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
    
  2. 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
  3. bind 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({});