setTimeout() function's confusion

I actually not understanding why mim.infor() 's value is printing first on the console when the promise is rejected. I dont have any setTimeout function there so why it is printing after the mim.imfo()'s value??

import Person from "./person.js";

let mim =  new Person("Mim");

// finding the biggest word's length
const findBigOne = str => {
    return str.split(" ").reduce((big, cur) => Math.max(big, cur.length),0);
  }
  
let bigOne = findBigOne('hi, my name is mizann')

let p = new Promise((resolve, reject) => {
    if(bigOne === 5){
        setTimeout(() => {
            resolve({
                info: `bigOne is ${bigOne} so the problem is solved :)`
            });
        }, 5000);
    }else{
        reject(
            {
                info: `bigOne is ${bigOne} so the problem is not solved therefore :(`
            }
        );
    }
})

p.then((res) => console.log(res.info)).catch((rej) => console.log(rej.info))

mim.info();

Hey @mizanmahi, How are you?

This is a good point and I remember a while back I had the same issue and I found useful the answer here:

Basically a way to resolve the issue you are having is to use the await approach where you tell your program in an imperative way to be waiting for the execution of the promise before going ahead with the next line or to chain the min.info() with a then in the promise itself.

Basically, once you declare that your code is async the flow restart from that point and even if there is no setTimeout function in the reject callback of the promise the execution of that code takes more time than the execution of the next line.

Does it make sense somehow? It is a really challenging concept to explain so I hope to have written it down in a comprehensible way If I did not please let me know :slight_smile:
Have a good day

1 Like

Is Promise also a part of web browser API?

No, it’s part of JavaScript. Many browser APIs use promises.

1 Like

So that the JavaScript interpreter knows what it is supposed to be doing at any one time, it uses a call stack. A stack is a data structure, a collection where elements can only be added or removed from the top.

When a function is called, it gets added to a call stack. If that function calls another function, that gets added to the call stack. And so on.

If the function resolves to a value, then it is resolved and is popped off the stack. Then the next function is resolved and popped off the stack and so on.

JavaScript is for the most part single threaded: it processes one thing at a time. To avoid blocking on anything that might take time, it has what’s called an event loop for each thread, which run constantly, and a set of queues for things like timeouts and promises. When the interpreter reaches something like a timeout or a promise, it puts it in the relevant queue for the event loop to pick up when it has time. Only then does the timeout function callback or the promise get called and added to a call stack.

With your code, the promise code to execrute gets put into the microtask queue (p.then…etc). Then mim.info goes straight into a call stack. That’s the only thing in the callstack, it resolves straightaway. Nothing is now being processed, the event loop grabs the promise out of the microtask queue, that function gets sent to a call stack, it’s the only thing there, it resolves.

As @lucatardi says, easiest way may be to use async await. You can guarantee order with promises as well, no problem, but it’s imo easier to grok. In that case all function calls in the async block are going to go into a queue of their own I think.

Sorry of slightly jumbled explanation, is from memory and typed quite quickly so.kay have missed something

1 Like

So, Promise is not an API of browser but it sits on the event queue and when stack is empty then it gets called now my question is browser API like SetTimeout or setInterval or eventlistener sit on the event queue, is it the same queue where promise sits?

Not the same queue but practially, yes. JavaScript doesn’t know in advance if functions that use any of those APIs you mention are going to resolve straightaway or whether they’ll take time. So it has to put the reference to them somewhere (a queue) that gets checked when there’s nothing else happening.

This is why your promise result appears after the info call even though the promise is rejected. The same thing will happen if you have a function wrapped in a setTimeout even if the time for the setTimeout is 0.