Callback function, implicit vs explicit function invocation in javascript

image credit: link

What are Callback Functions?

A callback function is simply a function passed as an argument to another function, which is then invoked inside the outer function to perform a specific task. This mechanism allows for dynamic behavior and enhances the flexibility of JavaScript code.

Types of Callback Functions:

(1) Synchronous Callbacks:
These callbacks are executed immediately after the invocation of the outer function, without any intervening asynchronous tasks. Examples include callbacks used with methods like Array.prototype.map() and Array.prototype.forEach().

(2) Asynchronous Callbacks:
Unlike synchronous callbacks, asynchronous callbacks are called at some point later, typically after an asynchronous operation has completed. Examples include callbacks used with functions like setTimeout() and Promise.prototype.then().

Understanding Synchronous vs. Asynchronous Callbacks:

The distinction between synchronous and asynchronous callbacks is crucial, especially when analyzing side effects. For instance, in scenarios where the callback function modifies a shared variable, understanding the timing of its execution becomes important.

// Synchronous Callback Example
const synchronousCallback = (callback) => {
  console.log("Synchronous function start");
  callback(); // Callback is executed immediately
  console.log("Synchronous function end");
}

console.log("Before calling synchronousCallback");
synchronousCallback(() => {
  console.log("Inside callback");
});
console.log("After calling synchronousCallback");

// Output:
// Before calling synchronousCallback
// Synchronous function start
// Inside callback
// Synchronous function end
// After calling synchronousCallback

In this example, the synchronousCallback function calls the callback synchronously. As a result, the "Inside callback" message is logged immediately after the "Synchronous function start" message, before the "Synchronous function end" message.

// Asynchronous Callback Example
const asynchronousCallback = (callback) => {
  console.log("Asynchronous function start");
  setTimeout(() => {
    callback(); // Callback is executed asynchronously after a delay
  }, 1000);
  console.log("Asynchronous function end");
}

console.log("Before calling asynchronousCallback");
asynchronousCallback(() => {
  console.log("Inside callback");
});
console.log("After calling asynchronousCallback");

// Output:
// Before calling asynchronousCallback
// Asynchronous function start
// Asynchronous function end
// After calling asynchronousCallback
// Inside callback (logged after 1 second delay)

In this example, the asynchronousCallback function schedules the callback to be executed asynchronously after a 1-second delay using setTimeout. As a result, the "Inside callback" message is logged after the "After calling asynchronousCallback" message, demonstrating the asynchronous nature of the callback execution.

Practical Use Cases:

1. Event Handling: Callbacks are extensively used in event-driven programming, where functions are invoked in response to user actions or system events.
2. Asynchronous Operations: Callbacks play a crucial role in managing asynchronous operations such as fetching data from a server or handling user input.

Explicit vs Implicit Function Invocation:

(1) Explicit Function Invocation:

• In explicit function invocation, you directly call the function by its name and provide the necessary arguments.
• This is the standard way of calling functions in JavaScript.

Examples:

function greet(name) {
    console.log(`Hello, ${name}!`);
}

// Explicit invocation
greet('Alice');

(2) Implicit Function Invocation:

• In implicit function invocation, the function is called indirectly through some other object, where the function is a property.
• The this keyword inside the function refers to the object from which the function is called.

Examples:

const person = {
    name: 'Bob',
    greet: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

// Implicit invocation
person.greet(); // Output: Hello, Bob!

In this example, person.greet() is implicitly invoking the greet function as a method of the person object. Inside the greet function, this.name refers to the name property of the person object.

const numbers = [1, 2, 3];

// Implicit invocation
const sum = numbers.reduce(function(acc, curr) {
    return acc + curr;
}, 0);

console.log(sum); // Output: 6

In this example, the reduce function is invoked on the numbers array, and the provided callback function is implicitly invoked by the reduce method.

You can refer to this article to know more about array methods: map, filter, reduce in js

If you want to know about other bindings in js along with implicit and explicit bindings, feel free to refer this article: bindings in js