Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

FunctionsBeginner

Callbacks

A callback is a function passed into another function so it can run later or customize behavior.

Callbacks are a fundamental JavaScript pattern. They are used in array methods, event listeners, timers, and asynchronous APIs. Before promises and `async`/`await`, callbacks were the main way to handle async results, and they are still everywhere in the language today.

Explanation

Callbacks are a fundamental JavaScript pattern. They are used in array methods, event listeners, timers, and asynchronous APIs. Before promises and `async`/`await`, callbacks were the main way to handle async results, and they are still everywhere in the language today.

Key Points

  • Callbacks are just functions passed as values.
  • They can run immediately, later, or many times depending on the API using them.
  • Many core JavaScript methods like `map` and `forEach` rely on callbacks.

Common Mistakes

  • Calling the function immediately instead of passing the function reference.
  • Assuming every callback runs asynchronously.
  • Writing deeply nested callbacks when a clearer structure is available.

Practice Workspace

callbacks.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

8 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

callbacks.js
8 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

Starting lesson
Finished lesson

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Closure

Closures let inner functions keep access to variables from the scope where they were created.

Promise

Promises represent the eventual result of asynchronous operations and make async flows easier to compose.

Event Delegation

Event delegation handles events from many child elements by attaching one listener to a common parent.

Practice Challenges

Filter active lessons

7 min

Use `filter` to keep only the values that match a condition.