JavaScript Callback Functions

[@AyoAdejugbe]

Sir I have literally almost searched every corner of KZbin to get an explanation that makes sense and was just about to give up until I found your video...I honestly wish I could shake your hand at this moment...THANK YOU SO MUCH!!

[@rotrose7531]

Very lucky to find this channel by chance, The best content I ever watched, without you, many important concepts will never find way to get into my head. Thank you.

[@kamaboko1]

It it were anymore clear, I'd be walking into a sliding glass door. Great job.

[@LearnEnglishwithKevin101]

Important words: 'When you finished doing your thing, you can run the other function'....a simple statement that makes a lot of difference. No other video was able to do that.

[@oohhhdaniel]

This was the best explanation of callback functions I have seen. Seriously changed my life. Thank you.

[@easterntornado]

Hey Steve, no explanation can be simpler than what you explained. Thanks a lot !!!

[@RobertWildling]

Every video teaches me something new - even though I thought I knew that particular topic already. So I started live according to the principle "A Steve video each day keeps the ignorance away. (Best taken with a breakfast coffee.)"

[@shahidmr21]

Cant apperitate you in words. Great teaching skills, everything like examples, coding style, explaination..... you are great

[@martinemmerson2809]

Very structured and informative... completely understandable. Thank you.

[@abdul__rauf]

Can some one be more clear on explaining callbacks than this? I think not. Steve your are AWSOME

[@akemim.7854]

This was awesome! I was searching for a video that explained to me callback functions, since I'm a beginner at JS. Your video cleared it out beautifully for me, thanks a lot!

[@angelainniss7986]

Great explanation so now I know forEach is an in built method that takes a callback function it's making more sense now!

[@MrSeanwarman]

That was a really clear definition thanks, been trying to bend my mind around callbacks for a while.

[@MrDovakiin]

THANK YOU! Been struggling with understanding this all week until now. Subscribed.

[@bobbysilver272]

Good examples and explanations. Well done!

[@Zen-lz1hc]

Wow the last example was super cool : navigator.geolocation.getCurentPosition(); That was soo interesting ! Cool example thanks !

[@hasnathabdullah1253]

Really Like this channel . Good Explanation

[@harperfaith108]

Nice Griffith , hats off to you for way you explain, I think it is enough to learn how callbacks work, like your way

[@willdavis7254]

At 2:38, THAT is the explanation I needed... the hello parameter replaces the parameter other within the function doThing!

[@notificationreciever4570]

Very clear and concise!

[@waleosinubi1048]

Love these tutorials. This feels similar to currying functions.

[@SteveGriffith-Prof3ssorSt3v3]

They can be used together.

[@melssf7852]

Thanks for making your content, it helped me so much!

[@imanidioli]

So awesome tutorial ... wow tutorial

[@espanol9750]

Thx a lot and thx for staying true to your word and putting the promised links in the description!! ;D Most youtubers don't bother doing that ;)

[@alpstinger5083]

Awesome explanation!

[@renatohrotko2020]

Finally I understood the callback funtions. Thanks

[@willdavis7254]

Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you very much Will!

[@golftownpro999]

Hi Steve, just wondering if you can walk me through how 'Steve' gets printed... from nm?

[@SteveGriffith-Prof3ssorSt3v3]

Looking at the code at 3:55 in the video... Step 1: call the function doThing from line 22. Step 2: we are passing something into the function doThing called "hello". Step 3: The doThing function is accepting something being passed in. Whatever was passed is put into a new variable called "other". In this example, it just so happens that "hello" was a function object. Step 4: we create a new variable called "name" on line 14. We put the String literal "Steve" inside that variable. Step 5: On line 15, by putting ( ) after "other" we are telling the JavaScript engine that we want to try and run whatever is inside the variable "other". It happens to be a reference to our function "hello". Step 6: The function hello was called from line 15. It is expecting to be passed something that it can put inside of a new variable called "nm". This will be the string literal that is inside of the variable "name". Step 7: A copy of the string from "name" will be put inside the variable "nm". Step 8: Line 19 prints out "hello", then a space, then the contents of the variable "nm", which was the String literal from "name" that was copied into "nm".

