call(), apply() & bind() in JavaScript

Introduction

In this article, we will cover some of the important topics of JavaScript. Before we start, Let's understand the objective of this demonstration, which tells what exactly will be covered in this article.

• call()
• apply()
• bind()

So, Let's get started.

What is call(), apply() & bind()?

In JavaScript, call, apply, and bind are methods used to control the context (the value of this) and pass arguments to a function.

call() in JavaScript

• call() is a method available on JavaScript functions that allows you to invoke the function with a specified value for this, and individual arguments.
• Syntax: functionName.call(thisArg, arg1, arg2, ...)

Real Life Scenario

Imagine you own a fruit stand, and you have a seller named Rajesh who can sell different types of fruits.

const sellerRajesh = {
name: 'Rajesh',
sellFruit: function(fruit) {
console.log(`${this.name} is selling ${fruit}s.`);
}};

sellerRajesh.sellFruit.call(sellerRajesh,'apple');

// output: Rajesh is selling apples.

Now, another seller, Shyam, wants to borrow Rajesh selling method to sell his fruits. He can use call to achieve this

const sellerShyam = { name: 'Shyam', };
sellerRajesh.sellFruit.call(sellerShyam,'apples');

//output: Shyam is selling appless.

apply() in JavaScript

• apply() is similar to call, but it accepts the arguments as an array or an array-like object
• Syntax: functionName.apply(thisArg, [arg1, arg2, ...])

Lets take, Previous example

Now let's say there's another seller, Shantabai, who has a method similar to Rajesh, but she sells fruits in bundles.

const sellerShantabai = {
name: 'Shantabai',
sellFruit: function(fruit, quantity) {
console.log(`${this.name} is selling ${quantity} ${fruit}s.`);
}};

We can use apply to pass the preferences array to Shantabai method, and it will be treated as separate arguments.

const ShyamFruitPrefs = ['bananas', 5];
sellerShantabai.sellFruit.apply(sellerShyam, ShayamFruitPrefs);

//Output: Shyam is selling 5 bananass.

bind() in JavaScript

• bind is a method available on JavaScript functions that creates a new function with a specified value for this and optional pre-set arguments.
• Syntax: functionName.bind(thisArg, arg1, arg2, ...)

Lets take, Previous example again

Now, Shyam wants to create a custom function that always sells his fruits in bundles of 3 whenever he calls it. He can use bind to achieve this

const ShyamCustomSell = sellerShantabai.sellFruit.bind(sellerShyam,'oranges', 3);

// Later, Shyam wants to sell his oranges using the custom

ShyamCustomSell();

// Output: Shyam is selling 3 oranges.

In this scenario, call() and apply() allow one seller's method to be used by another seller with a different context and arguments. On the other hand, bind() creates a new function with pre-set arguments, which can be used multiple times, as demonstrated by Shyam's custom sell function at his fruit stand.

Summary

Overall, call(), apply(), and bind() provide powerful mechanisms to control function execution and adapt functions to different situations. They are essential tools for achieving flexibility, code reuse, and maintaining the correct context for functions in JavaScript programming.