Javascript call, apply and bind functions are meant to control the value of this variable whenever an execution context is created.

It gives a fine control over this variable and helps for sharing common functions over objects with similar properties. 

Let's look into each of them one by one.

1: call function

The call function executes or invokes the function by controlling the value of this keyword. Eg

Program 1:

<script type="text/javascript">
		
	var greetObject = {
	  message:"welcome to my blog",	
	  /*this keyword in the greeting function
	    point to greetObject when called using greetObject
	  */
	  greeting: function(lang){
	 	   console.log("Lang is ", lang) 
           return this.message
		}
	  }
 	  console.log(greetObject.greeting())// message = welcome to my blog
	  var greet =  greetObject.greeting; 
	  console.log(greet()) // here message is undefined 
	  console.log(greet.call({message:"hello"})) // this value set with first parameter
	  console.log(greet.call({message:"hello"},'en')) // parameter en passed for language
          
</script>

 

In the above program #15  the value of the message is undefined because this keyword here points to the window object.

#16 and #17 change the value of this using the special call function by passing an inline object as the first argument.

The syntax for call:

function.call(thisArg, arg1, arg2, ...)

 

2: apply function:

The apply function is similar to call the function with the only difference of how the parameter is passed to it. The apply function accepts parameter as an array.

#17  from program 1 can be written using apply as mentioned below:

 console.log(greet.call({message:"hello"},['en'])) // parameter en passed for language as an array

 

The syntax for apply: 

function.apply(thisArg, [argsArray])

 

3: bind function:

The bind function instead of invoking a function it creates a new copy of the whatever function you are calling it on. E.g.

Program 2:

<script type="text/javascript">
		
	var greetObject = {
	  message:"welcome to my blog",	
	  /*this keyword in the greeting function
	    point to greetObject when called using greetObject
	  */
	  greeting: function(lang){
	 	   console.log("Lang is ", lang) 
           return this.message
		}
	  }
 	  console.log(greetObject.greeting())// message = welcome to my blog
	  var greet =  greetObject.greeting.bind({message:"example for bind"});
      console.log(greet()); //invoked without setting lang
      console.log(greet("en")); // invoked by setting lang to en  
</script>

 

#14 creates a new copy of greeting function and sets this as an inline object passed an argument to the bind function.

Let's see a very useful example of bind function called as function currying.

<script>

var calculateTax = function calculateTax(taxRate,amount){
	var result = amount + (taxRate * amount);
    return  result
}
var tax = calculateTax.bind(this,2)
console.log(tax(100))

</script>

 

#7 of the above program bind the current value of this as the first argument to the calculateTax function and set's the value of taxRate equal to 2 . It creates a new copy of the function calculateTax by setting a fixed value of taxRate and assigning it to tax variable.

#8 finally invokes the function by passing the value of amount as the second argument and it logs 300 as the result.

The syntax for bind:

function.bind(thisArg[, arg1[, arg2[, ...]]])

 

This way we can set a fixed value for certain parameters and leave rest for some dynamic behavior at invocation time.