WHAT IS A CALLBACK FUNCTION IN JAVASCRIPT? - Explained with Callback Examples (2020)

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

КОМЕНТАРІ • 116

  • @MikeeE2011
    @MikeeE2011 3 роки тому +24

    Explained simply, covered the practical uses and applications of a Callback Function and broke the subject down and showed variations and the evolution of named, anonymous and arrow functions. You've helped me an incredible amount with just this video. Not often I comment but thank you!

  • @sivaprabha9745
    @sivaprabha9745 3 роки тому +13

    But you didn’t show callback example with initially created functions like taskOne, taskTwo where where taskTwo has to be executed only after taskOne is completed ???

    • @DennisSmdFreefightTrainer
      @DennisSmdFreefightTrainer 3 роки тому

      I was thinking the same. My working code is following:
      const task1 = function(callbackTask2) {
      return function(){
      console.log('task1');
      callbackTask2();
      }
      };
      const task2 = function() {
      console.log('task2')
      };
      setTimeout(task1(task2), 10000);

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

      @@DennisSmdFreefightTrainer
      An easier write would be
      Function task1(callback){
      Alert('task one')
      Callback()
      }
      Function task2(message){
      Alert(message)
      }
      Settimeout(()=> task1(task2('i was called'))

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

    Emeğiniz için teşekkürler, anlaşılması basit ve açıklayıcı bir şekilde sunmuşsunuz...

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

    PERFECT EXPLANATION STRAIGHT TO THE POINT

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

    This is the kind of explanation I like.

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

    a very nice couple of examples. thank you!

  • @pmacc2311
    @pmacc2311 3 роки тому

    Cheers, Cem!!

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

    You made it so simple to understand. Great explanation! Thanks

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

    Thank you mate, you have just helped me to understand the concept perfectly

  • @tiagopatricio7393
    @tiagopatricio7393 4 роки тому +10

    Great stuff! exactly what I was looking for. Thank you!

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

    You did not give the solution to your 1st example. On How to run the task 1 before task 2

  • @danielokolo1432
    @danielokolo1432 3 роки тому +1

    This video just gave me the explanation I needed, thanks alot

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

    thanks, very helpful!

  • @k-c
    @k-c 3 роки тому

    Thank you for your clear explanation.

  • @ahmodshamimhussain9534
    @ahmodshamimhussain9534 3 роки тому

    thank you for explanation in a simpler way

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

    Well explained, thank you!

  • @siegfriedcrypto
    @siegfriedcrypto 3 роки тому

    Great video. Easily Explained. Thanks.

  • @kamsyd13
    @kamsyd13 4 роки тому +1

    This was the easiest way u taught..Thank u so much..!
    Just wanna ask u what's the difference between call back & high order function

    • @cemeygimedia
      @cemeygimedia  4 роки тому

      Thank you :) I don't know either, sorry.

    • @r4hu1gunner
      @r4hu1gunner 4 роки тому

      HOF and Callbacks both are same. :)

  • @AaronM
    @AaronM 3 роки тому +1

    Great. Makes sense, but why does the function need to include the callback parameter in the first place? Why can’t it just be called directly inside the other function?

  • @taheermattur
    @taheermattur 3 роки тому

    Easiest and the best explanation!🙌🏻

  • @venkateshnambi1576
    @venkateshnambi1576 4 роки тому

    best way to explain it awesome !!!

  • @abdelrahmanmahmoud891
    @abdelrahmanmahmoud891 3 роки тому

    Thank you , it was awesome ;

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

    that was soooo clear

  • @shubhamk840
    @shubhamk840 3 роки тому

    Great tutorial man .

  • @tymothylim6550
    @tymothylim6550 3 роки тому

    Thank you very much for this video :) It was helpful for me!

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

    well explained thanks!

  • @jeffreyslominsky7656
    @jeffreyslominsky7656 4 роки тому +1

    Is this correct?
    (1) callback functions can assure functions will be executed in a certain order
    (2) callback functions can be used to attach event listeners to buttons and other various HTML objects

    • @cemeygimedia
      @cemeygimedia  4 роки тому

      Yes, both of them are correct.

    • @jeffreyslominsky7656
      @jeffreyslominsky7656 4 роки тому

      @@cemeygimedia thank you for your lecture and answer. You're a great teacher!

    • @cemeygimedia
      @cemeygimedia  4 роки тому

      You're welcome Jeffrey! Consider subscribing for new videos :)

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

    Eyw usda güzel anlattınız

  • @blganeshguptagupta3993
    @blganeshguptagupta3993 3 роки тому

    Thank you, I like your Explanation

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

    Thank you, great and clear example :)

  • @golamrabbani77175
    @golamrabbani77175 4 роки тому +1

    Very easy to understand. Thank you, Cem!

  • @viktoriiapetrova5801
    @viktoriiapetrova5801 4 роки тому +1

    Great explanation! Thank you!

  • @coderawesome
    @coderawesome 4 роки тому +1

    Excellent explanation!

  • @kolyxix
    @kolyxix 3 роки тому

    great job

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

    very helpful

  • @80Vikram
    @80Vikram 4 роки тому

    Thanks for the video, after reading your FCC article; I've below doubts kindly clarify
    Q 1. In example "function print(callback) {
    callback();
    }"
    >> Is "callback" is keyword ?
    Q 2. One more example from MDN
    function greeting(name) {
    alert('Hello ' + name);
    }
    function processUserInput(callback) {
    var name = prompt('Please enter your name.');
    callback(name);
    }
    processUserInput(greeting);
    >> why can't I use the string "greeting" instead of "callback" in "processUserInput" function ?

    • @cemeygimedia
      @cemeygimedia  4 роки тому +1

      Q1: Callback is not a keyword.
      Q2: Because "callback" is a parameter for the function processUserInput, like the "name" is a parameter too (for the greeting function). Later in this code, the greeting function is being passed as a function argument (in the last line), and it will replace the "callback" parameter. I hope my answer helps...

    • @80Vikram
      @80Vikram 4 роки тому

      @@cemeygimedia TAZ for detailed and simple clarification. Callback is always confusing for the first time

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

    At 2:27 min , how does javascript execute task 2 before task 1. Since , as you said javascript is sequential shouldnt task one be executed then delayed for 2 seconds and then task two be executed? Thanks for help.

  • @arjunr1039
    @arjunr1039 4 роки тому +1

    Is callback function prevent asynchronous?

  • @coderhex1675
    @coderhex1675 3 роки тому

    Herseyi niye bu kadar iyi anladim diyordum ki farkettim ki Türkmüşsün.

  • @alokranjan476
    @alokranjan476 4 роки тому

    Nicely explained.
    Thanks,.

  • @abirmahmud2764
    @abirmahmud2764 3 роки тому

    One question: what is window.unload and why did you have to use that?

    • @Christian-ry3ol
      @Christian-ry3ol 2 роки тому

      Its been 6 months since this question was asked, but if you got the answer i would love to know

  • @AliBaba-hn8tv
    @AliBaba-hn8tv 2 роки тому

    Thank you.

  • @samuelraj7210
    @samuelraj7210 3 роки тому +3

    Well Explained! can you give some more examples on callback function (real-life application examples) thx.

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

      We need answers to this plssss

  • @80Vikram
    @80Vikram 4 роки тому

    I am learning web development and done with HTML, CSS and JS, can you please suggest good live coding tutorial to sharpen these skills ?

    • @cemeygimedia
      @cemeygimedia  4 роки тому +4

      I believe that the best way for learning is coding by yourself rather than watching someone else's live coding. But you can check other youtube channels like traversy media, dev ed and more.

  • @venkatchebrolu2160
    @venkatchebrolu2160 4 роки тому

    Ur explanation is amazing bro plz tell best book for JavaScript and css and html plz

    • @cemeygimedia
      @cemeygimedia  4 роки тому +1

      thank you, i can suggest that you can buy an online tutorial course from udemy or something like that, rather than a book, because you can view it live on a project and code simultaneously :)

    • @venkatchebrolu2160
      @venkatchebrolu2160 4 роки тому

      @@cemeygimedia thank u sir ♥️

    • @venkatchebrolu2160
      @venkatchebrolu2160 4 роки тому

      @@cemeygimedia but tutorial for beginners and not use that much

  • @Viralvlogvideos
    @Viralvlogvideos 3 роки тому

    can u please tell me why foreach loop I defined a callback but the thing is it taking the parameters for callback function is fixed in js
    k=[1,2,3,4,5,6,7,8]
    i=1
    k.forEach((element,i) => {
    if(element===i){
    console.log("TRUE")
    }
    });
    it is giving me false false false false false false false
    then when i removed i as parameter then it is working fine like this
    k=[1,2,3,4,5,6,7,8]
    i=1
    k.forEach((element) => {
    if(element===i){
    console.log("TRUE")
    }
    });
    output= TRUE

  • @abdelrahmanabdelatief8375
    @abdelrahmanabdelatief8375 4 роки тому

    great tutorial man

  • @Logan-fp1wg
    @Logan-fp1wg 3 роки тому

    Hello. Can you help me with one example. Here we are the code.
    function print_some(name, callback){
    let a = 10 + 30;
    callback(a);
    }
    print_some("James", a => { alert(a+9); });
    I can't understand how it works. How function know about variable a. And why when I use another name for arrow function it doesn't work. I will so apriciate for the explanation.

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

    This is really frustrating, You showed an example of oneTask and second Task told us how we can run secondTask after the wait but didn't even show the example.

  • @AG-qp7gn
    @AG-qp7gn 3 роки тому

    I love your voice :D

  • @adityapatel1
    @adityapatel1 3 роки тому

    great explanation!!!!
    speed 1.25x

  • @jumpforitman
    @jumpforitman 4 роки тому

    Thank you so much my friend

  • @alinesinclaire2854
    @alinesinclaire2854 4 роки тому +1

    really cool, thanks!

  • @BahawalTV
    @BahawalTV 4 роки тому

    Well done Cem!

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

    you need to add your js script at the end of the body i think thats why it didn't work first time

  • @vkoiti
    @vkoiti 4 роки тому +3

    I'm sorry man, but you are using a different example! In the first case, you have 2 functions - 1 and 2. You want to run one of them after 3 secons, and then run the second one. You just showed how to delay a function, man.... you only taught how to delay the first function just like you did at the first time. Where's the second function?

    • @cemeygimedia
      @cemeygimedia  4 роки тому

      Hi Victor, thank you for the question. That's right, I used different examples. The first case is showing that, functions can be delayed because of any issue (late response from server, slow internet etc.) , and since I can't simulate it (because we don't have a real server, it's just my local), we have to use a setTimeOut function. But even if there is a delay, we want to run the second function after the first one. OK?
      So, to prevent running the second function before the first one, what we need to do? We need to use a callback. In the second example. I'm exactly showing how to use a callback function. You're asking where the second function is. What is the function inside the setTimeout function?

    • @טלחדד-נ9ו
      @טלחדד-נ9ו 4 роки тому

      Hi, I don't understand how to run a second function (different from setTimeout) affter the first function executed?
      lets say there are two function same as the first example (when the first function is delayed), and I want that the second function will be executed after the first (delayed) function is executed, how it can be done?
      Thanks a lot!

    • @andycommp5234
      @andycommp5234 3 роки тому

      function name(){ return console.log('name')}
      function next(){ name(); return console.log('next')}
      next()

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

    thanks man

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

    Great

  • @realkerem
    @realkerem 4 роки тому

    Eyvallah Cem abi freeCodeCamp de buldum.

  • @ojasthakurx
    @ojasthakurx 4 роки тому

    simple and useful

  • @modyyahya608
    @modyyahya608 3 роки тому

    thanks a lot

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

    Still don't get it. You seemed to rush it too much.

  • @טלחדד-נ9ו
    @טלחדד-נ9ו 4 роки тому

    Hi, I don't understand how to run a second function (different from setTimeout) affter the first function executed?
    lets say there are two function same as the first example (when the first function is delayed), and I want that the second function will be executed after the first (delayed) function is executed, how can this be done?
    Thanks a lot!

    • @cemeygimedia
      @cemeygimedia  4 роки тому +1

      Hi, in your case, you need to pass the second function to the first one, so which means that the second function cannot be passed and executed before the first function is executed. It has to wait for the first one. I hope this helps to answer your question.

    • @טלחדד-נ9ו
      @טלחדד-נ9ו 4 роки тому +1

      ​@@cemeygimedia Thank you. It really helped
      !

    • @animalmomentus
      @animalmomentus 4 роки тому +1

      ​@@טלחדד-נ9ו i don't know what he means, does it mean like this taskOne(taskTwo)

  • @zizhengjiang662
    @zizhengjiang662 4 роки тому +1

    Thanks for the amazing explanation! How did you run this example in the browser?

    • @cemeygimedia
      @cemeygimedia  4 роки тому +4

      Thank you, it is the live-server extension of VS Code. If you install it, you can run automatically in the browser

  • @adrianogv1
    @adrianogv1 4 роки тому +1

    Great explanation!

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

    Supppppperrrrrrrrrrrrrrrrrrrr

  • @ecaterinabotezatu2474
    @ecaterinabotezatu2474 4 роки тому

    good explanation!

  • @fasikademelash4638
    @fasikademelash4638 3 роки тому

    Thanks🙏

  • @yuco64
    @yuco64 4 роки тому +1

    thanks u, you're so good

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

    I came back 10 months after not understanding this video. I still don't get it. I'm screwed.

  • @ValeriiaChavdar
    @ValeriiaChavdar 4 роки тому +1

    Thank you so much!:)))

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

    i am is in new york where are u cem?

  • @shaxdatv6083
    @shaxdatv6083 3 роки тому

    thanks

  • @2020marshall
    @2020marshall 4 роки тому

    wow, you are so amazing!

  • @gymbaelove8069
    @gymbaelove8069 4 роки тому +1

    Abi Ingilizcen guzel, anlatiminda sade ve guzel, ogretmen gibi, udemy'e JS anlatan bir kurs yap istersen? Kanalini tesadufen buldum, Rob Merrill isimli kisini udemy'de kursunu bakiyordum, adam habire call back function diyordu, anlamak icin senin makalen geldi ordanda vidyonu buldum.

    • @cemeygimedia
      @cemeygimedia  4 роки тому +1

      Cok tesekkürler :) Kurs cekmek uzun süren bir is, belki aylar sürer, ama takipcim cok artarsa o zaman olur, yil sonuna dogru bire bir, ya da 2-3er kisilik özel ders de vermeyi planliyorum.

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

    The task example: function task1(callBack) {
    setTimeout(() => {
    console.log("task1");
    }, 2000);
    callBack();
    }
    function task2() {
    console.log("task2");
    }
    task1(task2);

  •  3 роки тому

    Abi Türkçe videolar da gelir mi ?

    • @cemeygimedia
      @cemeygimedia  3 роки тому +1

      Bütün dünyadan takipciler oldugu icin sadece ingilizce video yapabiliyoruz. Web yazilimi anlatan cok güzel türkce kanallar da var, onlari takip edebilirsin.

  • @davidgilmourhimself
    @davidgilmourhimself 3 роки тому

    Bu sıcak aksanı nerde duysam tanıtım. :)

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

    The name "callback" does not make sense to me wish it was called something else.

  • @tiru4076
    @tiru4076 3 роки тому +1

    confusing not helpful my guy

  • @cvxcfv
    @cvxcfv 3 роки тому

    You could do better at explaining, cut out the unnecessary talk, simplify and re-release a new video

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

    horrible, not helpful

  • @kamsyd13
    @kamsyd13 4 роки тому

    Please reply..🙏

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

    Thank you for nothing