call vs apply vs bind - Fullstackadda

The main concept behind all this methods is Function burrowing. call vs apply vs bind

Function borrowing allows us to use the methods of one object on a different object without having to make a copy of that method and maintain it in two separate places. It is accomplished through the use of . call() , apply() , or .bind() , all of which exist to explicitly set this on the method we are borrowing

Call invokes the function immediately and allows you to pass in arguments one by one.
Apply invokes the function immediately and allows you to pass in arguments as an array.
Bind returns a new function, and you can invoke/call it anytime you want by invoking a function.

Below is an example of all this methods:

let name =  {
    firstname : "Shiva",
    lastname : "Singam",
}
printFullName =  function(hometown,company){
    console.log(this.firstname + " " + this.lastname +", " + hometown + ", " + company)
}

CALL :

The first argument example name inside call method is always a reference to (this) variable and latter will be function variable

printFullName.call(name,"Hyderabad","Solugenix");

Shiva Singam, Hyderabad, Solugenix

APPLY : call vs apply vs bind

Apply method is same as the call method the only difference is that, the function arguments are passed in Array list

printFullName.apply(name, ["Hyderbad","Solugenix"]);

Shiva Singam, Hyderabad, Solugenix

BIND :

Bind method is same as call except that ,the bind returns a function that can be used later by invoking it (does’nt call it immediately).

let printMyName = printFullName.bind(name,"Hyderabad","Solugenix");

printMyName();

Shiva Singam, Hyderabad, Solugenix

Advantages:

call, apply, and bind are three methods available in JavaScript that allow you to manipulate the this keyword and pass arguments to functions. Here are some of the advantages of using call, apply, and bind:

Method borrowing: By using call or apply, you can borrow a method from one object and use it on another object. This can be useful in situations where you need to reuse a method on multiple objects, but don’t want to define the method separately for each object.
Explicitly setting the this keyword: By using call or apply, you can explicitly set the value of the this keyword inside a function. This can be especially useful in object-oriented programming, where you want to call a method on an object and ensure that the this keyword refers to that object.
Passing arguments to functions: The call and apply methods allow you to pass arguments to a function as an array or list of values, respectively. This can be useful in situations where you need to pass a variable number of arguments to a function or where the arguments are stored in an array.
Creating new functions with a fixed this value: The bind method creates a new function with a fixed this value, which can be useful when you need to create a new function that is bound to a specific object. This can be especially helpful when you need to pass a function as a callback or event handler.
Reusing functions: By using call or apply, you can reuse a function with different arguments and this values. This can help reduce code duplication and make your code more modular and maintainable.
Compatibility with other libraries: call, apply, and bind are widely used in the JavaScript community and are supported by many libraries and frameworks. By understanding these methods, you can better understand how other libraries and frameworks work and use them more effectively.
Function composition: By using bind, you can compose functions together and create new functions that have fixed arguments and this values. This can be useful in situations where you need to create complex functions that build on existing functions.
Functional programming: call, apply, and bind are commonly used in functional programming, which is a programming paradigm that emphasizes immutability and the use of functions to perform operations. By understanding these methods, you can better understand and use functional programming concepts and techniques.
Currying: bind can be used for currying which is the process of transforming a function that takes multiple arguments into a series of functions that each take a single argument. This technique can be useful for creating reusable code and for creating functions that can be partially applied.
Debugging: call, apply, and bind can also be useful for debugging. By using console.log and call or apply, you can log the arguments passed to a function and the this value at any point in the function’s execution. This can help you identify and fix errors more easily.

call vs apply vs bind call vs apply vs bind

Call invokes the function immediately and allows you to pass in arguments one by one.
Apply invokes the function immediately and allows you to pass in arguments as an array.
Bind returns a new function, and you can invoke/call it anytime you want by invoking a function.