Function expressions & callbacks

Functions are values

You already know that a function packages code behind a name. This lesson adds the next idea: in JavaScript, a function is also a value. You can store it in a variable, keep it in an object, pass it to another function, return it from a function, or put it in an array just like a number or a string.

That is why typeof a function is "function", as the Data types lesson teaches. JavaScript gives function values one special power: you can call them with parentheses. Without parentheses, you are moving the recipe card around. With parentheses, you are cooking the recipe now.

This unlocks most modern JavaScript style. Array methods, browser events, timers, and many libraries ask you to provide behavior as a function. The deeper Higher-order functions lesson returns to this idea later; here we focus on the beginner skill: recognizing whether a function is being stored, passed, or called.

A function declaration starts a statement:

function add(a, b) {
  return a + b;
}

A function expression creates a function value inside another expression. Most beginners first see it assigned to a const variable:

const add = function (a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

The right side, function (a, b) { ... }, is the value. The left side, add, is the variable that stores it. This is the same const rule from the Variables lesson: the variable cannot be reassigned, but the function value can still run whenever you call it.

Function expressions often appear where a value is expected: after =, inside an object, inside an array, or between the parentheses of a function call. Sort the shapes below before you read the answer explanations.

Declarations and expressions can both create callable functions, but they are prepared differently before the script runs. A declaration is hoisted with its body, so it can be called before its line. A const function expression follows const rules: the variable is in the temporal dead zone until its line runs. An older var function expression starts as undefined, so calling it too early throws a different error.

1sayHello();2 3function sayHello() {Run4  console.log("hello from declaration");5}

When should you choose which? Use a declaration when you want a named helper to read like a normal part of the surrounding code. Use a function expression when the function is being treated as data: stored in a lookup, passed to a function, or created only for one spot.

First-class means functions get the same basic rights as other values. A number can be stored in a variable, passed to a function, returned, and kept in an object. A function can too. That is not a fancy pattern; it is a normal language rule.

1function add(a, b) { return a + b; }2function subtract(a, b) { return a - b; }3function multiply(a, b) { return a * b; }4 5const operations = { add, subtract, multiply };6const chosen = operations.add;7 8function calculate(operation, left, right) {9  return operation(left, right);10}11 12console.log(calculate(chosen, 8, 3));

The object in the playground is a small version of a pattern you will use constantly: choose data, then choose behavior. A calculator can pick operations.add; a menu can pick a handler for the current command; a validation system can keep one function per rule.

A callback is a function you pass to another function so that other function can call it. The receiving function may call it right away, during a loop, after a timer, or when a user clicks. The key idea is control: you hand over the recipe card, and the other function decides when to use it.

1function repeat(times, action) {2  for (let count = 1; count <= times; count++) {3    action(count);4  }5}6 7repeat(3, function showTurn(number) {Run8  console.log("Turn " + number);9});

The call stack shown in the replay says script → repeat → action. That means the main script called repeat, and repeat called the callback. This is still synchronous: the loop finishes before the next line after repeat(...) would run.

Arrays use the same shape. You will learn map, filter, and reduce in Stage 3, but this simple forEach already shows the callback idea:

const names = ["Ada", "Grace", "Linus"];

names.forEach(function greet(name) {
  console.log("Hi, " + name);
});

A timer callback runs later. This lesson is not the event loop lesson, so keep the honest summary small: setTimeout receives a function now, the host waits, then it calls that function later.

console.log("first");

setTimeout(function onTimer() {
  console.log("later");
}, 0);

console.log("second");

Browser events follow the same idea. A later lesson covers events in detail, but button.addEventListener("click", callback) literally means: when the click happens, call this function.

Anonymous functions and named function expressions

An anonymous function has no name after the function keyword. It is common when the function is short and used right where it is created:

repeat(3, function (number) {
  console.log("Turn " + number);
});

An anonymous function is like a recipe card without a title. That can be perfectly fine for a small one-off callback. But names help humans. They appear in stack traces and make recursion easier:

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

console.log(factorial(4));
console.log(typeof fact);

In that code, the outer variable is factorial. The inner function name fact is visible inside the function body, so the function can call itself. Outside, typeof fact prints "undefined". When you are reading an error stack, a helpful name is easier to recognize than anonymous; that connects directly to the Reading error messages lesson.

Where you’ll use this

Function expressions and callbacks show up anywhere code needs to customize behavior without rewriting the whole tool. Here are three beginner-friendly patterns:

• Lookups: keep operations in an object, then choose one by name instead of writing a long if chain.
• Repeated work: write repeat(times, action) once, then pass a different action for printing, drawing, or saving.
• Later work: pass a function to a timer or event listener so the host can call it when time passes or the user acts.

Common misconceptions

Read each snippet carefully. Parentheses and declaration shape matter.

Key takeaways

• Functions are values, so they can be stored, passed, returned, and kept in objects.
• A function expression creates a function value inside a larger expression.
• Declarations are callable before their line; const function expressions are not.
• Callbacks are function values passed to another function to be called at the right moment.
• Anonymous functions are fine for short inline callbacks; names help stack traces and recursion.

Up next: Arrow functions, where you’ll learn shorter callback syntax and the important differences arrows bring.