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

Поделиться
HTML-код
  • Опубликовано: 4 ноя 2024

Комментарии • 183

  • @fliplucky8813
    @fliplucky8813 2 года назад +173

    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 5 месяцев назад

      @@MUSHIN_888 any resources you might share?

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

    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.

  • @Anarki9891
    @Anarki9891 2 года назад +23

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

    • @JamesQQuick
      @JamesQQuick  2 года назад +2

      Yeah that’s a great idea!

  • @mbaljeetsingh
    @mbaljeetsingh 2 года назад +6

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

  • @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 8 месяцев назад

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

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

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

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

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

  • @chadtarpey2578
    @chadtarpey2578 2 года назад +2

    Awesome James . Love the oil change analogy .

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

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

    Thanks. Very nicely explained! Got it.

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

  • @Rahuldhingra-nx3vm
    @Rahuldhingra-nx3vm 5 месяцев назад

    Brilliant explanation! Efficiency at its best 👌🏻

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

    Nice and easy walkthru. Thx so much

  • @Bellathor
    @Bellathor Год назад

    Thanks, I needed a refresher. Great video.

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

  • @inversionero
    @inversionero Год назад +2

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

  • @oncoding4520
    @oncoding4520 Год назад

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

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

    understood in the first 10 seconds thanks

  • @henrimiessan3881
    @henrimiessan3881 16 дней назад

    thank you it was really helpful

  • @abiddeveloper1
    @abiddeveloper1 Год назад

    that was quick, and quickly you have a subscriber.

  • @haroldtien2213
    @haroldtien2213 Год назад

    thanks for precise explain, only one that make me understand

  • @rccmhalfar
    @rccmhalfar 2 года назад +3

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

  • @JuanMontes-xo4th
    @JuanMontes-xo4th Год назад

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

  • @alessandrogiuzio
    @alessandrogiuzio 2 года назад +1

    Thank you James!

  • @ragnar_9083
    @ragnar_9083 Год назад

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

  • @morecoredesigner
    @morecoredesigner 2 года назад +1

    Thanks James great video.

  • @travelnlearn
    @travelnlearn Год назад

    very nice effective & efficient video

  • @SirGuacJulio
    @SirGuacJulio Год назад

    This helped me a lot you explain things fantastically!

  • @RohitGorain-xo7du
    @RohitGorain-xo7du 4 месяца назад

    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

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

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

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

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

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

  • @klaudiadev
    @klaudiadev Год назад

    excellent explanation! 👏🏽

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

  • @techlightdev
    @techlightdev Год назад

    So nice, Thank you for tutorial

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

  • @charlesE89
    @charlesE89 Год назад

    Fantastic explanation, thank you!

  • @hristopisarev1827
    @hristopisarev1827 2 года назад

    Very simple and well explained. Thank you!

  • @navinduabhishek8564
    @navinduabhishek8564 Год назад

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

  • @filip23128
    @filip23128 Год назад

    Thanks James!

  • @ericcrowell9493
    @ericcrowell9493 2 года назад +1

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

  • @fargoflagrant7796
    @fargoflagrant7796 Год назад +1

    Thank you!

  • @andruvasiliu7036
    @andruvasiliu7036 Год назад +1

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

  • @rmiliming
    @rmiliming Год назад

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

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

  • @ravish8620
    @ravish8620 Год назад

    Really this is helpfull. Thank you

  • @willyhorizont8672
    @willyhorizont8672 2 года назад +1

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

  • @Douwnuts07
    @Douwnuts07 Год назад

    thanks. greetings from ph

  • @oussamaguezguez6090
    @oussamaguezguez6090 Год назад

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

    • @JamesQQuick
      @JamesQQuick  Год назад

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

  • @boristheblad
    @boristheblad 2 года назад

    Thanks for the video

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

    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.

  • @231-o5m
    @231-o5m 2 года назад

    very clear,wonderful!!

  • @jonathanrafaelpetitrojas9949
    @jonathanrafaelpetitrojas9949 2 года назад +1

    Excelente video, claro y al punto! 💪💪

  • @khalidelgazzar
    @khalidelgazzar 2 года назад

    Great video .. thanks 😃👍

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

    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?

  • @rajeshpoddar5763
    @rajeshpoddar5763 2 года назад +1

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

  • @bucifalro
    @bucifalro 2 года назад +1

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

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

  • @kigler43
    @kigler43 2 года назад

    thank you, cool video

  • @francsicozuniga3721
    @francsicozuniga3721 Год назад +1

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

  • @firosiam7786
    @firosiam7786 Год назад

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

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

    thanks so much!!

  • @jonathanrafaelpetitrojas9949
    @jonathanrafaelpetitrojas9949 2 года назад +5

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

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

  • @scottumphrey1769
    @scottumphrey1769 Год назад

    Very goo video. Thanks. S-

  • @sanjitjena4954
    @sanjitjena4954 Год назад

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

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

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

    Which font are you using?

  • @crust5532
    @crust5532 2 года назад +5

    Can anyone tell me the VS code theme used here?

  • @sayedmuzahid4451
    @sayedmuzahid4451 2 года назад +1

    excellent 🔥

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

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

  • @coffeecode
    @coffeecode 2 года назад +1

    Pretty cool !

  • @meysythet9092
    @meysythet9092 Год назад

    What name of background theme you use

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

    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

  • @oussamahamdi6993
    @oussamahamdi6993 2 года назад +2

    1, 3, 2 because of the event loop

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

    Can i know the theme you are using in vs code

  • @subiebugeye02
    @subiebugeye02 2 года назад

    I need your help with arrow functions lol please James thx

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

    1, 3, 2 sequence for print of numbers.

  • @nouhabc194
    @nouhabc194 Год назад

    please what is this text editor

  • @cecibenitez3917
    @cecibenitez3917 2 года назад +4

    1, 3 and 2 😊👌

  • @theidanking
    @theidanking Год назад

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

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

  • @tomich20
    @tomich20 2 года назад +1

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

  • @winspyre
    @winspyre Год назад

    you explained it in 60 seconds actually.

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

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

  • @derickasane8499
    @derickasane8499 Год назад

    greatone

  • @aingaran_com
    @aingaran_com 2 года назад

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

  • @ejazalam6512
    @ejazalam6512 Год назад

    i understand callbacks in starting 15 sec

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

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

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

  • @reluminopraha5948
    @reluminopraha5948 Год назад

    Lost with those arrows 😢

  • @shaikhyamin3464
    @shaikhyamin3464 2 года назад

    1 ,3 ,2 , if you have knowledge about event loop then you will get this