Understanding JavaScript Callbacks

Callbacks are fundamental to asynchronous coding in JavaScript. In this tutorial we delve into callbacks and look at several examples to help you understand them better.
Would you like to help keep this channel going?
/ allthingsjavascript
Access to EVERY course for one low price: allthingsjavascript.teachable...
For more resources on JavaScript:
www.allthingsjavascript.com
Access to EVERY course (get 2 months free): www.skillshare.com/r/profile/...
Courses offered on Udemy at a discount (access from my site): allthingsjavascript.com/course...
Tutorials referred to in this video:
Function Expression vs. Function Declaration: • Function Declarations ...
Closure: • Demystifying JavaScrip...
Higher Order Functions: • Higher Order Functions...
Avoiding Global Variables: • Three Techniques for A...
• What is Wrong with Glo...
#javascript #AllThingsJavaScriptLLC

[@ayasswain]

One if the best explanation on callbacks on KZbin.

[@scottonanski4173]

Finally! My goodness. You're the only person I've seen that's been able to explain this clearly.

[@AllThingsJavaScript]

Glad it was helpful!

[@premierleaguematches4307]

After so many tutorials on KZbin now i understand calkback functions, thanks man.

[@AllThingsJavaScript]

Glad to help!

[@ryanregis99]

I didn’t notice that callbacks are what I was using in my code, I just called them referencial self-defined functions. I also never used anonymous functions because it clutters my code and makes it confusing for me to read. But now I understood the convenience of anonymous functions and the essence of callback functions. Thank you for this video!

[@seenuvasanv]

Your voice is Crystal clear...

[@Buksiprezentz]

but his keyboard sounds crappy :)

[@dragomirdosen3964]

Only video that explains callback's in a simple, down to earth way.

[@richochet]

This may be old but it's brilliant, I have been trying to get my head around callbacks, this has helped no end. Thank you

[@AllThingsJavaScript]

Glad it helped!

[@richochet]

Agreed.

[@dan110024]

Even the other great youtube teachers didn't explain it this well!

[@JustLookA7]

This channel has the clearest explanations about JS. I simply love it. Thanks for the lessons!

[@raymondmichael4987]

As rarely as it is, this is one of the channels I subscribed after watching the video for the first time. Great explanation and real world examples are the things that made you have my 1+ sub. Keep up the good work, Greetings from Tanzania

[@scottmenteith4778]

After looking for a video that explains callbacks clearly, I finally found one! Thanks for taking the time and for your examples. I particularly liked how you built on your example so it made sense.

[@AllThingsJavaScript]

Glad it helped!

[@neowang8061]

best explained javascript callback topic on KZbin, well done, helped me so much.

[@mastle313]

Can't express how thankful I am for this video. Read several articles on callbacks but none of them helped me understand this concept as good as this video did

[@Letsallparty2]

Your lessons are incredible. One of the better js tutorials on here

[@craigjohnstone7420]

Outstanding! I was struggling with this, but this has helped a huge amount.

[@mounaramesh]

Both beginners and expertise will love your explanation

[@mickwhyte4204]

Yeah, definitely the 'go to guy' for all things JS on KZbin. Thanks.

[@AllThingsJavaScript]

Wow, thanks!

[@yourdadishere]

"I am entering a parameter 'e' in case I want to...I won't in this example."--I've done a lot of teacher training and evaluation of instructional materials and programs in my previous career and this is the point where we would usually ask for revision. After the statement I quoted, you then move on to a more complex function that loops through an array without any comments on your lines of code. Before executing the code, you begin explaining that you are checking to see if a function is a callback. We're moving into recursion now, and your newb to JavaScript is wondering why a callback is the second parameter in a function because you never explained that. In fact, you can hear at 9:25 that you yourself aren't actually confident in why we're doing this.--Indeed, this type of function and use of callbacks is certainly help and a nice example of coding in JS with callbacks, but the learning objective in this video is now off the mark. At 9:40 you say, "yes, it's a simple scenario..." It's not: callbacks can be explained without a 4 line recursive loop. This guy gives the simple scenario and is concise and to the point without distraction. kzbin.info/www/bejne/p6XJmmdjbcmdb8U After giving you that bit of feedback, I would like to say that it's admirable how you've essentially archived hundreds of possible things one may need to do in JS and presented them individually. But in this case, you've got a few videos melded into one here.

[@akkineniajay8117]

Very clearly explained. Thanks!

[@dubbiesstep6555]

I usually watch your videos at 1.25x speed, as you speak a bit slowly. Though, I've learnt a lot from you for which I'm thankful

