As we all know javascript callbacks are the most important topic which is always asked in interviews, if this is not asked then some questions may be related to Javascript callbacks. 


What are callbacks?


In javascript, functions are first-class citizens which means you can pass a function to another function as an argument.


By definition, a callback is a function that you pass into another function as an argument for executing later.


The following defines a filter() function that accepts an array of numbers and returns a new array of odd numbers: 


function filter(numbers) {

  let results = [];

  for (const number of numbers) {

    if (number % 2 != 0) {

      results.push(number);

    }

  }

  return results;

}

let numbers = [1, 2, 4, 7, 3, 5, 6];

console.log(filter(numbers));

// [1,7,3,5]


Working:

  • First, define the filter() function that accepts an array of numbers and returns a new array of odd numbers.
  • Second, define the numbers array that has both odd and even numbers.
  • Third, call the filter() function to get the odd numbers out of the numbers array and output the result.


If you want to return an array that contains even numbers, you need to modify the filter() function. To make the filter() function more generic and reusable, you can:


  • First, extract the logic in the if block and wrap it in a separate function.
  • Second, pass the function to the filter() function as an argument.


Here’s the updated code:


function isOdd(number) {

  return number % 2 != 0;

}


function filter(numbers, fn) {

  let results = [];

  for (const number of numbers) {

    if (fn(number)) {

      results.push(number);

    }

  }

  return results;

}

let numbers = [1, 2, 4, 7, 3, 5, 6];

console.log(filter(numbers, isOdd));


The result is the same. However, you can pass any function that accepts an argument and returns a boolean value to the second argument of the filter() function.


You can use the filter() function to return an array of even numbers like this:


function isOdd(number) {

  return number % 2 != 0;

}

function isEven(number) {

  return number % 2 == 0;

}


function filter(numbers, fn) {

  let results = [];

  for (const number of numbers) {

    if (fn(number)) {

      results.push(number);

    }

  }

  return results;

}

let numbers = [1, 2, 4, 7, 3, 5, 6];


console.log(filter(numbers, isOdd));

console.log(filter(numbers, isEven));


By definition, the isOdd and isEven are callback functions or callbacks. Because the filter() function accepts a function as an argument, it’s called a high-order function.


A callback can be an anonymous function, which is a function without a name like this:


function filter(numbers, callback) {

  let results = [];

  for (const number of numbers) {

    if (callback(number)) {

      results.push(number);

    }

  }

  return results;

}


let numbers = [1, 2, 4, 7, 3, 5, 6];


let oddNumbers = filter(numbers, function (number) {

  return number % 2 != 0;

});


console.log(oddNumbers);


In this example, we pass an anonymous function to the filter() function instead of using a separate function.


I hope you understood the algorithm. If you have any doubts, please let us know in the comments.