FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Functions & Scope

Intermediate

Callbacks

A callback is a function passed into another function so it can be called later or for each item.

const numbers = [1, 2, 3];

const doubled = numbers.map((value) => value * 2);
console.log(doubled);

Functions & Scope

Callbacks let one function customize another function.

A callback is not a special syntax. It is a normal function used as an argument. The receiving function decides when to call it.

Callbacks appear in array methods, event listeners, timers, promises, Node-style APIs and custom utility functions.

The key skill is reading control flow: your callback is defined now, but it may run later, once per item or only when an event happens.

Array callback

Runs once for each item in methods such as map, filter and forEach.

Event callback

Runs when the browser fires an event.

Timer callback

Runs later after a delay or interval.

Custom callback

A function you design can accept behavior as an argument.

Examples

Functions become readable when input, output and scope are visible.

Named callback for meaningful behavior

const isLarge = (value) => value >= 10;
const largeValues = values.filter(isLarge);

Callback doing too much inline

items.map((item) => {
  validate(item);
  save(item);
  render(item);
  notify(item);
});

// This callback has too many responsibilities.

Code patterns

Reusable examples for quick reference.

These examples focus on syntax you will actually look up later: declarations, callbacks, returns, closures and context handling. Use the small patterns first, then study the deeper explanation.

Array map callback

Transform each item into a new value.

const values = [1, 2, 3];
const doubled = values.map((value) => value * 2);

console.log(doubled);

Array filter callback

Keep only items that match a condition.

const values = [4, 9, 12, 3];
const large = values.filter((value) => value >= 10);

console.log(large);

Event callback

The browser calls it after an interaction.

button.addEventListener("click", () => {
  output.textContent = "Clicked";
});

Custom callback

Design a function that accepts behavior.

function repeat(times, callback) {
  for (let index = 0; index < times; index += 1) {
    callback(index);
  }
}

repeat(3, (index) => console.log(index));

Rules that matter

Keep behavior small, named and testable.

Functions are where JavaScript stops being a list of statements and becomes a system. Scope decides what each function can see, while return values and parameters decide how functions communicate.

Callbacks are functions

They are normal values passed as arguments.

Know when it runs

Immediate, later, once per item or after an event are different flows.

Keep callbacks focused

Extract large callbacks into named functions.

Use the right array method

map transforms, filter selects, forEach performs side effects.

Handle errors in async callbacks

Later callbacks need error paths too.

Avoid callback nesting when possible

Promises and async functions can flatten async flow.

Production thinking

Good functions reduce the amount of code you must hold in your head.

Why does this matter?

Callbacks are everywhere in JavaScript. Understanding them unlocks array methods, DOM events and asynchronous behavior.

Accessibility

Event callbacks often update UI state, messages and focus. Keeping them clear helps preserve accessible behavior.

Production note

Production callbacks should be small, named where useful and explicit about side effects.

SEO note

Callbacks that render lists or links should not hide important content behind unclear side effects.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Change isLarge to value > 5.
  • Replace filter with map and render doubled values.
  • Extract the forEach callback into a named function.

Practice assignment

Do this before moving to the next topic.

  1. Write a callback for map.
  2. Write a callback for filter.
  3. Write a custom function that accepts a callback.

Try it yourself

Use callbacks to filter and render

Live preview

Self-check

Before you continue, prove that you understand Callbacks.

Intermediate

Functions only become useful when you can explain what goes in, what comes out and which scope the function can see.

  1. Can you explain what a callback is?
  2. Can you explain when event callbacks run?
  3. Can you explain the difference between map and forEach?
  4. Can you explain why callback size matters?
  5. Can you explain why async callbacks need error paths?