call(), bind(), and apply() Methods

1. call() Method

Syntax: functionName.call(thisContext, arg1, arg2, ...)

Purpose: Calls a function immediately with a specific this context and individual arguments.

// Example 1: Basic call() usage
                const person1 = {
                name: "Alice",
                age: 25
                };

                const person2 = {
                name: "Bob",
                age: 30
                };

                function introduce(greeting, profession) {
                return `${greeting}! I'm ${this.name}, ${this.age} years old, and I'm a ${profession}.`;
                }

                // Using call() to set 'this' context
                console.log(introduce.call(person1, "Hello", "Developer"));
                // Output: "Hello! I'm Alice, 25 years old, and I'm a Developer."

                console.log(introduce.call(person2, "Hi", "Designer"));
                // Output: "Hi! I'm Bob, 30 years old, and I'm a Designer."

Key Points:

Executes the function immediately
First parameter sets the this context
Remaining parameters are passed as individual arguments

2. apply() Method

Syntax: functionName.apply(thisContext, [arg1, arg2, ...])

Purpose: Similar to call(), but takes arguments as an array.

// Example 2: apply() with array of arguments
                function calculateSum(a, b, c) {
                console.log(`${this.name} is calculating: ${a} + ${b} + ${c} = ${a + b + c}`);
                return a + b + c;
                }

                const calculator = {
                name: "SuperCalculator"
                };

                const numbers = [10, 20, 30];

                // Using apply() with array of arguments
                calculateSum.apply(calculator, numbers);
                // Output: "SuperCalculator is calculating: 10 + 20 + 30 = 60"

                // Practical use case: Finding max value in array
                const nums = [5, 2, 9, 1, 7];
                const maxValue = Math.max.apply(null, nums);
                console.log("Max value:", maxValue); // Output: 9

Key Points:

Executes the function immediately
First parameter sets the this context
Second parameter must be an array of arguments
Useful when you have arguments in array form

3. bind() Method

Syntax: functionName.bind(thisContext, arg1, arg2, ...)

Purpose: Creates a new function with a permanently bound this context.

// Example 3: bind() creates new function
                const user = {
                name: "John",
                greet: function(message) {
                return `${message}, I'm ${this.name}!`;
                }
                };

                // Problem: losing 'this' context
                const greetFunction = user.greet;
                // console.log(greetFunction("Hello")); // Error: this.name is undefined

                // Solution: using bind()
                const boundGreet = user.greet.bind(user);
                console.log(boundGreet("Hello")); // Output: "Hello, I'm John!"

                // bind() with preset arguments (partial application)
                function multiply(a, b, c) {
                return `${this.name}: ${a} × ${b} × ${c} = ${a * b * c}`;
                }

                const mathTeacher = { name: "Ms. Smith" };
                const multiplyByTwo = multiply.bind(mathTeacher, 2);

                console.log(multiplyByTwo(3, 4)); // Output: "Ms. Smith: 2 × 3 × 4 = 24"

Key Points:

Returns a new function (doesn't execute immediately)
Permanently binds the this context
Can preset some arguments (partial application)
Useful for event handlers and callbacks

Key Differences Summary

Method	Execution	Arguments	Use Case
call()	Immediate	Individual arguments	When you know arguments beforehand
apply()	Immediate	Array of arguments	When arguments are in array form
bind()	Returns new function	Individual arguments	Event handlers, callbacks, partial application

JavaScript call(), bind(), and apply() Methods

1. call() Method

2. apply() Method

3. bind() Method

Interactive Demo

Key Differences Summary