Tap to unmute

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

Share
Embed
  • Published on Feb 12, 2026
  • JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”.
    We say things like “don’t block the event loop”, “make sure your code runs at 60 frames-per-second”, “well of course, it won’t work, that function is an asynchronous callback!”
    If you’re anything like me, you nod and agree, as if it’s all obvious, even though you don’t actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn’t all that easy, so let’s learn!
    With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs.
    Transcript: 2014.jsconf.eu/...
    License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.

Comments •

  • @sumanyusoniwal5194
    @sumanyusoniwal5194 Year ago +943

    9 years later, and this is still pure gold.

  • @syedmuhammadibtisam441
    @syedmuhammadibtisam441 2 years ago +813

    He understood it in 18 months, for me it took 26 minutes, that is how much he helped me, really appreciate it. Time is all you have. Thank you man!!!

  • @marios2liquid
    @marios2liquid 11 years ago +4402

    This talk is the perfect example of "If you can't explain it simply, you don't understand it well enough". Well done Philip.

    • @MehdiRaash
      @MehdiRaash 6 years ago +15

      That's quit simple!

    • @jepalv23
      @jepalv23 6 years ago +4

      agreed

    • @gopalgplus
      @gopalgplus 6 years ago +2

      Agreed!

    • @pastuh
      @pastuh 6 years ago +14

      CS50 teacher explains very well too.. Sometimes i'm worried he will forget to breath..

    • @seongamkim4834
      @seongamkim4834 5 years ago

      That sounds wonderful.

  • @BURN-ADDiCT
    @BURN-ADDiCT 3 years ago +136

    "I did not do a computer science degree, so these words... they're words"
    I relate so so deeply with that

  • @apoorvasa1026
    @apoorvasa1026 3 years ago +1852

    Today I had interview and was asked about execution context and i explained him based on this video. my interviewer was so impressed with the my answer. he said "This is the best explanation i have heard so far". made my day 🙂

  • @AndreOliveira-vq7iv
    @AndreOliveira-vq7iv 7 years ago +504

    13:45
    "The event loop job is to look at the stack and look at the task queue. If the stack is empty, it takes the first thing on the queue and pushed it on to the stack."

    • @mementomori8856
      @mementomori8856 5 years ago +2

      what if there's multiple tasks in the queue ... and they'll get done in some order ... doesn't that make it a sync-function of it's world??

    • @mementomori8856
      @mementomori8856 5 years ago +1

      never mind ...

    • @khaledelnagar4135
      @khaledelnagar4135 4 years ago +61

      @mementomori8856 it's async for you as a developer, but at the end, there has to be a queue for that poor single thread... serverless is serverless for you but at the end there has to be a server to run your code!

    • @viridianite
      @viridianite 3 years ago

      @khaledelnagar4135 This makes no sense

    • @kaelon9170
      @kaelon9170 3 years ago +7

      @viridianite It does make sense, but only if you have some basic working knowledge or better on how multithreading works, and the fact that JS is still a single-threaded language despite supporting asynchronous code.

  • @ttChopper007
    @ttChopper007 Month ago +2

    it is 2026 and I still come back to this video to relearn about event loop lol

  • @sunmustbedestroyed
    @sunmustbedestroyed 11 years ago +1505

    I like this guy. He's so humble and explains things with such clarity - an for a universal audience. That's no easy feat.

  • @R3fuge
    @R3fuge 4 years ago +127

    8 years ago and this is still my favorite explanation of the event loop. Brilliant communication.

  • @luciferonetwothree2030
    @luciferonetwothree2030 7 years ago +1455

    watching this in 2019, and it is still the best source to learn JS event loop.

  • @nathancovey
    @nathancovey Year ago +43

    Came here from the Odin Project. This video is gold

    • @saprilontylastname9928
      @saprilontylastname9928 11 months ago +3

      Damn is there few of us under this video. I guess not that many keep going for so long.

    • @YonatanFisuhuAdhanom
      @YonatanFisuhuAdhanom 9 months ago +3

      I came from TOP too

    • @panwilku6146
      @panwilku6146 6 months ago +1

      TOP here as well

    • @Thanos-hp1mw
      @Thanos-hp1mw 4 months ago

      TOP here, second time. I have reached the backend part so this is the 2nd time I am asked to watch it 😅

  • @ketchup_coffee
    @ketchup_coffee 2 years ago +5

    You know this is the best video when content creators link this video and call it as the "best explanation for event loops".

  • @Hariharan-sh6bo
    @Hariharan-sh6bo 2 years ago +14

    Graduated in 2015, worked in JS alone for 4+ years, discovered this only today! Thank you

  • @thedevcyclist
    @thedevcyclist 9 years ago +610

    Best event-loop explanation ever .... !!!

    • @johannbauer2863
      @johannbauer2863 6 years ago +7

      What about Jake Archibalds explanation?

    • @abhishekchetani2468
      @abhishekchetani2468 Year ago +1

      @johannbauer2863 yeah, that one helped me to learn about the missing Microtasks queue of Promises/Await since they came later in ES!!

  • @techcraftden
    @techcraftden 3 months ago +4

    Even after 11 years, it’s still amazing. Thank you, Philip Roberts!

  • @djkater
    @djkater 9 years ago +794

    the gareth bale of js!

  • @yanisoulhaci3369
    @yanisoulhaci3369 9 months ago

    10 years later, and this conference is still gold for developers!

  • @nadiar.syaripul
    @nadiar.syaripul 10 years ago +846

    this video changed my life,.. great

  • @element3663
    @element3663 5 years ago +64

    This gave me a breakthrough moment in realizing how async JS actually works. Really good talk.

  • @c3eb4
    @c3eb4 6 years ago +252

    i can't even express how much i appreciate this video. i watch it every couple of months as a refresher. and encourage my team to do the same.

  • @juangallardo7404
    @juangallardo7404 3 months ago +1

    Here I am 11 years later and this is still useful af!

  • @andriciandu
    @andriciandu 6 years ago +310

    For videos like this, youtube should implement a multi-thumbs-up system.

    • @RockDavid
      @RockDavid 6 years ago +5

      They already do, how else you think Fake news is so "Popular" these days

    • @coldblackice
      @coldblackice 4 years ago +1

      @RockDavid I think you misunderstood what he was meaning.

    • @sarthaktyagi0447
      @sarthaktyagi0447 Year ago

      @coldblackice I think you misunderstood what he was meaning.

    • @sheepcommander_
      @sheepcommander_ Year ago

      @RockDavid ?????????

  • @sayori3939
    @sayori3939 Year ago +1

    those last examples were really mind blowing

  • @manasgupta_xyz
    @manasgupta_xyz 9 years ago +85

    This guy just cleared the stack for my callback queue of understanding javascript to execute.
    Great explanation.

    • @Nadrioc
      @Nadrioc 5 years ago

      @xxicenturyfuck1195 He mentions he used Keynote, which is the powerpoint for Apple software. There a ton of tutorials online showing how to do animations

  • @Mindphaser1
    @Mindphaser1 5 years ago +2

    For anyone interested: the audio snippet at the beginning of the video is Ellen Allien - Sensucht. I recognized that track right away.

  • @guilhermeferreirabr
    @guilhermeferreirabr 4 years ago +9

    Funny how many "senior" JS devs think that they are clever AF because they interview you with this kind of questions but, in here, he managed to explain so clearly these concepts that destroy all the "mystery" of these guys intelligence ...
    What an awesome explanation! Simple and sharp!

  • @MegaDevilsdad
    @MegaDevilsdad 2 months ago

    i come back to this everytime i start interviewing again

  • @xtraglitch
    @xtraglitch 2 years ago +3

    2 mins into the video i thought let me skip this but then i watched it fully and now i am glad that i did

  • @baltazarus3307
    @baltazarus3307 10 months ago

    Philip nailed it. 10 years later and it still explains well

  • @e.b.7568
    @e.b.7568 Year ago +3

    I watch in 2024, April 1st, sleepless night...

  • @pankajthapaliya2336
    @pankajthapaliya2336 7 months ago

    I just love keep coming back to this video time and again

  • @jonsanders2069
    @jonsanders2069 7 years ago +24

    I've returned to this video several times to engrain the concept of the event loop in my head. It's so clearly explained and so useful. Thanks so much for making it!

  • @parveznawaz99
    @parveznawaz99 Year ago

    Philip describes the event loop mechanism in a perfect way. Lots of love and respect.

  • @MelMacaluso
    @MelMacaluso 7 years ago +11

    Genius talk, seriously. Not hiding behind many fancy technicalities and being able to still convey high-level concepts and make them understandable is surely not an easy skill. Props!

  • @mohanant7557
    @mohanant7557 3 years ago

    Still coming back to the video when I have an interview scheduled around the corner

  • @hraynaud
    @hraynaud 10 years ago +25

    This is by far one of the best presentations on any programming concept I've ever seen. Absolutely brilliant. Thank you!!

  • @shafiqkhandwani5474
    @shafiqkhandwani5474 8 months ago

    This is the best example of event loop. You have made it so simple to understand.

  • @EnzuccioGameplays
    @EnzuccioGameplays 5 years ago +3

    This is better than anything any professor have ever done to explain anything to me in university.

  • @node-ks
    @node-ks 2 months ago

    Ive been a dev for years and this explanation was by far the best and clearest out there. fire. thank you!

  • @okikiolaosunronbi
    @okikiolaosunronbi 3 years ago +3

    This has to be one of the best explanations out there about the event loop.

  • @mdmobasshir595
    @mdmobasshir595 2 years ago +1

    8 years down the lane for this video, current in year 2023. Buffering through many videos on event loop still find this one the best. The energy of this man...can feel it on screen as well. Wish i could attend his session once in my life in person.

  • @braunbaerhh
    @braunbaerhh 4 years ago +3

    7 years later some things have changed. Now we have service workers in a seperate thread. And we have await/async functions. But yes, this talk makes the things clearer to understand. thank you!

  • @LastWordSword
    @LastWordSword 3 years ago

    In 2022, this video was recommended to me, and I feel fortunate.

  • @maximpekarsky7266
    @maximpekarsky7266 4 years ago +5

    This was my introduction to great conference talks, and, I really believe, one of the experiences that turned me from hobbyist to developer.

  • @Shade-ox
    @Shade-ox 3 months ago

    This is pureee diamond talk at conf!!! Really cool, how deep are those insights are! Happy Coding

  • @sushilkumartechy
    @sushilkumartechy 8 years ago +115

    thanks @Philip Roberts first time I completely understand event loop :). If you have some other video on js please share.

  • @ismoilshokirov
    @ismoilshokirov 3 years ago

    8 years have passed, but this explanation seems to me the best on youtube

  • @Josematube
    @Josematube 9 years ago +233

    Great explanation.

  • @manassrivastava6452
    @manassrivastava6452 2 years ago

    One of the greatest talk on event loops that I came across

  • @rameshwari
    @rameshwari 5 years ago +40

    Wow... amazing lecture. The way he is explaining is great. I wish a whole JS course should be taught by him.

  • @prashantchauhan6591
    @prashantchauhan6591 3 years ago +1

    watching this in 2022 and still one of the best resource to learn JS event loop.

  • @TheHolyReality
    @TheHolyReality 9 years ago +167

    Interesting how no textbooks mention this stuff wich in my opinion is crucial in understanding core javascript and especially closures (especially when every example on closures out there contains *for* loop with setTimeout and never explains or even mentions event loop and why does *for* loop first finish its iterations and then invokes setTimeout callbacks)

    • @ihateslowcars
      @ihateslowcars 9 years ago +7

      I just made the connection with what you're saying! It finally makes sense!

    • @johnb1391
      @johnb1391 8 years ago +28

      What he means is that a very common practice question given to novices to see if they understand closures is the following:
      const arr = [0,1,2,3];
      for (var i = 0; i < arr.length; i++) {
      setTimeout(function() {
      console.log('index ' + i + ', value: ' + arr[i]);
      }, 3000);
      }
      //Prints 'index 4, value: undefined'
      The issue here is that because var is function scoped and not block scoped, i will break out of the loop when it hits the value 4 (as i will now equal arr.length, breaking the test of the for loop). As index 4 is out-of-bounds, it returns undefined as the value for arr[4]. Closures via something like the let keyword mitigate this problem, however. So the test in question is to see whether or not the novice understands the issues of closure with var versus the new block-level variable definers: let and const.

    • @raulnoheagoodness
      @raulnoheagoodness 7 years ago +2

      Javascript: The Good Parts by Doug Crockford explains closures very well. Also function-orientation. Other core JS lang features, but not the event loop.

    • @stormwarrow
      @stormwarrow 6 years ago +12

      @johnb1391 Or maybe a less granular way to explain it is: once the for loop is done setting up the setTimeout callbacks, it is finished, and the variable is at its final value of 4. Meanwhile the callbacks run for 3 seconds each, and they are still active - when they print the value of i, it is always 4 (unexpected). You can create closures around the timeout function value to keep the value of i as it was when the callback was created, by either passing it to a function outside of the loop to create the callback, or just making that setTimeout function an IIFE - immediately invoking it creates the closure while the i is still at its iterative value.
      Well I guess that was more words lol. Is there any simple way to explain closures?

    • @boliussa
      @boliussa 6 years ago

      @stormwarrow thanks that's a great explanation,, can you include some code examples for "You can create closures around the timeout function value to keep the value of i as it was when the callback was created, by either passing it to a function outside of the loop to create the callback, or just making that setTimeout function an IIFE "?

  • @argav304
    @argav304 3 years ago

    Some explanations are so good that you understand the concept crystal clear. It really sticks with you, thank you.

  • @CodeSynergy
    @CodeSynergy 2 years ago +3

    oh, that was in 2014 and I thought it is the latest talk, amazing!

  • @4ndrs_dev
    @4ndrs_dev 2 years ago

    I love this talk so much. Can't help but keep coming to watch again every few months.

  • @inordirections
    @inordirections 4 years ago +7

    I've been watching some interviews and mocks preparing for my own, and people nebulously reference 'the event loop' and single-threadedness very often, like "How does X work?" "ahh, the event loop", but more in a buzzword way than as an explanation, so thank you for this video. It was super helpful

  • @TheCrazyfunkstar
    @TheCrazyfunkstar 3 years ago

    Even 8 years later this is an incredible talk.

  • @chunkyChunkMTL
    @chunkyChunkMTL 6 years ago +5

    This is by far the most informative and accessible talks about asynchronous functionality in JavaScript. Thanks, Philip, for showing us the light.

  • @kikevanegazz325
    @kikevanegazz325 3 years ago +1

    There are really no words to say how great this talk was. Amazingly clear, fun, and straight to the point.

  • @agusmoles
    @agusmoles 6 years ago +26

    2019 and this is still awesome. Great explanation!

  • @jacobpjohnson
    @jacobpjohnson 4 years ago

    love how the logo covers bits of code when i'm trying to understand

  • @carlellis9647
    @carlellis9647 5 years ago +6

    This is one of the best lectures on JavaScript that I've seen anywhere. Phillip does a great job of using visualization to explain some of the more complicated aspects of JavaScript programming while making it look easy. That's truly commendable.

  • @shivkojha
    @shivkojha Year ago

    this video is pure gold. thank you philip for creating the tool and this video.

  • @navaneethagastya
    @navaneethagastya 11 years ago +27

    Really, Amazing talk, bro! :)
    Once I came up across a scenario where calling a function, say "func()" did not work rather, setTimeout(func, 0) worked!
    Now, I understood the reason completely!! :)

  • @EmrahIsovic
    @EmrahIsovic Year ago

    I haven't heard such a good explanation in a long time.

  • @DecaSpace
    @DecaSpace 9 years ago +25

    The intro music tho.... I turned off the lights and got my glowstick game on. He's amazing. It was an excellent video. My ADHD did not kicked in ever while watching it. 10/10. Will buy again.

  • @techiliousgyan2997
    @techiliousgyan2997 9 months ago

    My word this is Gold. Thank You Roberts.

  • @manojmj5479
    @manojmj5479 7 years ago +15

    This video is life-changing! Thank you for this, Philip! It takes great understanding to explain complex things in simple ways. And thank you for not gatekeeping - we need more people to come into tech and videos like this make sure that even noobs understand and can work with seemingly hard concepts!

  • @justadev____7232
    @justadev____7232 5 years ago +1

    Mind blown!!!!! The lightbulb just turned on. THANK YOU!!!!!!

  • @AshokDey
    @AshokDey 8 years ago +36

    It's the first time I'm giving a comment in 7 years. This guy did such a great presentation. It was fantastic. Such a complex topic broken down into small lucid chunks ! Great work.

    • @Martinit0
      @Martinit0 3 years ago +6

      Puh, hey I'm your callback. Why did you queue me with 5 years delay?

  • @baludatty7764
    @baludatty7764 Year ago +1

    This is called pure skill. Awesome man !

  • @JoseSotoCanHelp
    @JoseSotoCanHelp 11 years ago +10

    When I watched this video, I knew it would prove useful for my work. Less than a month later, it happened. Thank you for the great presentation!!

  • @blakesim7827
    @blakesim7827 4 years ago

    god I watched this video a year ago and now finally understood how it works. that loop simulation really helped.

  • @syedbaryalay5849
    @syedbaryalay5849 7 years ago +4

    worth every second, watching it the second time.

  • @fearquare
    @fearquare 4 months ago

    I loved every second of this presentation!

  • @sethfeingold
    @sethfeingold 6 years ago +5

    This will no doubt remain a fantastic presentation well into 2020 and beyond. Thank you, Philip!

  • @tiennguyen-pz6ie
    @tiennguyen-pz6ie 6 years ago

    sometime i still rewatch this, still a good thing after working with js for over 2 years

  • @rubenfranco7690
    @rubenfranco7690 6 years ago +9

    Omg when did Gareth Bale started to code, this is amazing

  • @idrisawedazubair2562
    @idrisawedazubair2562 2 years ago +1

    I've literally read many articles trying to understand this very well, but now I think I do. His explanation is amazing.

  • @mohammedelhadididi4612
    @mohammedelhadididi4612 5 years ago +3

    This lecture is just a masterpiece

  • @ahemenjeho
    @ahemenjeho 6 months ago

    10yrs ago?!!!! Genius! 🔥

  • @sahilattri51
    @sahilattri51 10 years ago +8

    brilliance! Absolutely stunning. Thank you

  • @PatrikRasch
    @PatrikRasch 2 years ago

    Second time watching this after 9 months, nice refresher. Good stuff.

  • @nosajghoul
    @nosajghoul 11 years ago +123

    @19:18 you can see his history. I found it reassuring that a guy with this level of knowledge still has to look up the syntax for Date(). :-) Great dissection of the event loop.

    • @timeslowingdown
      @timeslowingdown 7 years ago +66

      Good example of why code interviews that just test how well someone has memorized various language apis/functions are an ineffective way to determine the candidate's knowledge :)

    • @lighterinthestorm
      @lighterinthestorm 6 years ago +2

      @timeslowingdown None of those tests actually check if you have those things memorized. All those tests are there to see how you look for the best available solution

    • @timeslowingdown
      @timeslowingdown 6 years ago +10

      @lighterinthestorm Finding the solution to a single function with input and output is very different than writing an entire application or maintaining it, so I beg to differ

    • @kotekutalia
      @kotekutalia 6 years ago +2

      That's why Incognito Mode exists

    • @theshermantanker7043
      @theshermantanker7043 5 years ago +3

      Remembering the correct parameters for a function in a library is not a prerequisite for being a good developer, in the same way that needing a calculator in a math exam doesn't mean you're cheating. If you like calculating or memorising sure go ahead, but if you're lazy it's fine

  • @mrchali-rl8es
    @mrchali-rl8es 4 years ago

    watching this in 2022 and it is still the best source to learn JS event loop

  • @sfgmote
    @sfgmote 10 years ago +9

    came here redirected from async npm package docs... how come i've been doing things without knowing about this? Really useful, Thx

  • @greenbeleleghasim6893

    This is how to do a video tutorial in technical topics. Splendid animations that make you part of the "journey"

  • @juanmanueltoni2506
    @juanmanueltoni2506 11 years ago +7

    Amazing,!! the best and simplest explanation I've seen, thanks

  • @yuliakhitrukhina
    @yuliakhitrukhina 9 months ago

    Soooo basically I watch this video before every interview I have 😅 Ty!

  • @rahulraut1569
    @rahulraut1569 6 years ago +4

    This video has helped me cracking interviews!! Thanks Man!

  • @mdirshath4174
    @mdirshath4174 4 years ago

    Man, I wish I got a teacher like him. First time I understood how JS works. Legend.

  • @gnclmorais
    @gnclmorais 10 years ago +6

    Excellent presentation! 👏👏👏

  • @MEHARAFROZ-ub1hr
    @MEHARAFROZ-ub1hr 2 months ago

    this is still the most appropriate resource to understand Event loop :)

  • @teamworkucla
    @teamworkucla 10 years ago +6

    Well explained! Thank you.

  • @annann-dp8ud
    @annann-dp8ud 2 years ago

    2024 and the video still helps my interview! really appreciate

  • @Мажорвчате
    @Мажорвчате 4 years ago +3

    Рассказ, понятней чем этот мне ни разу не встречались. Спасибо большое за видео и за перевод

  • @roycjwilliams
    @roycjwilliams 3 months ago

    Great video - first time learning this

  • @oksanaserhiivna2634
    @oksanaserhiivna2634 7 years ago +5

    Fantastic explanation!!!

  • @theyoutubeliva
    @theyoutubeliva 2 years ago

    honestly this is the best convo about js runtime ive ever listened. thank you phil!

  • @mbasitbilal
    @mbasitbilal 9 years ago +6

    best explanation ever ! literally