Really glad to hear both that this was valuable to you, and that the challenge of understanding was something to lean into, not run from!

Thanks Amrom!

So good!!

Don't worry - you don't see the head scratching and effort that went into figuring this all out, only the finished product 😁 I definitely didn't sit down and immediately just type this out

I went back to the specification and there really isn't any prescription for the computation function running synchronously. In fact there isn't any prescription about a computation/executor function at all. The only requirement is that the callbacks run in the next tick, which they do in this implementation. But you are correct in that the primary implementations run this function synchronously. Out of curiosity - are there realistic situations where this would be a real problem?

@Brian Kim If you read the spec (promisesaplus.com/) you'll see that there isn't any such requirement for the computation/executor function to run sync. That's an implementation detail. The only actual requirement is the callbacks run in the next turn of the event loop, which they do in this implementation.

@@LowByteProductions The ECMAScript spec actually defines both the executor and the fact that it is called immediately (www.ecma-international.org/ecma-262/6.0/#sec-promise-executor). This doesn't mean that your implementation is not A+ compatible. It actually is. This pattern is called The revealing constructor pattern, take a look at this. blog.domenic.me/the-revealing-constructor-pattern/ It allows exactly what Brian Kim is suggesting. I'm not sure his example is the best since I can't remember ever needing to expose the resolve or reject callbacks to the constructing closure.

@@LowByteProductions Callbacks run on the same turn of the loop if .then is called on a fulfilled promise. Is that according to spec?

​@@LowByteProductions "Out of curiosity - are there realistic situations where this would be a real problem?" I guess it's nice feeling of safeness when writing DOM styling/animation code inside the executor Promise knowing that it runs before upcoming paint frame, rather than the next task where you could potentially miss a single frame

Thanks! At 16:58, resolve and reject are added as static methods. Static methods are basically just regular functions that are added to the class so that they can be grouped together with the namespace. Think of things like Date.now(), Array.from(), Object.entries(), etc. These methods don't act on a particular instance of those classes, but they are functionality associated with them nonetheless (often to make construction in a particular state easier). Hope that helps a little!

@@LowByteProductions thanks for your explanation, that is so detailed. one more thing, how do we add a static function? I notice in 16:58 , you pass a function with resolve and reject as args into a promise instance, is this process adds two static functions? I think I am not right, waiting for your reply

If you don't already know how to use the debugger, then I would learn that first. Then take the source code of the program (available on github), and play with it in the debugger. That will allow you to follow the flow of the program by setting breakpoints and stepping through.

@@LowByteProductions Thanks for the advice!

I'm not sure which version I was using at the time - maybe 12.x? Are you having trouble running something?

@@LowByteProductions Yup. I just noticed that, at around 7 mins, you run the code to see the resolved value (42) getting printed on the terminal. For me it prints nothing other than an empty blank line. I'm using node 10.16, thought I do not think that should have any impact on this. Any ideas ?

Its hard to say because you can go in so many different directions. If you enjoy doing stuff like this - writing abstractions on top of lower level primitives - then you could try to write something like a communication abstraction over sockets. It's also async, but you're dealing with many values over time, going back and forth. Something like that might end up looking more like rxjs. If you enjoy the virtual machine stuff then you might want to get into emulator dev. Pick a console like the Gameboy or super Nintendo and read up on how the system works. There's tons of documentation out there, as well as open source code in every language imaginable. Also the "retro game mechanics explained" KZfaq channel has some great video resources. I could say go and play with data structures and algorithms, but without a focus point that stuff just tends to feel too abstract - at least for me. Hope this helps!

@@LowByteProductions Thanks for the reply. I am actually pretty good with data structures and algorithms, been leetcoding a lot previously, but those stuffs are boring. I read this blog by Steve Yegge (steve-yegge.blogspot.com/2007/06/rich-programmer-food.html) that compilers is the best way to improve as a programmer so I am thinking maybe compilers and virtual machines, since those two are related . Those two looks quite daunting to be honest.

Hey Tornike, The promise spec only states that "onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1]." It later elaborates that: "Here “platform code” means engine, environment, and promise implementation code. In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack. This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick." It's also worth noting that the function isn't the only async thing - the `setTimeout` used in the implementation actually ensures the code is async regardless of whether or not the users computation was async. So the pedantic answer to your question would be that we don't have to do anything to make it async 😁 The answer that you're probably looking for though is: use something like `process.nextTick()` or a `MutationObserver` like the spec mentions. It shouldn't require much of a change - just modifying the `setTimeout` call in the constructor to make use of a micro-task mechanism.

@@LowByteProductions but is not the setTimeout actually implemented "incorrectly", as the body before "resolve" function is called is meant to be sync? And also, after some research myself, I think the whole thing of foreach inside propagateFulfilled function(sorry if i missed the name, writing from phone) should be wrapped with process.nextTick so we ensure that callback passed to then/catch/finally is,in fact, async.

@@LowByteProductions oh i think i got what you meant as well. You mean, for example, integrating process.nextTick inside settimeout callback?

Using nextTick instead of setTimeout

You're right that recursive code can often be confusing. The best way to understand it is usually to follow the flow of the code with a debugger - so I'd actually recommend downloading the code from github and playing around with it; setting breakpoints and viewing the state as the code runs. That said, it'll help to keep this in mind: The .then() method is the API the *user* interacts with to queue some work to be done when the value of the Promise has been resolved. ._propegateFulfilled() is an internal API the library uses whenever the resolved value of a promise needs to be passed on to child promises created using .then() In ._propegateFulfilled(), we call .then() if the value we got was actually a promise - because that method is all about queuing up an async action!

In this case no, since there is no more code to run afterward.

I would suggest using debugging tools in chrome to understand how the flow work. - at 11:55 , thenable: check if the callback pass into .then() will create a value or an instance of object.

I'm not sure I understand the question. Do you mean how are onFulfilled and resolve the same? The creator of the promise provides their own function - which they expect to be passed resolve and reject functions that they can call. The promise library is actually in charge of calling the users function. When it does, it passes in its own _onFulfilled and _onRejected methods as the resolve and reject functions. I hope that's clear. If it's its not, try grabbing the code from github and stepping through the life cycle of a promise using the debugger. It'll help you see how and when the different internal methods are called.

@@LowByteProductions Oh, so we're binding onFulfilled for resolve and onRejected for reject respectively, right?

Exactly right 👍

@@LowByteProductions This is such a wonderful tutorial bruh, thanks so much!

Hey André - yes it is. It's a tool I've been working on that let's me script out the writing of code, deleting, scrolling, and navigating the code. I'll be open sourcing it at some point when I've cleaned the code up. Since you noticed: did you find it difficult to follow without the cursor? Did you notice any other weird points?

@@LowByteProductions I just wanted to ask about that tool. It's really great! Looking forward to the release!

@@LowByteProductions Personally, while I do not have issue reading ligatures, it can be confusing to beginners. I believe in an educational video it might be better to go with no ligatures

I will be doing this in the future! Still tweaking the code typing system. Might play with some different fonts as well - this one is rendered quite a bit thinner than in my regular editor, but bold is too much.

You're right I should probably break it up into a series of 45 second tiktoks

@@LowByteProductions I wasn't joking.

Ok

@@LowByteProductions you seem to be not OK with the dislike