First-Class Functions, Callbacks and Event Listeners

Concept

JavaScript treats functions as first-class citizens — a fancy way of saying a function can do everything any other value (a number, a string, an object) can do: get assigned to a variable, get stored inside an array or object, get passed into another function as an argument, and get returned out of a function. A callback is simply a function passed into another function, to be run later, by that other function. An event listener is just a callback registered with the browser, to be run later, whenever a particular event happens.

Key Words In Plain English

• First-class function means a function is treated like any other value. You can store it in a variable, put it in an array, pass it in, and return it. (A function is a special kind of object, so typeof reports "function".)
• Function reference is the function itself as a value, written without parentheses: greet. Writing greet() calls it instead.
• Callback is a function that you give to other code so that it can call it later.
• Higher-order function is a function that takes a function as an argument, returns a function, or both. Difference in one line: a callback is the function that is passed in; a higher-order function is the one that receives it.
• Synchronous means it runs right now and the next line waits. Asynchronous means it is scheduled to run later while the next lines continue.
• Anonymous function is a function with no name, written in place, such as () => console.log(1). Arrow function is the short () => ... way to write a function.
• Event is a signal that something happened, such as a click or a key press. Event listener is a callback registered to run when a given event happens on a given element.
• addEventListener is a method that registers an event listener on an element. removeEventListener unregisters one.
• Closure is a function that keeps access to the variables of the place where it was created (Lesson 10).
• Function factory is a function that builds and returns other functions.
• this is a special value inside a function that points to the object the function is working with. For a regular function, how the function is called decides it (Lesson 5).
• Rest parameter (...args) collects all extra arguments into an array. Spread (fn(...args)) does the reverse and passes an array as separate arguments.
• AbortController is a built-in object that makes a signal. When you call controller.abort(), everything that was given that signal is cancelled. Here, the listeners are removed.
• Middleware is a function placed between a request and its handler to add steps such as logging. Decorator is a function that wraps another function to add behaviour. Debounce waits until calls stop before running once. Throttle runs at most once per time period.
• $0 is a DevTools shortcut for the element currently selected in the Elements panel.

Why This Matters

• It's the mechanism underneath every addEventListener, every setTimeout, and every function factory from Lesson 10 — they all rely on functions being passable, storable values.
• It explains why a function can be “handed off” to run somewhere else, later, without losing access to the data it needs — that's the closure link from Lesson 10, doing its job.
• Getting removeEventListener and this inside listeners wrong is one of the most common real-world bugs in UI code.

The Instruction Card — An Analogy

Proof: Functions Are Values

function greetGuest() {
  console.log("Welcome to the front desk!");
}

console.log(typeof greetGuest); // "function" — it's a value, with a type, like anything else

const alsoGreet = greetGuest; // assigned to another variable — no () means "don't call it, just copy the reference"
alsoGreet(); // Welcome to the front desk!

const staffActions = [greetGuest, () => console.log("Checking in guest...")];
staffActions[1](); // Checking in guest...

Higher-Order Functions

A higher-order function is any function that either accepts another function as an argument, or returns a function. You've already met one — Lesson 10's createCounter is higher-order because it returns a function. Here's one that accepts a function:

function repeatTask(times, callback) {
  for (let i = 1; i <= times; i++) {
    callback(i);
  }
}

repeatTask(3, (round) => {
  console.log(`Cleaning pass ${round} complete`);
});
// Cleaning pass 1 complete
// Cleaning pass 2 complete
// Cleaning pass 3 complete

repeatTask doesn't know or care what callback actually does — its only job is to call it, at the right time, with the right argument. This separation — “when to run” decided by one function, “what to run” decided by whoever calls it — is the entire point of accepting a function as an argument.

Functions That Return Functions

The other half of “higher-order” is returning a function. Because a function is a value, a function can build one and hand it back — and thanks to closures (Lesson 10), the returned function keeps access to the variables of the call that made it. That turns one general function into a small factory for specialised ones:

function makeDiscount(percent) {
  return function (price) {
    return price - (price * percent) / 100;
  };
}

