Callback Functions

Javascript functions are often passed to other functions as callbacks.

This section covers callback functions, anonymous functions (also known as closures), and the arrow function syntax.

Table of Contents

  1. Standard Functions
  2. Anonymous Functions
  3. Callback Functions
  4. Arrow Functions
  5. Arrow Function Variants - Implicit Return (No Brace)
  6. Explicit Return
  7. Anonymous Arrow Callbacks
  8. Further Reading

Standard Functions

A standard function is defined like this:

function snail() {
  console.log("Hello Snail! 🐌");
}

snail(); // And called by name.

Anonymous Functions

Unnamed function are called anonymous* functions:

setTimeout(function(){ console.log("Hello Mail! 📨"); }, 500);

Anonymous functions can be assigned to variables:

let nail = function () {
  console.log("Hello Nail! 💅");
};

nail(); // And called like named functions.

*Anonymous, derived from the Greek word ἀνωνυμία, anonymia, meaning “without a name” or “namelessness”.

Callback Functions

In Javascript, functions can be passed as arguments to other functions. We call these “callback functions” as they aren’t executed immediately.

For example, setTimeout takes a callback function and a time in milliseconds as arguments. The callback function is executed after the provided time elapses.

function whale() {
  console.log("Hello Whale! 🐋");
}

let tail = function () {
  console.log("Hello Tail! 🦨");
};

setTimeout(whale, 500); // Named function as callback.
setTimeout(tail, 1500); // Variable-assigned anonymous function as callback.

// Inline anonymous callback functions are also handy:
setTimeout(function () {
  console.log("Hello Sail! ⛵");
}, 2000);

☝️ Callbacks can be named functions, anonymous functions, or anonymous functions assigned to variables.

Arrow Functions

Another way to define an anonymous function is with the “arrow operator” =>:

let gale = () => {
  console.log("Hello Gale! 🌬️");
};

// Called by variable name.
gale(); // Hello Gale 🌬️

Arrow functions can also be defined with parameters:

let rail = (times) => {
  for (let i = 0; i < times; i++) {
    console.log("Hello Rail! 🚊");
  }
};

rail(5); // 5 times: Hello Rail! 🚊

Arrow Function Variants - Implicit Return (No Brace)

Arrow functions that contain a single statement can be written without curly braces.

These are called “implicit* return” functions.

let implicit = (word, emoji) => `Hello ${word}! ${emoji}`;

Implicit return functions automatically return the value of the function statement.

// Here, the implicit function returns a string which is then logged:
console.log(implicit("Trail", "🌠")); // Hello Trail! 🌠

*Implicit means something implied but not stated directly.

Explicit Return

The above implicit function is equivalent to this arrow function with an explicit* return:

let explicit = (word, emoji) => {
  return `Hello ${word} ${emoji}`; // Explicit Return Statement
};

console.log(explicit("trail", "🌠")); // Hello Trail! 🌠

*Explicit means something made clear and stated plainly.

Anonymous Arrow Callbacks

Arrow functions are a nice way to define clear and concise callback functions.

Compare the readability of this regular callback:

setTimeout(function () {
  console.log("Hello Veil! 👰");
}, 225);

With the arrow version:

setTimeout(() => console.log("Hello Veil! 👰"), 225);

There’s a lot less “punctuation noise”, which makes the code easier to read for others.

⏳ Wait For It:

We’ll use implicit-return arrows a lot in the next section on array helpers.

Further Reading