This was an eye opener for me. I've learnt and built software using a vast amount of technologies from node, threejs, react, nextjs, etc.. and I thought I was really comfortable with JavaScript but then this video took me a back, even at first the this.bind(this) was so puzzling to me in this case when ive comfortably used it many times before. If this was an interview question I would have fell flat on my face even as a take home exercise. Majority of youtubers teach how to use concepts you when you can just read the docs but to understand the internal and put it across so nicely you do it so well. I am learning rust and your videos encouraged low level understanding. Hope you continue with these lower level js concepts.
@LowByteProductions Жыл бұрын
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!
@amromsteinmetz68814 жыл бұрын
One of the best programming videos I've seen. Thank you, and keep the content coming please!
@LowByteProductions4 жыл бұрын
Thanks Amrom!
@BinaryRx4 жыл бұрын
This channel is an absolute gold mine, thank you for all your incredible videos!
@romulus6598 Жыл бұрын
Wow. That's perfect explanation, for sure! Would be great if you could elaborate the event loop in the same manner. Thank you for amazing content!
@Finn-jp6pn3 жыл бұрын
My brain always wants to know how things work under the hood. Your channel is an absolute godsent. Thank you, thank you 🙏
@paxdriver2 жыл бұрын
The best javascript promises video on KZfaq hands down
@Strasbourgeois4 жыл бұрын
Absolutely fantastic explanation! Once you understand the mechanism I highly advise you to rewrite everything in a different pattern, like factory for instance. It gives you a slightly different perspective and helps a lot to solidify what you've learned.
@BryanChance2 жыл бұрын
So good!!
@Hey__Luna__9129 ай бұрын
That’s the best explanation ever! I heavily commented my implementation of a promise and I cannot thank you enough. Finally I understood what every line of code is doing. Thank you .
@santiagocalvo Жыл бұрын
Can't stop watching you videos
@jonfit23923 жыл бұрын
Wonderful tutorial. It is very important to understand how to implement those JavaScript native methods before we take it for granted to use them. Thank you!
@gregfletcher23604 жыл бұрын
I really enjoy your coding style and your explanations. So clear and concise!
@kathrinayer64024 жыл бұрын
I love this channel and this video in particular. I recommend it to anyone who needs to know the "why" as well as the "how"
@taskforce_kerim4 жыл бұрын
Been following your channel almost from the very beginning. You're doing an incredible job! Great stuff.
@MrAaronBlues2 жыл бұрын
And from all the sands and all the dust, came to light LLJS - thanks to this Holy Channel ❤❤
@renegade59422 жыл бұрын
Great video, we need more content like this, a great teacher is the one who creates teachers. PS: as a best practice maybe you could have set value and reason to null instead of undefined
@iwswordpress3 жыл бұрын
Excellent explanation of a very difficult concept. Thanks!
@bafellah97273 ай бұрын
A nice explanation, just one point, the executor function passed to the promise run immediately after creating the promise
@tonycash95653 жыл бұрын
So clear and awesome explanation, I really love this
@SMasta4 жыл бұрын
Great video, can't wait for your next one!
@mladjo25054 жыл бұрын
Great video. Loving everything about this channel. ❤️
@modolief3 жыл бұрын
I love these videos even though they make me feel small.
@LowByteProductions3 жыл бұрын
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
@maximrudenko8063 жыл бұрын
Great content! Excellent explanation! Thank you!
@user-by9wx1om9v4 жыл бұрын
Awesome video! Thank you!
@PaweTkocz Жыл бұрын
Youre amazing Man!!
@sshh62853 жыл бұрын
can you program the event loop as well?
@gustinian4 жыл бұрын
Just in case anyone really is literally prepping, if you want a truly post-apocalyptic ground zero language, I would recommend learning Forth. All you need is a microcontroller, an 'earth battery' and a datasheet. You would need to assemble ~30 primitive Forth 'words' and then use these to start building standard Forth words and then your Editor/OS. Apart from perhaps, APL, Forth is the most elegantly efficient (and beguilingly fascinating) low/high level computer language conceivable. Investigate eForth if you are curious. :-)
@jeffreyqiu51283 жыл бұрын
This is a really nice video. Thank you
@NanobyteOnline4 жыл бұрын
i never seen a video posted in my timeline "13 seconds ago"
@safouanebaroudi61903 жыл бұрын
Man you're good, great content.
@juangwiantoro76074 жыл бұрын
Thanks for this awesome video! all of your videos are awesome!
@sshobo4 жыл бұрын
I'm not sure 6:22 is correct. The computation/executor function is executed synchronously. It's only the execution of the callback of the then/catch methods that is delayed until the current execution stack is empty. You can check this by blocking in the executor function. Something like console.log(1); new Promise(functionThatBlocks); console.log(2); In your example, the order is 1, 2 block and with native promises is 1, block.
@LowByteProductions4 жыл бұрын
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?
@LowByteProductions4 жыл бұрын
@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.
@sshobo4 жыл бұрын
@@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.
@mtcjrs4 жыл бұрын
@@LowByteProductions Callbacks run on the same turn of the loop if .then is called on a fulfilled promise. Is that according to spec?
@aquaductape2 ай бұрын
@@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
@user-vk6te2eb4p4 жыл бұрын
wow, thanks!!
@sahilverma8073 жыл бұрын
amazing video!!
@I-just-hold-white-paper-up3 жыл бұрын
Great video!! I have a question: why do we call resolve or reject function directly from a class name? I don't know why and when these two functions are embedded inside the class
@LowByteProductions3 жыл бұрын
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!
@I-just-hold-white-paper-up3 жыл бұрын
@@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
@marian0522 жыл бұрын
Explain me what platform code means? we wrap in setTimeout but isn't that asynchronous? What should I do if I don't wanna use that setTimeout? it just immitate a request? Or what actually is with that "platform code"?
@pieg.66893 жыл бұрын
I know this video is great but mostly i don't understand the code flow.. can u suggest me to learn first before watch this video again?
@LowByteProductions3 жыл бұрын
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.
@pieg.66893 жыл бұрын
@@LowByteProductions Thanks for the advice!
@ktknoks87184 жыл бұрын
Great stuff!! Just a quick question, which version of NodeJS are you using here ?
@LowByteProductions4 жыл бұрын
I'm not sure which version I was using at the time - maybe 12.x? Are you having trouble running something?
@ktknoks87184 жыл бұрын
@@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 ?
@christiansakai4 жыл бұрын
Amazing content! I am trying to improve as a software engineer. I need to delve into harder topics of CS. What topic would you recommend to boost my chops to the next level?
@LowByteProductions4 жыл бұрын
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!
@christiansakai4 жыл бұрын
@@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.
@joffarex3 жыл бұрын
Hello. First of all, Great video! Secondly, I've got quick question. If I understood this correctly, this setup is basically emulation of promises using main task queue, because we are not actually invoking anything within microtask queue (this is the default implementation for promises). The only thing we execute asynchronously really is the actual function passed to the constructor of LLJSPromise object. If this assumption is true, how would we be able to actually make this implementation of promises async?
@LowByteProductions3 жыл бұрын
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.
@joffarex3 жыл бұрын
@@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.
@joffarex3 жыл бұрын
@@LowByteProductions oh i think i got what you meant as well. You mean, for example, integrating process.nextTick inside settimeout callback?
@LowByteProductions3 жыл бұрын
Using nextTick instead of setTimeout
@calfland793 жыл бұрын
I fount two places are kind of recursive call. 1) Inside _propagateFulfilled() if valueorpromise is promise, you call valueorpromise.then(). Go back to then definition, inside then, _propagateFulfilled is called. This makes it really confusing. 2)The same to _onFulfilled(), inside of which, _propagateFulfilled is called. while in _propagateFulfilled, _onFulfilled() is also called for controlledPromise. Could you please explain this a little bit? Thanks!
@LowByteProductions3 жыл бұрын
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!
@nanwu98954 жыл бұрын
13:06 is there any reason for having this return inside a forEach?
@LowByteProductions4 жыл бұрын
In this case no, since there is no more code to run afterward.
@Ubuntu_amit3 жыл бұрын
can some body explain me how he handled thenable promise inside _propagateFulfilled, how he use then function which was previously defined as function taking two function fulfilledFn and catchFn, how he does is value and reason and pass it to controlledPromise._onFulfilled and controlledPromise._onRejected.
@SuperOnlyP3 жыл бұрын
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.
@dsuryas4 жыл бұрын
How does program call _onFulfilled() for resolve()? What is the logic behind it?
@LowByteProductions4 жыл бұрын
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.
@dsuryas4 жыл бұрын
@@LowByteProductions Oh, so we're binding onFulfilled for resolve and onRejected for reject respectively, right?
@LowByteProductions4 жыл бұрын
Exactly right 👍
@dsuryas4 жыл бұрын
@@LowByteProductions This is such a wonderful tutorial bruh, thanks so much!
@andrewmat4 жыл бұрын
I see that your editor is odd. There's no caret or typos. Is this a tool to record code typing?
@LowByteProductions4 жыл бұрын
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?
@MartinJaniczek4 жыл бұрын
@@LowByteProductions I just wanted to ask about that tool. It's really great! Looking forward to the release!
@icesentry4 жыл бұрын
@@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
@abhishekmazumdar20724 жыл бұрын
please increase the font size and a little brighter colors please
@LowByteProductions4 жыл бұрын
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.
@Gabriel-V2 жыл бұрын
Like for the 'Promise'd land 🤣🤣🤣
@yt-1161 Жыл бұрын
This is too much in 1 go what are you doing ?
@LowByteProductions Жыл бұрын
You're right I should probably break it up into a series of 45 second tiktoks
@yt-1161 Жыл бұрын
@@LowByteProductions I wasn't joking.
@LowByteProductions Жыл бұрын
Ok
@yt-1161 Жыл бұрын
@@LowByteProductions you seem to be not OK with the dislike