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

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.