CALLBACK

FUNCTIONS

Objectives

• Define callback functions

• Define higher order functions

• Use a callback function to make your code more general

• Create callbacks using anonymous functions

A callback function is...

a function that is passed into another function as a parameter then invoked by that other function

function callback() {
  console.log("Coming from callback");
}

function higherOrder(fn) {
  console.log("About to call callback");
  fn(); // Callback function is invoked
  console.log("Callback has been invoked");
}

higherOrder(callback);

Callback Example

A higher order function is...

a function that accept a callback as a parameter

function callback() {
  console.log("Coming from callback");
}

function higherOrder(fn) {
  console.log("About to call callback");
  fn(); // Callback function is invoked
  console.log("Callback has been invoked");
}

higherOrder(callback);

Callback Example

What are callbacks used for?

• Advanced Array Methods

• Browser events

• AJAX Requests

• React Development

function sendMessageConsole(message) {
  console.log(message);
}

function sendMessageAlert(message) {
  alert(message);
}

function sendMessageConfirm(message) {
  return confirm(message);
}

sendMessageAlert("Lots of duplication");

Duplicate Code Without Callbacks

function sendMessage(message, callback) {
  return callback(message);
}

sendMessage("Message for console",
            console.log);

sendMessage("Message for alert", alert);

var answer = sendMessage("Are you sure??",
                         confirm);

Code Reuse With Callbacks

function greet(name, formatter) {
  return "Hello, " + formatter(name);
}

function upperCaseName(name) {
  return name.toUpperCase();
}

greet("Tim", upperCaseName);

Callbacks With Function Declarations

function greet(name, formatter) {
  return "Hello, " + formatter(name);
}

greet("Tim", function(name) {
  return name.toUpperCase();
});

greet("Tim", function(name) {
  return name + "!!!!!";
});

Callbacks With Anonymous Functions

LIVE

CODE