Promise In JavaScript

🧱 1. Basic Function

function feature(){
 return "hi"
}

console.log(feature()) => "hi"

Everything here runs top to bottom, line by line, without interruption.

No Delays: Everything executes in order without waiting.

Now what if we need to wait for the task?

like fetching data from database?

we need to wait for the data

🔄 2. Dealing with Delayed Work (Asynchronous)

Problem: Fetching data e.g., from a database takes time. If we don’t wait, we might try to use data that isn’t ready yet.

let userData = fetchUser(id)
console.log(userData.firstName) => "Prashant"

Here we are trying to access firstName of user.

If we log userData.firstName before fetchUser(id) finishes, we risk accessing data that hasn't arrived yet. Similar to:

let userData = undefined
console.log(undefined.firstName) 

Uncaught TypeError: Cannot read properties of undefined (reading 'firstName')

Here database fetches are asynchronous and can take time. To ensure the data is ready, we must wait (using await) for the fetch to complete before using the result. This guarantees our app doesn’t break or log undefined.

let userData = await fetchUser(id); // ⏳ Wait for data
console.log(userData.firstName);    // ✅ Safe to access

async/await is like saying, “Hey JavaScript, pause right here until I get the data, then continue.”

So can we say this??

function feature(){
  await fetchDb()
}

Uncaught SyntaxError: await is only valid in async functions

Wait What?? why can't i use await to fetch async jobs????

Because JavaScript needs to know in advance that your function will deal with asynchronous code. If you don’t declare the function as async, it has no idea it needs to pause and wait.

✅ Fix: Tell JavaScript it’s an async job

async function feature(){
  await fetchDb(); // ✅ Now JavaScript knows to wait here
}

Await only works inside async functions because JavaScript must prepare to pause and resume execution and it can only do that inside an async context.

Diving Deep into Async/Await:

Even though you don’t return anything explicitly, an async function always returns a Promise.

With Return:

async function orderingFood(){
  return "delivery started"
}

orderingFood() 
returns:  Promise {<fulfilled>: 'delivery started'}

No Return:

async function feature() {
  // No return 
}

feature()
returns: Promise {<fulfilled>: undefined}

Wait Whattttt???

What is this we are getting?

What is this Promise?

What is a Promise?

A Promise is a placeholder for a value that will be available later (asynchronous work).

It means: I don’t have the data now, but I promise to give it to you later.

States of Promise:

1. Pending: Initial state (work in progress).
2. Fulfilled: Operation completed successfully (resolve).
3. Rejected: Operation failed (reject).

new Promise((resolve, reject) => {
 if(something goes as expected) {
   resolve(it)
 }else{
   reject(it)
 }
})

Once my mentor told me that Async is the sugar coated form of promise!

I promise 😉

function fetchUser(){
 return new Promise((resolve, reject) =>{
   setTimeout(() => {
     resolve({name: "prashant"})
   }, 1000) // ⏱️ simulating delay
 })
}

fetchUser().then( user => {
 console.log(user.name)  // "Prashant"
})

👉 Here, we’re manually handling .then() to wait for the Promise to resolve.

Sugar coated with Async/Await:

async function feature(){
  const user = await fetchUser(); // ⏳ Waits here
  console.log(user.name);         // ✅ Now it's safe
}

Why is it called sugar-coated?

Because it's not changing the core idea which is the Promise. It just adds syntactic sugar to write asynchronous code in a more synchronous looking way.

Working with promises:

Add Two Promises

Given two promises promise1 and promise2, return a new promise.

promise1 and promise2 will both resolve with a number. The returned promise should resolve with the sum of the two numbers.

Example 1:

Input: 
promise1 = new Promise(resolve => setTimeout(() => resolve(2), 20))
promise2 = new Promise(resolve => setTimeout(() => resolve(5), 60))

Output: 7

Code:

async function addTwoPromises(promise1, promise2){
 return new Promise((resolve, reject) => {
   Promise.all([promise1, promise2])
   .then([one, two] => {
     resolve(one + two)
   })
   .catch(err => reject(err))
 })
}

Simply using async/await

async function addTwoPromises(promise1, promise2){
  let one = await promise1
  let two = await promise2
  return one + two 
}

Promise Time Limit

Given an asynchronous function fand a time t in milliseconds, return a new time limited version of the input function.  takes arguments provided to the time limited function.

The time limited function should follow these rules:

• If the completes within the time limit of t milliseconds, the time limited function should resolve with the result.
• If the execution of the fn exceeds the time limit, the time limited function should reject with the string "Time Limit Exceeded".

Example 1:

Input: 
fn = async (n) => { 
  await new Promise(res => setTimeout(res, 100)); 
  return n * n; 
}

inputs = [5], t = 50

Output: {"rejected":"Time Limit Exceeded","time":50}

Explanation:

const limited = timeLimit(fn, t)

const start = performance.now()

let result;

try {

  const res = await limited(...inputs)

  result = {"resolved": res, "time": Math.floor(performance.now() - start)};

} catch (err) {

 result = {"rejected": err, "time": Math.floor(performance.now() - start)};

}

console.log(result) // Output

The provided function is set to resolve after 100ms. However, the time limit is set to 50ms. It rejects at t=50ms because the time limit was reached.

var timeLimit = function (fn, t) {
    return async function (...args) {
        return Promise.race([
            fn(...args),
            new Promise((resolve, reject) => setTimeout(() => reject("Time Limit Exceeded"), t))
        ])
    }
};