This parameter is set to the function in all three instances of the call, bind, and apply methods.

  • The call and use techniques Call the function after setting this to it.
  • Only a function will be set as this using the bind method. The function will need to be called separately.


The function is called via the method call, which also allows you to supply arguments one at a time using commas.

let customer1 = { name: 'Leo', email: '' };
let customer2 = { name: 'Nat', email: '' };

function greeting(text) {
    console.log(`${text} ${}`);
}, 'Hello'); // Hello Leo, 'Hello'); // Hello Nat


The method apply invokes the function and allows you to pass in arguments as an array.

let customer1 = { name: 'Leo', email: '' };
let customer2 = { name: 'Nat', email: '' };
function greeting(text, text2) {
   console.log(`${text} ${}, ${text2}`);
greeting.apply(customer1, ['Hello', 'How are you?']); // output Hello Leo, How are you?
greeting.apply(customer2, ['Hello', 'How are you?']); // output Hello Natm How are you?


With any number of parameters and this array as input, the Bind method creates a new function for you. Use it if you want a later call to that function to include a specific context, such as events.

let customer1 = { name: 'Leo', email: '' };
let customer2 = { name: 'Nat', email: '' };
function greeting(text) {
   console.log(`${text} ${}`);
let helloLeo = greeting.bind(customer1);
let helloNat = greeting.bind(customer2);
helloLeo('Hello'); // Hello Leo
helloNat('Hello'); // Hello Nat

This is how the Bind implementation might look:

Function.prototype.bind = function(context) {
    var fn = this;
    return function() {
        fn.apply(context, arguments);

Both Call and Apply are acceptable. You get to choose whether sending in an array or a comma-separated list of arguments is simpler. Bind is unique. There is always a new function returned.

Like in the example, we can use Bind to curry functions. We can modify a straightforward hello function to create a helloJon or helloKelly. You can employ it in situations where the context is known but the firing time is unknown.


call: executes the function, binds the this value, and lets you give a list of arguments.

Apply binds the this value, calls the function, and accepts an array of arguments.

This value is bound by the bind function, which also accepts a list of parameters and returns a new function.

Recommended Posts

View All

Useful websites every developer should know

There are numerous websites available nowadays to assist in the creation of a distinctive website.

What is memoization?

Memoization is a programming technique that improves efficiency by caching results of expensive function calls. Learn more about it here.

10 JavaScript Tricks Every Developer Should Know

I'll show you several JavaScript tricks for optimizing your JavaScript code. Use these JavaScript tricks to optimize your JavaScript code.

JavaScript Template Literals Explained

JavaScript template literals are one of JavaScript's most powerful capabilities. They enable us to generate dynamic strings without the need for conca...

Essential Bootstrap 4 Components for Web App

Bootstrap 4 offers a selection of reusable and customizable Bootstrap 4 components that speed up and simplify development.