const festiveSale = makeDiscount(20); // a brand-new function, remembering percent = 20
const staffRate = makeDiscount(50);   // another one, remembering percent = 50

console.log(festiveSale(1000)); // 800
console.log(staffRate(1000));   // 500

// The same idea, used to wrap any function with extra behaviour:
function withLogging(fn) {
  return function (...args) {
    console.log("calling with", args);
    return fn(...args);
  };
}
const loggedDiscount = withLogging(festiveSale);
loggedDiscount(1500); // logs "calling with [1500]", returns 1200

makeDiscount(20) and makeDiscount(50) are two separate calls, so each gets its own Variable Environment (Lesson 4) and each returned function closes over its own percent. withLogging goes one step further: it takes a function and returns a new one that wraps it — the pattern behind middleware, retry helpers, debounce and throttle, and most “decorators” you will meet in real code.

Callbacks — Sync vs. Async

Not all callbacks run at the same moment relative to the code around them:

Both are callbacks — a function handed to another function to be run on its behalf. What changes is only when that run actually happens, which is a preview of the event loop machinery in Lesson 14.

1console.log("before");
2repeatTask(2, (r) => console.log("pass " + r));
3console.log("after");

1console.log("before");
2setTimeout(() => console.log("timer"), 0);
3console.log("after");

Event Listeners Are Just Callbacks

const checkoutButton = document.querySelector("#checkout-button");

function handleCheckout() {
  console.log("Guest checked out");
}

checkoutButton.addEventListener("click", handleCheckout);

addEventListener is a higher-order function too — you're handing it a callback (handleCheckout), and the browser holds onto that reference and invokes it later, whenever a click event actually happens on that button. Nothing new is happening here conceptually — it's repeatTask's pattern, except the browser decides when to call your function instead of a for loop deciding.

Removing Listeners Correctly

// Works — same function reference passed to both calls
checkoutButton.addEventListener("click", handleCheckout);
checkoutButton.removeEventListener("click", handleCheckout);

// Does NOT work — two different anonymous functions, even though they look identical
checkoutButton.addEventListener("click", () => console.log("Guest checked out"));
checkoutButton.removeEventListener("click", () => console.log("Guest checked out"));

Modern browsers also give you two ways to clean up without keeping a reference around: the once option removes a listener automatically after its first call, and an AbortController signal removes every listener registered with it in one go — anonymous ones included. This matters beyond tidiness: a listener that is never removed keeps its callback, and everything that callback's closure references, alive in memory for as long as the element exists.

// Run once, then remove itself automatically
checkoutButton.addEventListener("click", handleCheckout, { once: true });

// Remove many listeners at once, anonymous ones included
const controller = new AbortController();
checkoutButton.addEventListener("click", () => console.log("A"), { signal: controller.signal });
window.addEventListener("resize", () => console.log("B"), { signal: controller.signal });
controller.abort(); // both listeners are gone

this Inside A Listener — A Lesson 5 Callback

checkoutButton.addEventListener("click", function () {
  console.log(this); // the button element itself — a regular function's this is set by how it's called
});

checkoutButton.addEventListener("click", () => {
  console.log(this); // whatever `this` was in the surrounding scope when the listener was defined — NOT the button
});

This is Lesson 5's rule about this, applied to a real, common situation: a regular function passed as a listener gets this set to the element the event fired on. An arrow function never gets its own this — it keeps whatever this its surrounding scope had (in a classic script that is the global object window, per Lesson 5; in a module it is undefined), which is almost never what you want inside a listener that needs to reference the clicked element.

See It Live — DevTools

1. Open any page and select an element

   In the Elements panel, then switch to the Console.

2. Add a named listener

   function log(){ console.log(this) } then $0.addEventListener('click', log) — $0 refers to the currently selected element.

3. Click the element and inspect this

   Confirm it logs the element itself, not window.

4. Try removeEventListener with a fresh arrow function

   $0.removeEventListener('click', () => console.log(this)) — click again and notice the original listener is still very much alive.

Common Misconceptions

Interview Questions