[@RakeroX]

Was really confused with callbacks, but now I finally got it. Thank you very much!

[@AllThingsJavaScript]

Glad it helped!

[@yasarhussain3811]

Excellent Explanation thank you

[@SuperSamsosa]

ok im still new to the concept. Cant say i totally got it but i got some grasp of it. Thx was helpful

[@esorkinc4011]

Your explanations are very concise.

[@josebergues]

Hey Buddy, you are simply the best explaining callbacks in javascript, congratulations!

[@donnytechiera957]

Awesome your teaching is very logic and simplified !!

[@germanduterte7110]

Now I know the concept and use of call back function. After serveral months of knowing until I got this video, Thank You , I owe you for this.

[@AllThingsJavaScript]

Glad it helped

[@yourteacher4353]

Brilliantly explained! Thanks a ton!

[@waynebryant9931]

Great tutorial on JavaScript callback functions. Well done!

[@suparnobhattacharya6345]

this channel is very much underrated...Great video.

[@georgesmith3022]

Thanks, clearly explained

[@karan_1993]

Great explaination.

[@cybersyn-nh8du]

Great tutorial, one of the only ones out there which are simple to understand

[@kurono1822]

Short and well explained, this kind of videos are the best

[@vlknlvnt]

pure and simple explanation

[@spring_boot_hub]

Very clearly explained

[@mehtabahmed6092]

Thank you so much, I really got the concept

[@leegold7100]

Great video. Clear and understandable.

[@AndresGuerrero]

Great job explaining this topic 👍🏽 thanks!

[@ismail9831]

I’v spent several weeks searching straight forward explanations about js...Finally I found your channel! Thank you!!!!

[@AllThingsJavaScript]

Glad it helped!

[@MrTomro]

Short and simple explanation. Coming from C++, things like event listeners, callbacks, async functions, promises can be daunting at first, but really they are not that hard :) Thank you

[@ArthurSilva-cv9xt]

Amazing lesson! I loved even the keyboard sounds. They made me feel like I was the one who was typing! haha

[@gagangupta1255]

One of the best videos - explaining how to create custom callbacks and get them invoked !!

[@farazk9729]

Thank you so much; very useful!

[@rahulpagidimarri4677]

best explanation on call backs thanks

[@fortwisers6070]

Very well done

[@sulmanzafar9563]

Thanks All concepts are clear now

[@tymothylim6550]

Thank you very much for this video! It was very clear and educational :)

[@darz_k.]

This is so slick - I love it

[@aDJam91]

This is a great video for a concept that I was finding difficult to grasp! So clear.

[@AllThingsJavaScript]

Glad it was helpful!

[@DcodeShow]

Your explanations are just great... Thank you sir for helping me

[@AllThingsJavaScript]

Glad to help!

[@anasizmaz5594]

Really Helpful

[@jogoeire]

Great tut. Subscribed

[@naurozbanu9882]

this is the best tutorial on callback so far. Many thanks.

[@AllThingsJavaScript]

Glad it was helpful!

[@sauravkumar442]

this is very good tutorial for everyone .Thanks a lot

[@FlawlessAlias]

This is a really good tutorial!

[@watcherofsouls1587]

I finally understand callbacks, thank you very very much! :D

[@AidanaDreamer]

Awesome explanation, thank you!

[@abyshekhar]

This video confirms the answer to my question that why do we need to pass the callback as a parameter. In most of the videos and articles I have gone through callback seems to have been defined as the function being passed as a parameter although it would still work as a callback if we just call the function inside the outer function without passing as a parameter.

[@AllThingsJavaScript]

Glad it helped!

[@ahmadq9195]

what a great explination. Thank you.

[@AllThingsJavaScript]

Glad it was helpful!

[@thedarkknight221122]

Subscribed for more. I Wanted this. Thank you so much.

[@karlee8608]

You are a genius. Please do more examples and explanations.

[@IkeSpeaksUp]

Soo good! Thank you for the help!

[@edemduku3391]

thank you bunches man. thank you.

[@abdellatifanaflous8196]

Thank you sir for sharing this, it's really helpful

[@AllThingsJavaScript]

Glad it was helpful!

[@avinashgsr]

Thank you very much for your clear explanation. This is one concept I found hard to get a clear picture.

[@AllThingsJavaScript]

Glad it was helpful!

[@reidwilliamson6477]

Great video sir! You have a uniquely positive way of speaking that keeps me interested and positive minded at the same time.

[@AllThingsJavaScript]

Thanks!

[@agusan2847]

