Grokking Call(), Apply() and Bind() Methods in JavaScript

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

These functions are very important for every JavaScript Developer and are used in almost every JavaScript Library or Framework. Check out the code snippet below.

Taken from the very popular library Lodash

/**
    * Creates a function that invokes `func` with arguments reversed.
    *
    * @since 4.0.0
    * @category Function
    * @param {Function} func The function to flip arguments for.
    * @returns {Function} Returns the new flipped function.
    * @see reverse
    * @example
    *
    * const flipped = flip((...args) => args)
    *
    * flipped('a', 'b', 'c', 'd')
    * // => ['d', 'c', 'b', 'a']
    */
    function flip(func) {
      if (typeof func !== 'function') {
        throw new TypeError('Expected a function')
      }
      return function(...args) {
        return func.apply(this, args.reverse())
      }
    }

    export default flip

Look at the statement on line 21, return func.apply(this, args.reverse())

In this article, we will have a look at the call()apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function. The call() and apply() were introduced in ECMAScript 3 while bind() was added as a part of ECMAScript 5.

Let us start with an example to understand these.

Suppose you are a student of X university and your professor has asked you to create a math library, for an assignment, which calculates the area of a circle.

const calcArea = {
      pi: 3.14,
      area: function(r) {
        return this.pi * r * r;
      }
    }

calcArea.area(4); // prints 50.24

```

You test this and verify its result, it is working fine and you upload the library to portal way before the deadline ends. Then you ask your classmates to test and verify as well, you come to know that that your result and their results mismatches the decimals precision. You check the assignment guidelines, Oh no! The professor asked you to use a constant pi with 5 decimals precision. But you used 3.14 and not 3.14159 as the value of pi. Now you cannot re-upload the library as the deadline date was already over. In this situation, call() function will save you.

js javascript-development javascript javascript-interview javascript-tips

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Hire Top Node JS Developers | Best Node.js Development Company India

Hire dedicated Node JS developers & programmers in India for custom full-stack NodeJS web development projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts

Hire Dedicated Node.js Developers - Hire Node.js Developers

Get business-centric Node.Js development services from expert Node.JS developers. We have expertise in developing & maintaining Node JS apps as per the business requirements.

Top React JS Development Company | React JS Development Services

As a leading React.js development company, our development team has created reusable React.js components, large-scale websites, and interactive user interfaces for global clients. 4200+ Projects | 16+ Yrs Exp

Hire Dedicated Emberjs Developers | Expert Emberjs JavaScript Developers

With WebClues experts leverage the best and latest HTML5 tools and frameworks like Ember.js. Hire dedicated Ember.js developers on flexible hiring model.