How Async Javascript works (Callback Hell, Promises, Async Await, Call Stack and more)

แชร์
ฝัง

ความคิดเห็น • 128

  • @developedbyed
    @developedbyed  11 หลายเดือนก่อน +113

    I think it would be really fun if we did a series on focusing on one specific aspect of Javascipt and make a fun series out of it!
    Example: A full episode on event handlers (how to make a custom one, how it works, etc etc) 👀
    Let me know if you like the idea 🔥
    Anyone playing Street Fighter 6?

    • @yoJuicy
      @yoJuicy 11 หลายเดือนก่อน +1

      Great ideas Ed! thanks for teaching. Youre hitting 1 million this year bro! I love the idea of intermediate/advanced concepts because often times people explain things shallowly in their examples (for time) so its difficult to understand concepts when you want to use them in your own way.
      Other concepts that are kinda important: prop drilling (now with client & server comps this is critical) Closures [functional programming], prototypes, OOP, event loop, Linked list, Hash, BFS, DFS.
      Cheers

    • @belkocik
      @belkocik 11 หลายเดือนก่อน

      That would be nice :)

    • @dev_franqqi
      @dev_franqqi 11 หลายเดือนก่อน

      That sounds fire

    • @joseduargu
      @joseduargu 11 หลายเดือนก่อน

      amazing idea

    • @marshall-brown
      @marshall-brown 11 หลายเดือนก่อน

      Yes, full send that idea!

  • @user-tl5js5ow3d
    @user-tl5js5ow3d 3 วันที่ผ่านมา

    This is the first TH-cam video that made me happy, thank you my friend, I've wanted to understand this topic for so long and finally I found someone who could describe the workings of JavaScript so thoroughly.

  • @gambomaster
    @gambomaster 11 หลายเดือนก่อน +36

    Thanks again my gorgeous teacher on the internet. 🙏

  • @RychAhlberg
    @RychAhlberg 9 หลายเดือนก่อน +3

    You’re so good at explaining thoroughly. Thank you very much!

  • @patricklemmer-adeveloperss3458
    @patricklemmer-adeveloperss3458 11 หลายเดือนก่อน +1

    THE best video I personally have seen about these concepts. I have started learning how to code early last year and JS is still very difficult for me at time. This video has helped me understand things in 30 mins that I have not understood in the last 1.5 years. Huge compliment and please keep doing these basic concept JS videos, they are gold!

  • @robgioeli
    @robgioeli 11 หลายเดือนก่อน +4

    I’ve been coding for close to 8 years now and have been been watching videos for quite many years and I’d just like let you know that your recent videos have been gold. I think the basics and creating clones of apps are long overplayed and many people will benefit from videos like this. Awesome teacher, would love to see you teach people more technical stuff like you have been the last month 👍🏻🔥

  • @yanndjoumessi7130
    @yanndjoumessi7130 11 หลายเดือนก่อน +5

    That's definitely a great video to put everything in context. I personally would like to see such a format with different JS topics. I don't think that it's really entertaining but for people loving to understand deeply what's going on, it's definitely a much better approach.

  • @Ndzzle
    @Ndzzle 11 หลายเดือนก่อน +5

    SetTimeout is a webAPI. This gets handled by the browser instead of JavaScript. So instead of going staight into the queue, it goes into the WebAPI stack until the time is up. Then gets pushed into the queue, behind the other logs which is why it shows up last

  • @anonygsc6851
    @anonygsc6851 11 หลายเดือนก่อน +3

    Hi Ed, I really appreciate your videos as i decided to use a JS framework to rewrite a project that was pooly optimised in a different technology. It really helps to watch someone when reading docs becomes tiring. Thanks

  • @alfiartya23
    @alfiartya23 11 หลายเดือนก่อน +1

    As always, the way Ed teaching me with his funny way that makes me easily understand again about this context. I remember first time I learn Javascript is from Ed JS playlist, so thank you so much Ed! 😄

  • @aftonlawver3827
    @aftonlawver3827 11 หลายเดือนก่อน

    Great explanation of the call stack vs the web API's and event loop!

  • @annawolf8540
    @annawolf8540 11 หลายเดือนก่อน +2

    Great timing! I‘m working as a react developer for 1 1/2 years now and sometimes I‘m just not aware of some of this concept. This was super interesting to get a little refresher and a deeper understanding!

  • @ichiroutakashima4503
    @ichiroutakashima4503 11 หลายเดือนก่อน +1

    I love this. Always good to watch such concepts because it's a refresher.

  • @maherylala2153
    @maherylala2153 11 หลายเดือนก่อน

    Really waited for that one from you, thanks !

  • @RVAraghav
    @RVAraghav 11 หลายเดือนก่อน

    I have been following you for many years now and the excitement never stops when I see your video every time. Btw the video clarity is fantastic. What’s the camera you’re using? ❤

  • @realworldcodingapplications
    @realworldcodingapplications 9 หลายเดือนก่อน

    i absolutely enjoy this kind of humor when I'm learnign to program, so thank you for that! Makes learnign much less mind numbing

  • @encourage-fm3fo
    @encourage-fm3fo 11 หลายเดือนก่อน

    This was fantastic! Exactly what I was looking for.

  • @DawFa10
    @DawFa10 11 หลายเดือนก่อน

    Great video, and really well explained on the different concepts!

  • @enigmaSpy
    @enigmaSpy 11 หลายเดือนก่อน

    Nawet nie zdajesz sobie sprawy jak bardzo długo szukałem tego typu video, spadłeś mi po prostu z nieba❤

  • @testingBuyer
    @testingBuyer 4 หลายเดือนก่อน

    wonderful and precise tutorial ,wins a subscription

  • @shs4293
    @shs4293 10 หลายเดือนก่อน +1

    Been working on Js since years but trust me, haven't found callbacks & promises being explained like this, even a junior dev could understand this without any hassle.

  • @CristianKirk
    @CristianKirk 11 หลายเดือนก่อน

    Super nice to see actual programming in this channel and not just trendy frameworks conventions.

  • @cmdrTremyss
    @cmdrTremyss 11 หลายเดือนก่อน

    Love the new format, I think I finally get how async works

  • @paulthomas1052
    @paulthomas1052 11 หลายเดือนก่อน

    Great demo and explanation. Cheers !

  • @diganta64
    @diganta64 6 หลายเดือนก่อน

    One of the best session watched..:)

  • @ways.
    @ways. 2 หลายเดือนก่อน

    this is my new favorite channel

  • @hiafraan
    @hiafraan 6 หลายเดือนก่อน

    Thank you for the great explanation! ❤️

  • @iitz_danny
    @iitz_danny 11 หลายเดือนก่อน

    I just had an interview that went over these concepts too. Wish I would have watched this video beforehand. I’m definitely turning on the notifications now😅

  • @ashmitsharma9096
    @ashmitsharma9096 11 หลายเดือนก่อน +1

    Correction: 9:36 CallStack works on LIFO and Callback queue works on FIFO.
    ⚠Warning Your this video is now obsolete:
    th-cam.com/video/_8gHHBlbziw/w-d-xo.html&t

  • @anandumdharan6283
    @anandumdharan6283 11 หลายเดือนก่อน +1

    Much needed bruddah......thanks a lot ed

  • @deepanshusharma9311
    @deepanshusharma9311 11 หลายเดือนก่อน

    WOW🤩 Very nice Explanation

  • @user-kb4le4me2d
    @user-kb4le4me2d 6 หลายเดือนก่อน

    Thank you! Good and useful content 😎

  • @momomadi2
    @momomadi2 7 หลายเดือนก่อน

    nice explanation -- thanks bro

  • @kimhwanhoon
    @kimhwanhoon 11 หลายเดือนก่อน

    Love it thank you so much man!

  • @mostafakheder7721
    @mostafakheder7721 11 หลายเดือนก่อน

    Nice work , I believe this episode is great

  • @deepakroy3459
    @deepakroy3459 10 หลายเดือนก่อน +1

    I am telling you,This guy is a GEM❤

  • @KaiaLoken
    @KaiaLoken หลายเดือนก่อน

    Thank you for this

  • @ahmadbilalfarooqi5731
    @ahmadbilalfarooqi5731 11 หลายเดือนก่อน

    i gona revised function and your teaching way is sooo awesome
    async function is more than easy by Promise

  • @bareenlars
    @bareenlars 2 หลายเดือนก่อน

    Hi, great video! New to promises and await, @26:45 why do we need to await when creating the const data ? isnt the variable response already set/saved? or is it just a placeholder for the function? If so, the await command is already in the response variable. Just trying to understand :)

  • @vinci-g
    @vinci-g 9 หลายเดือนก่อน +1

    "Time's up m*therf*cker!" Had me on the floor rolling LMAO

  • @es2cs
    @es2cs 11 หลายเดือนก่อน +1

    7:55 im going to say this everytime I run a setTimeout from now on 🤷‍♂️😂

  • @SarveshSawant-zk7xy
    @SarveshSawant-zk7xy 7 หลายเดือนก่อน

    02:13 - Two types of context
    06:54 - first console log, third and then second is called because of call stack
    08:22 - Call Stack
    14:54 - Call Back Hell
    19:50 - Custom Promise Example
    22:43 - Real word promise example
    26:35 - Async and await example

  • @joshuamackinnon1250
    @joshuamackinnon1250 11 หลายเดือนก่อน

    Great video!

  • @getrogo4474
    @getrogo4474 9 หลายเดือนก่อน +1

    7:56 caught me off guard hahahahahaha

  • @endritibra4351
    @endritibra4351 11 หลายเดือนก่อน

    This was a masterpiece by Ed, a comment from an experienced developer

  • @parsina4971
    @parsina4971 7 หลายเดือนก่อน

    thanks pal❤❤

  • @JohanDeGroot1982
    @JohanDeGroot1982 11 หลายเดือนก่อน

    THANK YOU!!!

  • @Richard-LaFleur
    @Richard-LaFleur 11 หลายเดือนก่อน

    9:28 Shouldn't it get pushed one by one, only when previous removeTodo() finishes and call stack is empty, and not everything at once?

  • @fried-eggscelleration
    @fried-eggscelleration 2 หลายเดือนก่อน

    Nice video, but how can I get a value from the response returned as part of the function? Seems like the return value of a async function is always a promise? how can I get even maybe a wrapper function to just give me a string in the end, after waiting for the result?

  • @ankamsarav
    @ankamsarav 3 หลายเดือนก่อน

    I feel the remove function which you showed stacking in call stack section is wrong because queue will not push the functions unless the stack is empty

  • @fullstackspiderman
    @fullstackspiderman 11 หลายเดือนก่อน

    @Ed, could you please create testing React App courses or TH-cam videos using RTL, Vitest for unit and integration and Cypress for E2E testing

  • @Pareshbpatel
    @Pareshbpatel 11 หลายเดือนก่อน +2

    Async JS; nicely explained. Thanks, Ed
    {2023-06-27}

  • @nickveldkamp5396
    @nickveldkamp5396 11 หลายเดือนก่อน

    Do u create also a video about Axios ;) ?

  • @chhavimanichoubey9437
    @chhavimanichoubey9437 11 หลายเดือนก่อน

    I was unable to hold myself when you said 2000 seconds.

  • @juliensavary
    @juliensavary 11 หลายเดือนก่อน

    worker threads are changing the single threaded nature of js

  • @chaimaegrich4510
    @chaimaegrich4510 7 หลายเดือนก่อน

    Hi Ed, can I get the name of the music in the background please

  • @vanshshah7781
    @vanshshah7781 9 หลายเดือนก่อน

    Amazing

  • @vitaminprutin8217
    @vitaminprutin8217 11 หลายเดือนก่อน

    loved it

  • @robgioeli
    @robgioeli 11 หลายเดือนก่อน

    Hey ed 👋🏼 also if you like live wallpaper, Razer makes amazing high quality software that I think called Cortex? High quality live wallpaper 👍🏻 best I’ve used!

  • @aps69
    @aps69 11 หลายเดือนก่อน

    Add those chapters Ed

  • @Kuramas_Chakra
    @Kuramas_Chakra 8 หลายเดือนก่อน +1

    Microsoft's True Intention Leaked at 7:18 !

  • @srikarravoori124
    @srikarravoori124 5 หลายเดือนก่อน

    After a long, I see you. By the way seeing your video I happened to become a software engineer at the age of 41 and completing 3 years now

  • @apex-lazer
    @apex-lazer 6 หลายเดือนก่อน +1

    Faking luv you eddy Boiii!

  • @CalmConcept
    @CalmConcept 11 หลายเดือนก่อน

    Are you using an OLED tv as a monitor?

  • @jayaprakash_dev
    @jayaprakash_dev 8 หลายเดือนก่อน

    do the web APIs run in different threads?

  • @nasratt
    @nasratt 11 หลายเดือนก่อน

    What is that VSCode theme? anyone knows?

  • @TUSHARMORE_09
    @TUSHARMORE_09 15 วันที่ผ่านมา

    Thanks! to Gorgeous teacher on internate 💝❤

  • @mjbalcueva6485
    @mjbalcueva6485 11 หลายเดือนก่อน

    anyone knows what his vscode theme is? it looks really clean
    awesome vid btw, keep it up

    • @CodeOnBlocks
      @CodeOnBlocks 11 หลายเดือนก่อน

      Did you figure out what the theme was called? I can't find it.

  • @morale3056
    @morale3056 11 หลายเดือนก่อน

    Damn! Nice and easy!

  • @andrewSantosMaia
    @andrewSantosMaia 9 หลายเดือนก่อน

    You re really funny!

  • @Antonio-yn4mb
    @Antonio-yn4mb 10 หลายเดือนก่อน +1

    When your team leader is Samuel L. Jackson 7:55

  • @Terms-and-Conditions
    @Terms-and-Conditions 11 หลายเดือนก่อน

    Would it look better if you flip/mirror your camera horizontal? so it looks like you are looking at the actual content while showing it to us

  • @zeusor
    @zeusor 8 หลายเดือนก่อน

    I think he meant Last in First out LiFo 9:36

  • @manshulduggal5482
    @manshulduggal5482 10 หลายเดือนก่อน

    2:30

  • @Rashik25
    @Rashik25 11 หลายเดือนก่อน

    😊 Awesome

  • @kvebalas5931
    @kvebalas5931 9 หลายเดือนก่อน

    9:30 First in First out doesn't work that way. It pushes on top, but process the first (oldest) one on the bottom.

    • @zeusor
      @zeusor 8 หลายเดือนก่อน

      He meant Last in First out LiFo I guess

  • @anony88
    @anony88 11 หลายเดือนก่อน

    Ed I need another video like this but explain it to me like I'm 12 lol

  • @dennisbelio6470
    @dennisbelio6470 11 หลายเดือนก่อน

    👏👏👏

  • @G9tvlivenews
    @G9tvlivenews 11 หลายเดือนก่อน

    🎉

  • @MaxenGaynier28
    @MaxenGaynier28 11 หลายเดือนก่อน

    Dr. Strange is teaching programming now? That's cool..

  • @user-ob7ht2ld9b
    @user-ob7ht2ld9b 11 หลายเดือนก่อน

  • @gorkemtr
    @gorkemtr 11 หลายเดือนก่อน

    thks, take care of your health

  • @TJPBataller
    @TJPBataller 3 หลายเดือนก่อน

    I thought callstack is FILO. or FIFO? not sure anymore.

  • @naczelnypsycholog6296
    @naczelnypsycholog6296 11 หลายเดือนก่อน +1

    love the sweater❤, no homo

  • @pfcokelly
    @pfcokelly 11 หลายเดือนก่อน +1

    Tik tok, times up MFer. Great lesson!

  • @singingrockstar9698
    @singingrockstar9698 9 หลายเดือนก่อน +1

    😂😂😂 tick tock tik took tiMesuP !!!😅

  • @SebastianOnofrei
    @SebastianOnofrei 6 หลายเดือนก่อน

    I was very concentrated on what you explain then you came with the ' tick tac , tick tac , tick tac , time is up mothafucka' :)))) MY BELLY HURT BECAUSE OF LAUGHING . Other than that , excellent explanations ! Multumesc frumos ;) !

  • @user-mo1qs8kl5o
    @user-mo1qs8kl5o 11 หลายเดือนก่อน

    7:43 --> *ms

  • @salotspread
    @salotspread 3 หลายเดือนก่อน

    putangina you described it the best very noice moite i subbed.

  • @aadarshverma6913
    @aadarshverma6913 4 หลายเดือนก่อน

    theon gratjoy

  • @consoledoterror971
    @consoledoterror971 11 หลายเดือนก่อน

    nice refreshing video after a long time. i would say you could have started with hoisting first.

  • @ServanFICHET
    @ServanFICHET 11 หลายเดือนก่อน +2

    Always love your videos but the examples are a bit confusing. I think some people might be lost…
    Just an honest feedback! Keep the good work! 👍🏼

    • @developedbyed
      @developedbyed  11 หลายเดือนก่อน

      Oh that’s alright! Which bit did you find confusing? 😊

    • @ServanFICHET
      @ServanFICHET 11 หลายเดือนก่อน +1

      @@developedbyed for example, the part on call stack, web APIs and event loop. I guess it is a bit difficult to understand for a beginner with the examples chosen and Excalidraw. (I know it is not easy to explain and understand visually)
      Also on the promise, at 18:52, I think you got confused because you called in the user object the attribute “user” instead of “name” and I would have continued in you example instead of fetching jsonplaceholder. For example, you could have created a promise which resolves if user name is “Blanka” but rejects if user name is “Ken” and then illustrates it in the .then.catch chain, and finally use the same example with async await…
      No offense, I am just providing my view but I might be too picky ;)

  • @germantoenglish898
    @germantoenglish898 11 หลายเดือนก่อน

    Don't forget about the Swedish and Norwegians 😉

  • @nishantpatil1632
    @nishantpatil1632 11 หลายเดือนก่อน

    keep eye on health buddy...

  • @98f5
    @98f5 11 หลายเดือนก่อน

    is this stuff really considered advanced?

  • @anshvashisht8519
    @anshvashisht8519 8 หลายเดือนก่อน

    can i get the source code for this video?

  • @shantanusingh1281
    @shantanusingh1281 2 หลายเดือนก่อน

    timesup mf 🤣🤣

  • @sendmeabouquet
    @sendmeabouquet 11 หลายเดือนก่อน

    🆒🆒🆒

  • @kirtxn_
    @kirtxn_ 7 หลายเดือนก่อน

    💕💕✅✅

  • @fireworks6795
    @fireworks6795 7 หลายเดือนก่อน

    don't try to change your voice