Thanks... Finally i understand by this explanation ❤

[@AllThingsJavaScript]

Most welcome 😊

[@toddhoward5947]

thank you

[@md.ashikurrahmankhantushar4305]

You are a legend man!

[@saurabhtalele1537]

really u r great explainer.....

[@AllThingsJavaScript]

Thanks a lot

[@noysaban5585]

That's great! Thanks :)

[@ranamondal4084]

Excelent sir

[@thongahuhu9362]

The best callback ever

[@nerdsum663]

Ur amazing teacher sir

[@AllThingsJavaScript]

Thank you!

[@BeatPoet67]

You're a natural teacher, and your explanations are clear and to the point. I've no idea why you don't have more subscribers. Have you considered creating content for the likes of egghead.io etc? Thanks for your efforts in the meantime!

[@AllThingsJavaScript]

Thanks for the feedback! I will have to look into egghead.

[@MohammedAshraf]

Thank you

[@AllThingsJavaScript]

Welcome!

[@eugenbelousov5027]

thanks

[@firstignitor]

so smooth. ilke it

[@derekfrost8991]

Nice video. Text is very clear and you seem to be better than most. But you could replace your for loop with forEach for extra security.. :)

[@Bayo106]

the event listener example showed me that I already really understand callbacks! Thanks for this!

[@Fernando-du5uj]

This is what im looking for, how to create my own functions with callbacks, thank you alot, sir.

[@AllThingsJavaScript]

Glad it was helpful!

[@MrRoman0629]

Thank you for this video. It was very helpful in understanding callback. I look forward to watching your other videos. I did have a question, as I'm still learning. What is the reason for determineTotal being a function expression and processStudents being a function declaration? Could determineTotal been written as a function declaration and vice versa without issue?

[@AllThingsJavaScript]

I think the processStudents and the determineTotal functions were defined as function expressions. I did pass an anonymous function when I called processStudents. Anyway, to answer your question the functions could be defined as function expressions or function declarations.

[@ketankulkarni2675]

very well

[@aswink1505]

Hi thanks for the tutorial. I have a doubt, please clarify it. We are creating a processStudents function which accepts callbacks. Why can't we create a function called processEastStudents which returns object of only students from east and then call that function in other functions like determineTotal instead of using callback functions. Can I know what are the drawbacks of that implementation? Thanks

[@AllThingsJavaScript]

With the simple example I provided, the solution you suggest might work just fine. But remember, the advantage of callbacks is the flexibility. The function we pass in could be any function. When you create a processEastStudents function, that function can only be used for one purpose. Also, keep in mind that JavaScript is very flexible. There is very seldom only one way to do things. In JavaScript you need to understand what is possible so you can choose between alternatives. And some alternatives are better. One of the advantages of callbacks is flexibility, but probably the biggest advantage is asynchronous coding.

[@iitandmedical8528]

I like you, sir, your explanation very good

[@yesme0001]

Very clear explanation - the best I've seen trying to get my head around Callbacks. I also watched the Closure video, to understand how 'total' and 'count' work in the end example of the video - again, I came away understanding closure, thank you. Can anyone help with something I don't understand? After @14:17 in the video the determineTotal() function runs and the total is printed - but why and how does processStudents(students, function(obj)) iterate over students in the array without a .forEach or similar?

[@AllThingsJavaScript]

The processStudents function has a for loop. Notice how it is set to iterate over the data (in this case students array). So in this case it is using a for loop to iterate over the array. Does that help?

[@yesme0001]

I don't see a for loop in lines 20..24: processStudents(students, function(obj)) { if(obj.score > 60) {console.log ...} }); No for loop that I can see. Am I missing something obvious??

[@krishchandrahasan7955]

"No for loop that I can see. Am I missing something obvious??" It's from lines 11 - 17 - the part where the processStudents function is being defined

[@Gigusx]

