# JavaScript Promises Explained for Beginners

## Introduction

In the previous blog, we learned about callbacks and how they help handle asynchronous tasks.

However, callbacks come with a major problem:

> **Callback Hell** — deeply nested and hard-to-read code.

To solve this issue, JavaScript introduced:

> **Promises**

Promises make asynchronous code more readable, structured, and easier to manage.

* * *

## What Problem Do Promises Solve?

Let’s look at a callback-based example:

```javascript
setTimeout(() => {
  console.log("Step 1");

  setTimeout(() => {
    console.log("Step 2");

    setTimeout(() => {
      console.log("Step 3");
    }, 1000);

  }, 1000);

}, 1000);
```

### Problems:

*   Nested structure
    
*   Hard to read
    
*   Difficult to debug
    
*   Poor maintainability
    

This is called **callback hell**.

* * *

## What is a Promise?

A Promise is:

> An object that represents the **future result** of an asynchronous operation.

Think of it like this:

*   “I promise I will give you the result later.”
    

* * *

## Promise States

A Promise has three states:

1.  **Pending**
    
    *   Initial state
        
    *   Task is still running
        
2.  **Fulfilled**
    
    *   Operation completed successfully
        
    *   Result is available
        
3.  **Rejected**
    
    *   Operation failed
        
    *   Error is available
        

* * *

## Basic Promise Example

### Creating a Promise:

```javascript
const myPromise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Task completed successfully");
  } else {
    reject("Task failed");
  }
});
```

* * *

## Handling Success and Failure

We use `.then()` and `.catch()`:

```javascript
myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });
```

### Explanation:

*   `.then()` runs when the promise is fulfilled
    
*   `.catch()` runs when the promise is rejected
    

* * *

## Real-Life Example

Imagine you ordered a product online:

*   Order placed → **Pending**
    
*   Delivered → **Fulfilled**
    
*   Cancelled → **Rejected**
    

* * *

## Promise Lifecycle (Concept)

```text
Pending → Fulfilled (resolve)
        → Rejected (reject)
```

* * *

## Promise Chaining

One of the biggest advantages of promises is **chaining**.

### Example:

```javascript
function step1() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Step 1 done"), 1000);
  });
}

function step2() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Step 2 done"), 1000);
  });
}

function step3() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Step 3 done"), 1000);
  });
}

step1()
  .then((res) => {
    console.log(res);
    return step2();
  })
  .then((res) => {
    console.log(res);
    return step3();
  })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });
```

### Benefits:

*   Flat structure (no nesting)
    
*   Easy to read
    
*   Better error handling
    

* * *

## Callback vs Promise

### Callback Style:

```javascript
doTask(function(result) {
  doNext(result, function(nextResult) {
    doAnother(nextResult, function(finalResult) {
      console.log(finalResult);
    });
  });
});
```

### Promise Style:

```javascript
doTask()
  .then(doNext)
  .then(doAnother)
  .then(console.log)
  .catch(console.error);
```

### Key Difference:

*   Callbacks → nested
    
*   Promises → chained
    

* * *

## Common Mistakes

*   Not returning promises in `.then()`
    
*   Forgetting `.catch()`
    
*   Mixing callbacks and promises unnecessarily
    

* * *

## Interview Points

*   Promises solve callback hell
    
*   They represent future values
    
*   Three states: pending, fulfilled, rejected
    
*   `.then()` and `.catch()` are used
    
*   Support chaining
    

* * *

## Conclusion

Promises are a powerful improvement over callbacks:

*   Cleaner code
    
*   Better readability
    
*   Easier error handling
    

They are the foundation for modern asynchronous JavaScript.

* * *