JavaScript Callbacks Explained in 5 Minutes (Essential for asynchronous code!)

Поділитися
Вставка
  • Опубліковано 18 жов 2024

КОМЕНТАРІ • 181

  • @fliplucky8813
    @fliplucky8813 2 роки тому +170

    1, 3, 2
    it will firstly fire off all the functions from the stack. When the stack is completed, it will go over all the events

    • @nevergonnabesilent
      @nevergonnabesilent 2 роки тому +15

      you win the prize. this is why i love javascript

    • @MUSHIN_888
      @MUSHIN_888 Рік тому +3

      i couldnt understand this until i learnt how the stack worked

    • @kraptastic333
      @kraptastic333 4 місяці тому

      @@MUSHIN_888 any resources you might share?

  • @mbaljeetsingh
    @mbaljeetsingh 2 роки тому +5

    1,3,2
    setTimeout (Web APIs -> Task Queue -> Call Stack (using event loop). It'll only run after the synchronous operation is done.

  • @Anarki9891
    @Anarki9891 2 роки тому +22

    Nice explanation. A video on the different ways to define a function in JavaScript and when they should be used would be helpful.

  • @voicingmymind7517
    @voicingmymind7517 Рік тому +7

    I am coming from the Odin Project. I am still fairly a beginner so I more or less didn't quite understand a lot. I was interested to understand what were call back functions. Will for sure come back later for a deeper dive in functions. I am sure you have a great explanation.

    • @theopogo9159
      @theopogo9159 4 місяці тому

      I feel this. I've been coding for 4 months and my mentor pushed me to this topic. I am way over my head and need to go back for some fundamentals practice

  • @hamidturkistani734
    @hamidturkistani734 7 місяців тому

    I have never learned a programming concept just in 12 seconds. Keep up the good work James.

  • @avinashpanditi467
    @avinashpanditi467 2 місяці тому

    This is the best video i have ever seen on the callback functions. I am struggling to understand on the callback functions till date and this video made my day. Thank you so much for making this amazing content.

  • @nevergonnabesilent
    @nevergonnabesilent 2 роки тому +7

    I love how succinctly you explain things. Instead of using a bunch of terms that only advanced developers understand. You're meat and potatoes when it comes to teaching. Keep it up!

  • @inversionero
    @inversionero Рік тому +2

    What theme are you using in your VSCode?
    It's so clean to see.

  • @Mr.PolyMath
    @Mr.PolyMath Рік тому +5

    excellent video mate!! bitesize knowledge for JS is so much more useful than sitting through anything longer where the person starts to waffle. Your examples are great too and extremely well scaffolded!!

  • @perminusgaita
    @perminusgaita Рік тому +1

    The mechanic example made me understand everything really fast. Thank you 🙂

  • @thebarnold7234
    @thebarnold7234 Рік тому +1

    This is actually really useful. Helped me understand my really weird bug when developing a chrome extension

  • @rheavictor7
    @rheavictor7 7 місяців тому

    Thanks for the lesson, you have a gift of being concise and provide valuable information!

  • @chadtarpey2578
    @chadtarpey2578 2 роки тому +2

    Awesome James . Love the oil change analogy .

  • @tommih86
    @tommih86 9 місяців тому +1

    Thanks. Very nicely explained! Got it.

  • @psaintjean11
    @psaintjean11 3 місяці тому

    Very well explained for beginners like myself. This is very useful. Thank You for sharing.🎉🎉

  • @Rahuldhingra-nx3vm
    @Rahuldhingra-nx3vm 4 місяці тому

    Brilliant explanation! Efficiency at its best 👌🏻

  • @jmvialopez
    @jmvialopez 2 роки тому +3

    I couldn't understand the concept of cb function even watching videos in my language (spanish), your explanation was definetely the best by far. Thank you very much

  • @rccmhalfar
    @rccmhalfar 2 роки тому +3

    Hi James definetly would be nice to have a 5min video on es6 arrow functions

  • @Bellathor
    @Bellathor Рік тому

    Thanks, I needed a refresher. Great video.

  • @alandmcleod5988
    @alandmcleod5988 3 місяці тому

    Nice and easy walkthru. Thx so much

  • @Softon_tv
    @Softon_tv Рік тому

    I gave you like immediatelly when I saw how easily and well you explain everything and later when I saw pokemon example which I really liked I wanted to give you another like but then I realised I already did it so I gave you subscription. well done ^_^

  • @oncoding4520
    @oncoding4520 Рік тому

    love your content. always a supporter of your content James.

  • @RohitGorain-xo7du
    @RohitGorain-xo7du 3 місяці тому

    1,3,2 cause async tasks are taken care by the event loop, and event loop monitor that the stack should always be empty, if empty then it will take the CB(call back) to stack and callstack will immediately execute the CB

  • @kenzafilali9115
    @kenzafilali9115 2 роки тому

    Just discovered this chanel and I am hitting the subscribe button without any hesitation.. Keep going any tutorial for rest api and react ?

  • @alessandrogiuzio
    @alessandrogiuzio 2 роки тому +1

    Thank you James!

  • @noquadcork
    @noquadcork Місяць тому

    understood in the first 10 seconds thanks

  • @raflyardiansyah4598
    @raflyardiansyah4598 9 місяців тому

    I don't know if you're still answering questions but what kind of vscode theme do you use that looks awesome

  • @dajucoder
    @dajucoder 5 місяців тому

    Hey, please tell me:
    1. What theme are you using for the ide
    2. How does your cursor is blinking such cool way

  • @morecoredesigner
    @morecoredesigner 2 роки тому +1

    Thanks James great video.

  • @SirGuacJulio
    @SirGuacJulio Рік тому

    This helped me a lot you explain things fantastically!

  • @fargoflagrant7796
    @fargoflagrant7796 Рік тому +1

    Thank you!

  • @haroldtien2213
    @haroldtien2213 Рік тому

    thanks for precise explain, only one that make me understand

  • @celsomomade
    @celsomomade 8 місяців тому

    Great tutorial. Thanks
    What's the font are you using?

  • @pjc825
    @pjc825 2 роки тому +7

    Would love to see a practical real world example of why and where you would use Currying, most people always show non real world useless non practical examples. Thanks for all your great videos James 😃 👍

    • @everyhandletaken
      @everyhandletaken 2 роки тому +3

      Just when I re-visit & think I see the purpose of currying, I then forget all about it immediately after not finding a real world use.
      Very much agree

  • @klaudiadev
    @klaudiadev Рік тому

    excellent explanation! 👏🏽

  • @willyhorizont8672
    @willyhorizont8672 2 роки тому +1

    Awesome tutorial James. Would you do make video about nested async callback function too ?

  • @charlesE89
    @charlesE89 Рік тому

    Fantastic explanation, thank you!

  • @navinduabhishek8564
    @navinduabhishek8564 Рік тому

    Thanks a lot!💌 and Could u tell me what theme u use in vs code?😊

  • @JuanMontes-xo4th
    @JuanMontes-xo4th Рік тому

    WOWWWWWWWW! I JUST GOT IT, THIS IS SO POWERFUL!!!!

  • @ericcrowell9493
    @ericcrowell9493 2 роки тому +1

    Great little tutorial! By the way, what font do you use in this video? I really like it!

  • @hristopisarev1827
    @hristopisarev1827 2 роки тому

    Very simple and well explained. Thank you!

  • @techlightdev
    @techlightdev Рік тому

    So nice, Thank you for tutorial

  • @travelnlearn
    @travelnlearn Рік тому

    very nice effective & efficient video

  • @filip23128
    @filip23128 Рік тому

    Thanks James!

  • @kutsoji
    @kutsoji 2 роки тому

    YOURE SO DAMN AMAZING! I mean, its kinda sad that I've saw you for the first time after like 2 years of starting coding but it's worth it anyways, best dev channel, keep it up!

  • @rajeshpoddar5763
    @rajeshpoddar5763 2 роки тому +1

    Can you make project using web worker?
    To understand about using web worker.

  • @tristanlukens7158
    @tristanlukens7158 2 роки тому +1

    iirc the example should log out 1 3 2, since setTimeout() is a macrotask. It's been a while since I delved into async javascript tho

  • @ravish8620
    @ravish8620 Рік тому

    Really this is helpfull. Thank you

  • @abiddeveloper1
    @abiddeveloper1 Рік тому

    that was quick, and quickly you have a subscriber.

  • @Douwnuts07
    @Douwnuts07 Рік тому

    thanks. greetings from ph

  • @boristheblad
    @boristheblad 2 роки тому

    Thanks for the video

  • @Sandervg03
    @Sandervg03 8 місяців тому

    I'm confused, why would you not just use await, for example:
    let result = await someFunction();
    console.log(result)
    Doesn't this achieve the exact same thing?

  • @francsicozuniga3721
    @francsicozuniga3721 Рік тому +1

    Hi, what software are you using in this video to do the actual coding? Can anybody provide me an answer, please

  • @jonathanrafaelpetitrojas9949
    @jonathanrafaelpetitrojas9949 2 роки тому +1

    Excelente video, claro y al punto! 💪💪

  • @rmiliming
    @rmiliming Рік тому

    LOL. You are so humerus ! I get the idea quickly thank you!

  • @bucifalro
    @bucifalro 2 роки тому +1

    how would you make the example behave synchronous, in order to yield 1,2,3 ?

  • @mikehotel5652
    @mikehotel5652 Рік тому

    I like the explanation with the oil change. It would be nice, if the example code resembles the oil change, to transfer this conversation to JS. Anyways. Good explanation.

  • @andruvasiliu7036
    @andruvasiliu7036 Рік тому +1

    If I were you, I would definitely name my two dogs Ekans and Koffing

  • @iliashterev38
    @iliashterev38 9 місяців тому

    James, please help me understand something. It is one last JS weirdness left for me that I can't grasp having strong C# background.
    I will try the simplest example I can think of. So each JS developer say it should be like this:
    function simpleCallbackFn (){}
    function simpleCallerFn (cb){ cb();}
    simpleCallerFn (simpleCallbackFn);
    Why not like this:
    function simpleCallbackFn (){} // Same as before
    function simpleCallerFn (){ simpleCallbackFn ();} // We do not pass a callback, we simply call the it from within. It is within perfectly visible scope.
    simpleCallerFn ();
    We call the "callback" function from within the caller function and to me this should be perfectly fine and achieve the same result.
    Thank you. Greetings from Bulgaria. Well, trying to please you :) . And to be nice.

  • @firosiam7786
    @firosiam7786 Рік тому

    What is difrnce between callbcaks and closures does both simply help put a function within a function

  • @ragnar_9083
    @ragnar_9083 Рік тому

    Liked and subscribed just for the mere fact you like pokemon, too. Great video! thanks!

  • @231-o5m
    @231-o5m 2 роки тому

    very clear,wonderful!!

  • @sanjitjena4954
    @sanjitjena4954 Рік тому

    So unless I don't read the documentation, I cannot know the number and type of the parameters of that callback function.

  • @gooo1762
    @gooo1762 8 місяців тому

    thanks so much!!

  • @kigler43
    @kigler43 2 роки тому

    thank you, cool video

  • @sayedmuzahid4451
    @sayedmuzahid4451 2 роки тому +1

    excellent 🔥

  • @oussamaguezguez6090
    @oussamaguezguez6090 11 місяців тому

    Hello James! the functions loadPokemon how is it asynchronous? is it because fetch is asynchronous ?

    • @JamesQQuick
      @JamesQQuick  11 місяців тому

      Yep the function has to be marked as async because we use await for the async fetch call.

  • @khalidelgazzar
    @khalidelgazzar 2 роки тому

    Great video .. thanks 😃👍

  • @coffeecode
    @coffeecode 2 роки тому +1

    Pretty cool !

  • @subiebugeye02
    @subiebugeye02 2 роки тому

    I need your help with arrow functions lol please James thx

  • @crust5532
    @crust5532 2 роки тому +5

    Can anyone tell me the VS code theme used here?

  • @oussamahamdi6993
    @oussamahamdi6993 2 роки тому +2

    1, 3, 2 because of the event loop

  • @cecibenitez3917
    @cecibenitez3917 2 роки тому +4

    1, 3 and 2 😊👌

  • @tesfamichaelalmaw
    @tesfamichaelalmaw 8 місяців тому

    what kind of theme are you using on your vs code pls?

  • @dhadveyash2268
    @dhadveyash2268 11 місяців тому

    Now i am more confused, cant i just use that callback function directly without calling it as variable in the function

  • @lernkunst6291
    @lernkunst6291 9 місяців тому

    3:05, line 3, does the first (name) needs brackets?

  • @scottumphrey1769
    @scottumphrey1769 11 місяців тому

    Very goo video. Thanks. S-

  • @lukeburghard879
    @lukeburghard879 3 місяці тому

    What is the difference between function foo(){} and let foo = ()=>{}

  • @tharakakarunarathne2420
    @tharakakarunarathne2420 Рік тому

    at 1:40 why did he has to swap the codes? arn't functions run where ever there in javascript? Some one pls explain

  • @meysythet9092
    @meysythet9092 Рік тому

    What name of background theme you use

  • @ayushlalotra1192
    @ayushlalotra1192 9 місяців тому

    Can i know the theme you are using in vs code

  • @rashidanwar101
    @rashidanwar101 10 місяців тому

    Which font are you using?

  • @rean8899
    @rean8899 2 роки тому

    Could you please create video that show how to solve the uncheck runtime.lastError in Chrome and how to turn off Debugger on Chrome as well. It's too annoying.

  • @aryansadh1958
    @aryansadh1958 2 місяці тому

    1, 3, 2 sequence for print of numbers.

  • @nouhabc194
    @nouhabc194 Рік тому

    please what is this text editor

  • @jonathanrafaelpetitrojas9949
    @jonathanrafaelpetitrojas9949 2 роки тому +5

    I learned more in this video about callbacks than in 2 semesters of computer science... Thank you so much!!

  • @jonathanrafaelpetitrojas9949
    @jonathanrafaelpetitrojas9949 2 роки тому

    Me encantaría una lista de reproducción sobre cómo consumir apis. con este tema y otros en los que un principiante suele luchar

    • @JamesQQuick
      @JamesQQuick  2 роки тому +1

      Ah buena idea! Yo la anadire al “backlog” :)

  • @winspyre
    @winspyre Рік тому

    you explained it in 60 seconds actually.

  • @theidanking
    @theidanking Рік тому

    I still didnt understand how does cb() work, what is it doing

  • @tomich20
    @tomich20 2 роки тому +1

    great, now please add the async await in all that stuff. Cause thats what makes it confusing to new developers.

  • @derickasane8499
    @derickasane8499 Рік тому

    greatone

  • @aingaran_com
    @aingaran_com 2 роки тому

    As a dad joke connaisseur, I appreciate your similary cheesy intro jokes.

  • @richk5015
    @richk5015 7 місяців тому

    1,3,2, even with setTimeout 0 it'll be 1,3,2

  • @reluminopraha5948
    @reluminopraha5948 Рік тому

    Lost with those arrows 😢

  • @md.mohaiminulislam9618
    @md.mohaiminulislam9618 Рік тому

    why couldnt we just call the function instead of passing it as an argument, we get access to functions any way

  • @Farid-Khan
    @Farid-Khan 4 місяці тому

    Output:
    1
    3
    2

  • @nihadkv303
    @nihadkv303 2 роки тому +1

    ♥️♥️♥️

  • @gkugathas
    @gkugathas Рік тому

    1,3 and 2

  • @ejazalam6512
    @ejazalam6512 Рік тому

    i understand callbacks in starting 15 sec

  • @syedarmaghanhassan4652
    @syedarmaghanhassan4652 Рік тому

    Excellent example in the beginning.. just too fsst later.. 😅

    • @JamesQQuick
      @JamesQQuick  Рік тому +1

      Ah sorry to hear that. Thanks so much for the feedback!