Function expressions & callbacks

Functions are values

You already know how to write a function and call it. This lesson adds one new idea. In JavaScript, a function is also a value, just like a number or a string. So you can:

• store a function in a variable,
• keep it in an object,
• pass it to another function,
• return it from a function,
• put it in an array.

That is why typeof a function gives "function". You met typeof in the Data types lesson. It tells you what kind of value something is.

A function value can do one thing other values can't: you can call it. You call a function by writing round brackets () after it. Without the brackets, you only move the function around. With the brackets, its code runs now.

Many parts of JavaScript ask you for a function: array methods, button clicks, and timers. A later lesson, Higher-order functions, goes deeper. In this lesson you learn one skill: look at a function and tell whether it is being stored, passed, or called.

A function declaration is a line that starts with the word function. It makes a function and gives it a name:

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

An expression is any piece of code that gives a value, like 2 + 3. A function expression makes a function in a place where a value goes. The most common place is after =, so the function is stored in a const variable:

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

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

Here is what each part does:

• The right side of line 1, function (a, b) { ... }, is the function value.
• The left side, add, is the variable that stores it.
• Line 5 calls the function with add(2, 3) and prints 5.

The const rule from the Variables lesson still applies. You can't put a different value in add later. You can still call the function as often as you like.

A function expression can sit anywhere a value can sit:

• after =,
• inside an object,
• inside an array,
• between the round brackets of a function call.

Sort the lines below. Each answer explains the clue.

Both shapes make a function you can call. The difference is when the name is ready to use. Before any line runs, JavaScript reads the whole script and sets up every name it finds. This setup step is called hoisting. Each shape is set up in a different way:

• A declaration is set up with its whole function. You can call it even above the line where it is written.
• A const function expression is set up as a name that can't be used yet. It becomes usable only when its own line runs. The time before that is called the temporal dead zone. Calling the function there throws a ReferenceError.
• An older var function expression is set up holding undefined. Calling it early throws a TypeError, because undefined is not a function.

Try all three in the replay below. Line 1 calls sayHello(). Line 3 makes the function.

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

The table compares the two shapes. Read each row as a question, then read the answer for each shape.

Which one should you use?

• Use a declaration for a named helper that reads like a normal part of your code.
• Use a function expression when you treat the function as data: you store it in an object, pass it to a function, or make it for one spot only.

First-class means functions are treated like any other value. A number can be stored in a variable, passed to a function, returned, and kept in an object. A function can do all of these too. This is a normal rule of the language, not a special trick.

In the playground, an object called operations holds three functions. Pick one, and calculate calls it with your two numbers.

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));

You will use this pattern often: first pick the data, then pick the function that works on it. For example:

• A calculator picks operations.add.
• A menu picks the function for the command the user chose.
• A form checker keeps one function for each rule.

A callback is a function you pass to another function, so that the other function can call it. The other function may call it:

• right away,
• once for each step of a loop,
• after a timer,
• when a user clicks.

The main point: you hand over the function, and the other function decides when to call 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});

While the callback runs, the replay's Running in row shows script → repeat → action. That means the main script called repeat, and repeat called the callback, action. All of this happens right now, in order. The line after repeat(...) waits until the loop is done. Code that runs in order like this is called synchronous.

Arrays work the same way. forEach is an array method that calls your function once for each item. You will learn map, filter, and reduce in Stage 3, but forEach already shows the callback idea:

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

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

Line 3 passes the function greet to forEach. forEach calls it three times, once for each name. So it prints Hi, Ada, Hi, Grace, and Hi, Linus.

A button works the same way. In the next code, onClick acts like a tiny button: it gets a function and calls it.

function onClick(callback) {
  callback();
}

function save() {
  console.log("saved");
}

onClick(save);

Line 9 passes the function save to onClick. On line 2, onClick calls it, so the code prints "saved". A real button uses the same shape: you pass a function now, and it is called later, when the click happens.

function onClick(callback) {
  callback();
}

function save() {
  console.log("saved");
}

onClick(save());

Here line 9 has round brackets after save. So save runs first and prints "saved". It gives back undefined, and onClick gets that. Then line 2 throws TypeError: callback is not a function.

A timer callback runs later. setTimeout takes a function and a wait time in milliseconds. It keeps the function, waits, and then calls it. The event loop lesson explains the details. For now, remember this: the function is handed over now and called later.

console.log("first");

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

console.log("second");

This prints first, then second, then later. Even with a wait time of 0, the timer's function runs only after the rest of the script is done. Code that runs later like this is called asynchronous.

Browser events work the same way. An event is something that happens on the page, like a click. A later lesson covers events. For now, read button.addEventListener("click", callback) as: when a click happens, call this function.

Anonymous functions and named function expressions

An anonymous function is a function with no name after the word function. It is common for a short function that is used only where it is written:

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

That is fine for a short callback. But a name after function helps in two ways:

• The function can call itself by that name. A function that calls itself is called recursive.
• The name shows up in error messages, so you can find the broken function faster.

A function expression with its own name is called a named function expression:

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

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

Line by line:

• Line 1 stores the function in the variable factorial. The function's own name is fact.
• Line 2 stops when n is 1 or less, and returns 1.
• Line 3 uses the name fact to call the function again, with a number one smaller.
• Line 6 prints 24, because 4 × 3 × 2 × 1 is 24.
• Line 7 prints "undefined". The name fact works only inside the function, not outside. For a name that doesn't exist, typeof gives "undefined" instead of throwing an error.

A name also helps when something goes wrong. When an error is thrown, JavaScript records which functions were running. This list is called a stack trace, and you can read it in error.stack.

The next code uses try and catch. The try block runs some code. If that code throws an error, the catch block gets the error. Here, validateCart throws, and the catch block checks that the stack trace contains the name validateCart. It prints true.

const validate = function validateCart() {
  throw new Error("missing price");
};

try {
  validate();
} catch (error) {
  console.log(error.stack.includes("validateCart"));
}

A clear name in a stack trace is easier to spot than the word anonymous. The Reading error messages lesson shows how to read a whole stack trace.

Where you’ll use this

Function expressions and callbacks show up whenever code needs to change what a tool does, without rewriting the tool. Here are three common patterns:

• Lookups: keep functions in an object, then pick one by its name. This replaces a long chain of if statements.
• Repeated work: write repeat(times, action) once. Then pass a different function to print, draw, or save.
• Later work: pass a function to a timer or to a click listener. The browser calls it when the time is up or when the user clicks.

Common misconceptions

Read each code example carefully. Watch for round brackets, and for how each function is made.

Key takeaways

• Functions are values. You can store them, pass them, return them, and keep them in objects.
• A function expression makes a function value in a place where a value goes, like after =.
• You can call a declaration above its line. You can't call a const function expression before its line.
• A callback is a function you pass to another function, which calls it at the right moment.
• Anonymous functions are fine for short callbacks. A name helps with stack traces and with recursive calls.

Up next: Arrow functions. You'll learn a shorter way to write callbacks, and how arrow functions behave differently.