Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

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

Async JavaScriptIntermediate

Promise

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

A promise can be pending, fulfilled, or rejected. It gives you a structured way to react when asynchronous work finishes. Promises are the foundation for chaining async operations and for using `async` and `await` cleanly in modern JavaScript applications.

Explanation

A promise can be pending, fulfilled, or rejected. It gives you a structured way to react when asynchronous work finishes. Promises are the foundation for chaining async operations and for using `async` and `await` cleanly in modern JavaScript applications.

Key Points

  • A promise represents a future value, not the value itself right now.
  • `.then()` handles fulfilled values, and `.catch()` handles failures.
  • `async` and `await` are built on top of promises.

Common Mistakes

  • Trying to return async values synchronously from outside a promise chain.
  • Forgetting to handle rejected promises.
  • Mixing callbacks and promise chains inconsistently.

Practice Workspace

promise.js

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

Editor

7 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.

promise.js
7 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

Lesson loaded

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.

Event Loop

The event loop coordinates synchronous code, queued tasks, and microtasks so JavaScript can handle async behavior.

Practice Challenges

Predict the event loop output

8 min

Read mixed synchronous, promise, and timer code and determine the true execution order.

Fix a broken promise chain

12 min

Repair an async flow so success and failure are handled in a predictable order.

Refactor a promise chain with async/await

10 min

Rewrite a chained async flow using async/await while preserving the final output order.