[@gamblersstory9081]

I agreed. You are the Prof3ssorSt3v3!

[@sreeniv09]

Excellent explanation

[@cecomecoev4796]

First - Thank you for taking time and effort to put those tutorials. I started almost at the beginning and I learned a lot. About this tutorial I would like to mention 2 things. First you said twice that the call back function is to be executed at the end of the external f-n. That is not necessarily true. It can be executed at any point during the execution of the external f-n. About the getCurrentPosition method call and the corresponding success or fail callback f-ns - they were really very briefly touched and for someone who have not dealt with those types it would be a source of confusion. I would mention that their names first of all are not fixed, rather their position within the parameter's list is important and also that parameters do not come through getCurrentPosition. They are "just there". That part took me a while to understand.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks for your note. I have other videos on geolocation that talk specifically about those callbacks which is why I don't spend much time talking about them And while yes you can execute the callback from any point inside the function the typical pattern is to call the callback when your main task has finished.

[@chandankumar-vm2yc]

This is what exactly a callback function is ,,,, super explained... :)

[@aymangamal9846]

thank you for your effort to explain, it's a wonderful tutorial.

[@raha5184]

Thank you, now it makes sense to me!

[@bkoko5234]

Explained very well, thank you for this

[@kushbajpai1265]

you made my grounds strong...Thankyou

[@chesterxp508]

Brilliant tutorials :)

[@omleen3187]

Thanks a million! It's getting much clearer now. Just a question if you allow me, please! Why not just call a function inside another function? Not as a parameter, but in its body. Best regards.

[@SteveGriffith-Prof3ssorSt3v3]

As soon as you do that you lose the ability to reuse the nested function.

[@juanyang838]

Does the class function work as a same mechanism such as callback?

[@SteveGriffith-Prof3ssorSt3v3]

No. callbacks and classes are very different things. A callback is a function that you pass to another function so it can be run when the function is finished running. Classes are containers for functions. They really just create an object and define what is on its prototype.

[@cathaldolan7113]

Hi Steve, great videos, thank you. However, I'm a little confused by this one. On line 14, "other()" is calling the "hello" function right? So in a round about sort of way, is the "hello" function being temporarily renamed as "other"? Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

`other` will be a local variable that only exists inside the function `doThing`. It is a reference to the `hello` function. `other` points to the location in memory where the `hello` function is stored. So, when you tell `other` to run, you are telling `hello` to run.

[@cathaldolan7113]

@@SteveGriffith-Prof3ssorSt3v3 Thank you Steve. You are so incredibly selfless with your time, it is very much appreciated. I hope I will be in a position to pay it forward at some point in the future!

[@TriplabPro]

So the function hello( ) is actually being called by the callback function other( ); I guess what makes callback functions hard for me is... why use other to call hello when we can just simply call hello? Seems like we’re adding a needless layer and I can’t figure out why. I know it’s useful, just can’t see why

[@SteveGriffith-Prof3ssorSt3v3]

The most common application for callback functions is when you need to call a method to accomplish a task which will take an unknown amount of time. We want to tell that method what to do when it is finished. So, we pass the name of a function to the method. The name is the callback function. When the method is done it calls the function that was passed to it.

[@TriplabPro]

Brilliant! And thanks for the quick response. Very helpful

[@codea8901]

