What is the diffence between Javascript call() & apply() vs bind()?

1. The call() method in JavaScript:

The call() method is a valuable tool in JavaScript for invoking functions with a specified context. It allows a function to be called with a different this context. The first argument specifies the this value to be used when the function is executed, and subsequent arguments are passed directly as the function's parameters.

Example:

javascript
function showDetails(age, nationality) {
    console.log(`Name: ${this.name}, Age: ${age}, Nationality: ${nationality}`);
}

const person = {
    name: "John"
};

showDetails.call(person, 25, "American");
// Output: Name: John, Age: 25, Nationality: American

2. The apply() method in JavaScript:

The apply() method is similar to call(), but instead of passing individual arguments, it accepts an array (or array-like object) as the second argument, where the elements are used as the function's parameters.

Example:

javascript
function showDetails(age, nationality) {
    console.log(`Name: ${this.name}, Age: ${age}, Nationality: ${nationality}`);
}

const person = {
    name: "Emma"
};

showDetails.apply(person, [28, "Canadian"]);  // Output: Name: Emma, Age: 28, Nationality: Canadian

3. The bind() method in JavaScript:

The bind() method creates a new function where the this context is bound to the specified value at the time of binding. The first argument specifies the this value for the new function, and subsequent arguments are used as the function's parameters when it is called.

Example:

javascript
function showDetails(age, nationality) {
    console.log(`Name: ${this.name}, Age: ${age}, Nationality: ${nationality}`);
}

const person = {
    name: "Alice"
};

const boundShowDetails = showDetails.bind(person);
boundShowDetails(30, "British");  // Output: Name: Alice, Age: 30, Nationality: British

Summary:

• call() and apply() are immediately invoked functions, while bind() returns a new function to be called later.
• call() requires arguments to be passed individually, whereas apply() accepts an array of arguments.
• bind() is ideal for setting the this context in advance, such as in event handling or asynchronous programming.

Use Cases:

• call() and apply() are typically used when you need to invoke a function immediately with a specific context.
• bind() is suitable for scenarios where you want to predefine the this context without immediate execution, such as in event listeners or asynchronous operations.

These methods are essential tools in both object-oriented and functional programming in JavaScript, enabling more flexible and powerful code.