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

Поделиться
HTML-код
  • Опубликовано: 6 июн 2024
  • Check out my web development courses here 🔥
    developedbyed.com/
    🛴 Follow me on:
    Twitch: / developedbyed
    Twitter: / developedbyed
    Instagram: / developedbyed
    Github: github.com/developedbyed/
    #programming
  • НаукаНаука

Комментарии • 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!

  • @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 👍🏻🔥

  • @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!

  • @RychAhlberg
    @RychAhlberg 9 месяцев назад +3

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

  • @gambomaster
    @gambomaster 11 месяцев назад +36

    Thanks again my gorgeous teacher on the internet. 🙏

  • @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.

  • @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!

  • @maherylala2153
    @maherylala2153 11 месяцев назад

    Really waited for that one from you, 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! 😄

  • @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

  • @ichiroutakashima4503
    @ichiroutakashima4503 11 месяцев назад +1

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

  • @enigmaSpy
    @enigmaSpy 11 месяцев назад

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

  • @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

  • @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.

  • @aftonlawver3827
    @aftonlawver3827 11 месяцев назад

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

  • @DawFa10
    @DawFa10 11 месяцев назад

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

  • @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? ❤

  • @user-tl5js5ow3d
    @user-tl5js5ow3d День назад

    This is the first RUclips 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.

  • @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.

  • @paulthomas1052
    @paulthomas1052 11 месяцев назад

    Great demo and explanation. Cheers !

  • @testingBuyer
    @testingBuyer 4 месяца назад

    wonderful and precise tutorial ,wins a subscription

  • @ways.
    @ways. 2 месяца назад

    this is my new favorite channel

  • @cmdrTremyss
    @cmdrTremyss 11 месяцев назад

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

  • @diganta64
    @diganta64 6 месяцев назад

    One of the best session watched..:)

  • @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😅

  • @anandumdharan6283
    @anandumdharan6283 11 месяцев назад +1

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

  • @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 :)

  • @deepanshusharma9311
    @deepanshusharma9311 11 месяцев назад

    WOW🤩 Very nice Explanation

  • @hiafraan
    @hiafraan 6 месяцев назад

    Thank you for the great explanation! ❤️

  • @kimhwanhoon
    @kimhwanhoon 11 месяцев назад

    Love it thank you so much man!

  • @mostafakheder7721
    @mostafakheder7721 11 месяцев назад

    Nice work , I believe this episode is great

  • @user-kb4le4me2d
    @user-kb4le4me2d 6 месяцев назад

    Thank you! Good and useful content 😎

  • @deepakroy3459
    @deepakroy3459 10 месяцев назад +1

    I am telling you,This guy is a GEM❤

  • @momomadi2
    @momomadi2 7 месяцев назад

    nice explanation -- thanks bro

  • @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?

  • @KaiaLoken
    @KaiaLoken Месяц назад

    Thank you for this

  • @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?

  • @endritibra4351
    @endritibra4351 11 месяцев назад

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

  • @ahmadbilalfarooqi5731
    @ahmadbilalfarooqi5731 11 месяцев назад

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

  • @ashmitsharma9096
    @ashmitsharma9096 10 месяцев назад +1

    Correction: 9:36 CallStack works on LIFO and Callback queue works on FIFO.
    ⚠Warning Your this video is now obsolete:
    ruclips.net/video/_8gHHBlbziw/видео.html&t

  • @chaimaegrich4510
    @chaimaegrich4510 7 месяцев назад

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

  • @vinci-g
    @vinci-g 9 месяцев назад +1

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

  • @nickveldkamp5396
    @nickveldkamp5396 11 месяцев назад

    Do u create also a video about Axios ;) ?

  • @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 RUclips videos using RTL, Vitest for unit and integration and Cypress for E2E testing

  • @joshuamackinnon1250
    @joshuamackinnon1250 11 месяцев назад

    Great video!

  • @JohanDeGroot1982
    @JohanDeGroot1982 11 месяцев назад

    THANK YOU!!!

  • @parsina4971
    @parsina4971 7 месяцев назад

    thanks pal❤❤

  • @jayaprakash_dev
    @jayaprakash_dev 8 месяцев назад

    do the web APIs run in different threads?

  • @CalmConcept
    @CalmConcept 11 месяцев назад

    Are you using an OLED tv as a monitor?

  • @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

  • @nasratt
    @nasratt 11 месяцев назад

    What is that VSCode theme? anyone knows?

  • @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.

  • @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!

  • @getrogo4474
    @getrogo4474 9 месяцев назад +1

    7:56 caught me off guard hahahahahaha

  • @es2cs
    @es2cs 11 месяцев назад +1

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

  • @chhavimanichoubey9437
    @chhavimanichoubey9437 11 месяцев назад

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

  • @aps69
    @aps69 11 месяцев назад

    Add those chapters Ed

  • @juliensavary
    @juliensavary 11 месяцев назад

    worker threads are changing the single threaded nature of js

  • @Pareshbpatel
    @Pareshbpatel 11 месяцев назад +2

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

  • @vanshshah7781
    @vanshshah7781 9 месяцев назад

    Amazing

  • @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

  • @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

  • @morale3056
    @morale3056 11 месяцев назад

    Damn! Nice and easy!

  • @vitaminprutin8217
    @vitaminprutin8217 11 месяцев назад

    loved it

  • @srikarravoori124
    @srikarravoori124 4 месяца назад

    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!

  • @Kuramas_Chakra
    @Kuramas_Chakra 8 месяцев назад +1

    Microsoft's True Intention Leaked at 7:18 !

  • @andrewSantosMaia
    @andrewSantosMaia 9 месяцев назад

    You re really funny!

  • @Antonio-yn4mb
    @Antonio-yn4mb 10 месяцев назад +1

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

  • @zeusor
    @zeusor 8 месяцев назад

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

  • @TJPBataller
    @TJPBataller 3 месяца назад

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

  • @anony88
    @anony88 11 месяцев назад

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

  • @gorkemtr
    @gorkemtr 11 месяцев назад

    thks, take care of your health

  • @TUSHARMORE_09
    @TUSHARMORE_09 13 дней назад

    Thanks! to Gorgeous teacher on internate 💝❤

  • @manshulduggal5482
    @manshulduggal5482 10 месяцев назад

    2:30

  • @G9tvlivenews
    @G9tvlivenews 11 месяцев назад

    🎉

  • @MaxenGaynier28
    @MaxenGaynier28 11 месяцев назад

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

  • @Rashik25
    @Rashik25 11 месяцев назад

    😊 Awesome

  • @naczelnypsycholog6296
    @naczelnypsycholog6296 11 месяцев назад +1

    love the sweater❤, no homo

  • @dennisbelio6470
    @dennisbelio6470 11 месяцев назад

    👏👏👏

  • @user-ob7ht2ld9b
    @user-ob7ht2ld9b 11 месяцев назад

  • @pfcokelly
    @pfcokelly 11 месяцев назад +1

    Tik tok, times up MFer. Great lesson!

  • @user-mo1qs8kl5o
    @user-mo1qs8kl5o 11 месяцев назад

    7:43 --> *ms

  • @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 ;) !

  • @singingrockstar9698
    @singingrockstar9698 9 месяцев назад +1

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

  • @consoledoterror971
    @consoledoterror971 11 месяцев назад

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

  • @aadarshverma6913
    @aadarshverma6913 3 месяца назад

    theon gratjoy

  • @salotspread
    @salotspread 3 месяца назад

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

  • @germantoenglish898
    @germantoenglish898 11 месяцев назад

    Don't forget about the Swedish and Norwegians 😉

  • @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 ;)

  • @nishantpatil1632
    @nishantpatil1632 11 месяцев назад

    keep eye on health buddy...

  • @anshvashisht8519
    @anshvashisht8519 8 месяцев назад

    can i get the source code for this video?

  • @98f5
    @98f5 11 месяцев назад

    is this stuff really considered advanced?

  • @shantanusingh1281
    @shantanusingh1281 2 месяца назад

    timesup mf 🤣🤣

  • @sendmeabouquet
    @sendmeabouquet 11 месяцев назад

    🆒🆒🆒

  • @kirtxn_
    @kirtxn_ 7 месяцев назад

    💕💕✅✅

  • @fireworks6795
    @fireworks6795 7 месяцев назад

    don't try to change your voice