Many thanks for these amazing videos Steve! I have a question on the very first example please? If I use the following code where `I call the hello function directly inside the doThing function it'll achieve the same results? I read some comments and one user has asked the same question and I'd like a bit more clarity on your response to it i.e. losing the ability to reuse the nested function? In the example below I'm calling the hello function twice inside two separate functions so not sure what you meant by 'ability to reuse'? function doThing(){ let x = 7; let name = 'Steve'; hello(name); } function doAnotherThing(){ let name = 'John'; hello(name); } function hello(nm){ console.log('hello', nm); } doThing(hello); doAnotherThing(hello); Thanks in advance and much appreciate your time on these.

[@SteveGriffith-Prof3ssorSt3v3]

Lets say I have two functions. function hello(name){ console.log(`Hello ${name}` ); } function goodbye(name){ console.log(`Goodbye ${name}`); } I can, as you said place the call to either function directly inside another function to make it run. However, the value comes when I can choose which function to pass as a callback. My other functions, which use a callback, now have flexibility. function x (cb) { //do some other things //then call whatever function which was passed in cb( 'Fred' ) } function y (cb, prop) { cb( prop ); //I can pass a parameter to be used in the call back to the function too } function z (cb ) { //or provide the value as a local variable in this function let prop = 'George'; cb(prop); } In all three examples, you don't know and shouldn't care whether I sent hello or goodbye as the callback. My functions can run with ANY callback being passed in.

[@codea8901]

@@SteveGriffith-Prof3ssorSt3v3 Thanks a lot Steve - that makes sense now.

[@pranabroy8218]

Why the callback functions are explicitly called inside another function (first example), isn't supposed to call the callback function automatically.

[@SteveGriffith-Prof3ssorSt3v3]

That's how they get called "automatically". You pass them to the other function so they can be called. Regardless of whether or not you can see the code inside the function that accepts the name of the callback, it is being explicitly called somewhere.

[@pranabroy8218]

@@SteveGriffith-Prof3ssorSt3v3 but sir if you have to call a function you can directly call the function inside any function, why we have to pass the function in the first place and then call the function. Please help me out , iam not getting the purpose of the callback function

[@SteveGriffith-Prof3ssorSt3v3]

@@pranabroy8218 We pass in a function so that it can be called immediately after some other functionality is completed inside the callback function. It is a very common programming practice to pass in a function that needs to be run after another task. It doesn't even have to be a named function that I pass in. I could write an anonymous function that will be passed in. And my anonymous function can be running from inside the callback and use variables from inside the callback function. //example someFunc( function( ){ console.log('this will run when someFunc decides it is time') }) ; function someFunc( cb ){ //do something //do something else //when those tasks are complete cb( ); //will run the anonymous function } There are many functions that you will use where you will have no access to the code that is inside them. You will have no return value from them. The task that they are doing might be asynchronous in some way. Your only option is to pass in the callback function that you want to run after the function that you called.

[@Imvdee]

thank you steve.

[@lulusaikou221]

Thank you St3v3!❤

[@BeatBustersDance]

Sir Your Explanation was so good and It's the best available on internet. But I have little bit of issue that you have lots of videos on Javascript may be more than 300 videos. It's really difficult to go through each and every video. Sir why Don't you merge all your Javascript videos to 3 or 4 crash course. I think you will get the best response on internet.with a hope that you will release a crash course soon ... Still Sir you have the best explained videos . You should get more subscribers

[@SteveGriffith-Prof3ssorSt3v3]

I have nearly 700 videos and I'm adding around 200 more each year. I'm working on some courses on top of that.

[@BeatBustersDance]

@@SteveGriffith-Prof3ssorSt3v3 Thank You so much for adding all those videos they are really good or I can say the best. Actually I have started learning Javascript but I find it bit difficult that where to start in the channel.

[@SteveGriffith-Prof3ssorSt3v3]

The two main playlists are JavaScript from the Start and JavaScript in the Browser. But honestly after the first 20 or 30 videos the order doesn't matter much. There is no one correct sequence to learn JS. It would be like trying to sequentially number all the leaves on a tree.

[@BeatBustersDance]

@@SteveGriffith-Prof3ssorSt3v3 Thanks man for all your response

[@mistergraham6702]

GOD FREAKING BLESS YOU

[@itzdevaraj]

Superb

[@logic_master950]

Thanks a lot guru

[@mahmoudelshenawy2885]

Hi steve, im hoping that you can help me with my enquiry. im a bigenner in javascript i spent abount 40 days learning up till now, i finally found your amazing channel ,so im willing to focus on it for amount of time but i found so many playlists with many toturials and i dont know which one to start with so can you list it to me from the basic level up to the top one

[@SteveGriffith-Prof3ssorSt3v3]

It depends what you are trying to learn. If you want to understand JavaScript then I would suggest doing the JavaScript from the Start playlist. After the first 39 videos you can start watching the JavaScript in the Browser playlist too. There isn't really just one order to use to watch the videos. There are way too many topics to say that there is a specific order to use. Those two playlists will give you more than enough to start jumping around into other playlists in whatever order you want. Welcome and Good luck.

[@SH-lt2iv]

This helped alot thanks

[@justthings4044]

those aren't callback functions.. those are Higher-order functions..

[@SteveGriffith-Prof3ssorSt3v3]

They're both. Taking an other function as an argument is often referred as a callback function, because it is called back by the higher-order function.

[@Spunky_Tx]

Thank you

[@dancruz7845]

thank you this was helpful!

[@contentprogramming]

good job

[@rafaelsantos3987]

Very Well

[@abhishekanand3706]

Awesome video!!!!

[@abdallaabbass4271]

AMAZING

[@marclaren6193]

MAAASIVELY CONFUSING !! :( The only example making sence in this vid is the one with only "setTimeout". Where the H+++ are "nm" "idx" "arr" defined ?? And why does the hello function need an nm parameter, if its strapped into a ".forEach" method belonging to an array (the object itself) ?

[@SteveGriffith-Prof3ssorSt3v3]

nm, idx, and arr are just variables that YOU define. They are not defined anywhere else. The callback function is the one that is called by the method you use. The method will pass the values to your variables.

[@marclaren6193]

@@SteveGriffith-Prof3ssorSt3v3 Thanks ! But i'm still sitting in the dark about callback functions in general. Seems to me there are so many variations of callbacks structures. Been watching dozens of vids on callbacks sofar but somehow i'm still missing something to complete the sense of it all. :(

[@SteveGriffith-Prof3ssorSt3v3]

@@marclaren6193 The structure of what the callback function receives does change. The names of the variables in the callback function change. The number of variables in the callback function changes. The way the callback work is the same though. Object.method( callbackFunc ) There is an object which calls a method. The method will call the function. It is the method that decides what gets passed to the function. The functions are just normal functions like any function in JavaScript. ALL the parameters passed to the function are optional for you to use or not.

[@justpele]

maybe stick with fewer examples and go deeper, the final example was a little unclear and rushed

[@SteveGriffith-Prof3ssorSt3v3]

This video is part of a larger series of tutorials on JavaScript and functions. It is intended only as introduction to the concept of callback functions. If you are interested in learning more about the Geolocation example then there is another video about that - kzbin.info/www/bejne/hHqkooVpacqabas - that should help explain the final example.

[@hexerei02021]

your keyboard is very aggressive

[@SteveGriffith-Prof3ssorSt3v3]

Just my old mic picking up the keyboard sounds

[@yarik83men51]

+++

[@stefanpatrichi2608]

I must be so stupid. I cant understand

[@SteveGriffith-Prof3ssorSt3v3]

Think of it this way. I ask you to go to the grocery store. - This is your function. stefanGoToGroceryStore( ) When you are done that, I want you to go to the beer store and buy some beer. There is a function for that too. stefanGoToBeerStore( ) When I call the first function I can pass in a reference to the second function. (Just the name of the function) This way, when the first function is complete it knows what to do next. stefanGoToGroceryStore( stefanGoToBeerStore ); Inside the first function I can use the reference that was passed in by putting the reference into a new local variable. function stefanGoToGroceryStore( callbackFunctionRef ) { stefan.buyStuff( ); if( stefan.stillHasMoney === true ){ callbackFunctionRef( ); //this will call the function stefanGoToBeerStore } }