A bit confusing, especially for a beginner (I'm probably not alone, lol), but with a little practice, I'll probably get used to this concept. I struggled to understand some parts and it helped me to break things down to the point where I was able to say "okay, so that's what going on here". The explanation was great, so thanks! I like the fact that you used real-world examples to help us visualize, keep it up.

[@albertlewis332]

How's your journey? from a fellow beginner.

[@columcreed4352]

I found it confusing too. I think it is the name of the parameter "callback" that is confusing

[@Luxcium]

The sound of the voice got me hooked indeed ! I am not sure about the closure maybe I missed something but I dont see a function created from a function that have returned. A closure in programming allows the function to access values of variable included in a function that have finish executed and has returned... Through the closure's copies of their values or references, even when the function is invoked outside their scope. Normally the closure is using the value of variable created in an other function a level above which have returned a second function (the closure) ...

[@AllThingsJavaScript]

Here is a tutorial where I talk about closures: kzbin.info/www/bejne/iqvRoYKjq5d1h68

[@joq6356]

Thanks for the explanation! I got confused in the second example started at 7:35 though, where was "data" defined ?

[@AllThingsJavaScript]

data is a parameter for the function. So when the students array is passed to the function, it is stored in the data variable.

[@joq6356]

@@AllThingsJavaScript Ah got it, thanks!

[@kunalbidkar6340]

Hi... I am a newbie to the JS world. Awesome explanation. I just have one query. When you call the processStudents function and pass in the anonymous function which checks if the score is greater than 60. So what is the flow of the execution? How is it run through the entire array? Is it something like it first loops through the first element of array, checks whether it is east or west and then calls the callback function for that particular data index. The loop increments and again east is checked and then second time the callback logic is invoked? Thank you

[@AllThingsJavaScript]

So the for loop goes through each element in the array one at a time. If the school for the element in the array equals east, then it invokes the callback. Once that is done it comes back to the next element in the array. Does that help?

[@drj9403]

at last I understood callbacks 👍

[@SuperSamsosa]

at 15:00 min ok if determineTotal (line 26 ) is a seperate function and parameter students (line 30 ) which is the entire array is passed in, how come the total count is 5 instead of 7 ? Thanks for any explanation

[@AllThingsJavaScript]

Because in the processStudents function we have a conditional that filters students that belong to East and there are 5 of those. Does that help?

[@SuperSamsosa]

@@AllThingsJavaScript ok its the processStudents function in line 10. I`m slowly getting there. Thanks

[@saehoondannykim9469]

Great Lecture! I got a question. Assume that I only add the total number of student from east. I have the code: function countEastStudent() { var count = 0; processStudent(student, function(east) { count++; }); console.log(count); } countEastStudent(); Is there any better way to add it? Thanks.

[@AllThingsJavaScript]

You would need to check and make sure the student is from east. So put count++ inside an if statement: if (east.school.toLowerCase() === 'east') { count++ } Though I haven't tried it I think that would work for you. Remember that the parameter east is receiving an object from the array. So you need to check the school property of that object.

[@RamsFan93]

How would I filter images on a page using a search bar or drop-down. Could I use data-*?

[@AllThingsJavaScript]

You could also use queryselectorall. Have you tried that. I have a few tutorials on it.

[@RamsFan93]

@@AllThingsJavaScript I haven't! I'll check it out when im home from work! Also I'm amazed at the quality of content!

[@Gj1118]

can you please let me know which "solarized light" color scheme you are using ? better still, can you please pass me a link ? - Much appreciated.

[@AllThingsJavaScript]

Here are my settings. Hopefully that will help: { "color_scheme": "Packages/Solarized Color Scheme/Solarized (light).sublime-color-scheme", "font_size": 21, "ignored_packages": [ "Vintage" ], "theme": "Default.sublime-theme", "translate_tabs_to_spaces": true, "word_wrap": true }

[@Martin958]

How does the function know it has to iterate through the array 'students'? Also how does it define the variable 'data' as being relevant to the array?

[@livinfenaya9915]

while defining the function processStudents we have two arguments (data,callback) while calling the function processStudents we call by(students,a function that uses the callback value) hope you undestand :)

[@Schweppese]

Can you please tell me the Keyboard model and switches you use in this video? It sounds amazing! Also great explanation, Subscribed to your channel immediately...

[@AllThingsJavaScript]

Microsoft natural ergonomic keyboard 4000. It is many years old.

[@yokanho]

Can someone explain why in processStudents function, he use "data" as the first argument? Wouldn't it be more convenient to use the variable "students"? (all "data" change to variable "students"). Also since when does the obj has this score and name property? => obj.score , obj.name . Am I missing something here?

[@AllThingsJavaScript]

When you put a variable in a function it is defined for that function and can accept any data passed into it. So if I put students that would be find, but I would still need to pass in the data from the stundents variable. Does that make sense? The callback is a function that gets invoked. It has a parameter obj, which is just a variable. That variable receives an object and that is why I refer to obj.score and obj.name. I hope that helps.

[@jainshilpi3]

Do you have any video related with indexeddb?

[@AllThingsJavaScript]

kzbin.info/www/bejne/nWW4ZoqIr62cqq8 Also, you can get a complete list of tutorials here: www.allthingsjavascript.com/youtube.html