Understanding JavaScript Callbacks
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- 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: allthingsjavas...
For more resources on JavaScript:
www.allthingsja...
Access to EVERY course (get 2 months free): www.skillshare...
Courses offered on Udemy at a discount (access from my site): allthingsjavasc...
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
One if the best explanation on callbacks on TH-cam.
Finally! My goodness. You're the only person I've seen that's been able to explain this clearly.
Glad it was helpful!
Your voice is Crystal clear...
but his keyboard sounds crappy :)
After so many tutorials on TH-cam now i understand calkback functions, thanks man.
Glad to help!
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
Glad it helped!
Agreed.
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.
Glad it helped!
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
Even the other great youtube teachers didn't explain it this well!
Only video that explains callback's in a simple, down to earth way.
Both beginners and expertise will love your explanation
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!
best explained javascript callback topic on TH-cam, well done, helped me so much.
I’v spent several weeks searching straight forward explanations about js...Finally I found your channel!
Thank you!!!!
Glad it helped!
Was really confused with callbacks, but now I finally got it. Thank you very much!
Glad it helped!
Yeah, definitely the 'go to guy' for all things JS on TH-cam. Thanks.
Wow, thanks!
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
Outstanding! I was struggling with this, but this has helped a huge amount.
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.
Glad it helped
ok im still new to the concept. Cant say i totally got it but i got some grasp of it. Thx was helpful
this is the best tutorial on callback so far. Many thanks.
Glad it was helpful!
Hey Buddy, you are simply the best explaining callbacks in javascript, congratulations!
this channel is very much underrated...Great video.
pure and simple explanation
Short and well explained, this kind of videos are the best
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
This channel has the clearest explanations about JS. I simply love it. Thanks for the lessons!
Your lessons are incredible. One of the better js tutorials on here
Amazing lesson! I loved even the keyboard sounds. They made me feel like I was the one who was typing! haha
One of the best videos - explaining how to create custom callbacks and get them invoked !!
Great video sir! You have a uniquely positive way of speaking that keeps me interested and positive minded at the same time.
Thanks!
best explanation on call backs thanks
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.
Glad it helped!
Thank you very much for your clear explanation. This is one concept I found hard to get a clear picture.
Glad it was helpful!
Your explanations are very concise.
This is a great video for a concept that I was finding difficult to grasp! So clear.
Glad it was helpful!
Your explanations are just great... Thank you sir for helping me
Glad to help!
Great explaination.
Very clearly explained
This is so slick - I love it
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!
Thanks for the feedback! I will have to look into egghead.
Excellent Explanation thank you
Awesome your teaching is very logic and simplified !!
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
Subscribed for more. I Wanted this. Thank you so much.
Very clearly explained. Thanks!
This is a really good tutorial!
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?
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.
this is very good tutorial for everyone .Thanks a lot
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.. :)
Great tutorial on JavaScript callback functions. Well done!
The best callback ever
Great tutorial, one of the only ones out there which are simple to understand
what a great explination. Thank you.
Glad it was helpful!
Thanks... Finally i understand by this explanation ❤
Most welcome 😊
Thank you so much; very useful!
You are a legend man!
Great job explaining this topic 👍🏽 thanks!
Thank you sir for sharing this, it's really helpful
Glad it was helpful!
Thank you very much for this video! It was very clear and educational :)
Thank you so much, I really got the concept
Thanks All concepts are clear now
Great tut. Subscribed
Very well done
Really Helpful
Awesome explanation, thank you!
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...
Microsoft natural ergonomic keyboard 4000. It is many years old.
Brilliantly explained! Thanks a ton!
I finally understand callbacks, thank you very very much! :D
Great video. Clear and understandable.
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)
...
Here is a tutorial where I talk about closures: th-cam.com/video/TznpOmv2BQM/w-d-xo.html
I really like the way you explained it.
Question though:
The main reason behind putting a callback function into the processStudents function was to make it simpler and so that we do not keep repeating the code, I believe. In this case, this is like writing a map function or forEach function for the students array, am I right?
Will be great to get what you think :)
For example:
```js
let employees = [
{
"id": "5f34d011f239ec23e4344a40",
"name": "Peters",
"phone": "+61 (843) 415-3801",
"age": 36
},
{
"id": "5f34d0113a4722913691038b",
"name": "Janine",
"phone": "+61 (996) 417-2976",
"age": 24
},
{
"id": "5f34d011129f528aff567df9",
"name": "Faith",
"phone": "+61 (984) 473-3636",
"age": 29
}
]
let processEmployees = (employees, callback) => {
for (let i = 0; i < employees.length; i++) {
callback(employees[i])
}
}
processEmployees(employees, function(employee) {
console.log(`Name:${employee.name}, Age: ${employee.age}`)
})
// similar to:
employees.map(employee => console.log(`Name:${employee.name}, Age: ${employee.age}`))
```
The function passed in would be similar yes. And a function that uses map or foreach could be passed in.
You are a genius. Please do more examples and explanations.
thank you bunches man. thank you.
Ur amazing teacher sir
Thank you!
Thanks, clearly explained
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.
How's your journey? from a fellow beginner.
I found it confusing too. I think it is the name of the parameter "callback" that is confusing
really u r great explainer.....
Thanks a lot
Thank you
Welcome!
This is what im looking for, how to create my own functions with callbacks, thank you alot, sir.
Glad it was helpful!
Thanks for the explanation! I got confused in the second example started at 7:35 though, where was "data" defined ?
data is a parameter for the function. So when the students array is passed to the function, it is stored in the data variable.
@@AllThingsJavaScript Ah got it, thanks!
Hold up, in 4:34 you said that "this is our first example of a callback". However, you did make a callback at the beginning of the video, so how come this is the first example of a callback and not the second one? Thanks
It was kind of the same example, but you could call it a second example as we modified the way we did setTimeout.
@@AllThingsJavaScript I see. Thanks!
the event listener example showed me that I already really understand callbacks! Thanks for this!
I dont understand last function, because if we imagine it as async function it will log "Total score: 0 - Total Count: 0" then it will call callback function. Aren't we using callbacks while we have async function?
Callbacks are required for asynchronous JavaScript yes, but that is not their only application.
What does these lines of code mean exactly?
if(typeof callBack === 'function') {
callBack(data[counter]);
}
I suppose it checks if the argument callBack is a function, and if it is, what callBack(data[counter]); means?
And why when calling the processStudents function we feed it as arguments the students array (which I understand) and a function that takes as a parameter an object. What's the object in this case, I'm confused. How does JS know that obj refers to each element of the array students?
That if statement simply checks and makes sure that callBack is a function before we invoke it.
at last I understood callbacks 👍
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.
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.
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?
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 :)
Soo good! Thank you for the help!
4:20 Wasn't there a normal way to do this? Something like:
logWithDelay(){
doNothing(3000);
console.log("No callback or whatever");
}
Why was there a need to complicate the code with that?
setTimeout requires a callback. There is no other way to use setTimeout.
Why do you have ?
if(typeof callback === callback).
What is this line doing?
typeof checks the type of a value. It should be typeof callback === 'Function' I check to make sure it is a function before I try to invoke it. If I try to invoke something that is not a function, it would produce an error.
That's great! Thanks :)
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
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?
so... basically a callback is doing "function y(x){x()}; y(function(){});" or "let x = function(){}; function y(z){z()}; y(x);", instead of simply doing "function x(){}; function y(){this.x()}; y()" ? seems very... unnecessary o.0 setTimeOut is asnyc, ok i understand; but for me setOnSomethingListener is merely calling another function in a function, nothing async/back calling there o.0
A callback doesn't have to be asynchronous, but you can't do asynchronous programming without callbacks. Therefore, central to effective JavaScript coding. Having said that callbacks also present a different pattern for coding, which is a lot of what you see in this video.
great very great explanation ,will you make a tutorial for node.js ??
node is on my list, but it will probably come a bit later. Thanks for the feedback!
All Things JavaScript, LLC thabks for your attention I appreciate that but i have something in nodejs that I couldn’t understand can i ask you please about it ,it’s all about 7 lines of codes
Post the code
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.
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
}
Is there something sort of synchronous and asynchronous callback? If yes what's their difference?
A synchronous callback does not take advantage of something like setTimeout (handled by the browser). Thereby a synchronous callback is simply invoked when the code reaches the and is ready to do the callback.
@@AllThingsJavaScript
Thank you for you reply.
How can we identify or know or find out if a callback is synchronous or asynchronous?
@@akshay__sood In order for something in JavaScript to truly be synchronous, it must take advantage of the outer environment; the browser in the case of a web page. JavaScript is single threaded so it can only process one thing at a time. By using something like setTimeout or fetch (handled by the browser) we achieve asynchronous code, but this kind of code requires a callback in order to integrate back to the JavaScript engine.
@@AllThingsJavaScript so anything that happens after something (like set timeout or event handlers) is asynchronous ?
With asynchronous code as you mentioned we need to go back to JD engine so that's why they are callback?
@@akshay__sood setTimeout and event handlers allow asynchronous coding. A call back is any function that is "called back". Call backs are used with setTimeout etc. because it allows the function to be called back once the task, like setTimeout, is done.
so smooth. ilke it
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?
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.
11:12, can you explain a bit in detail, it's getting confusing at this point. Is this another way of using callback function ?
Basically, the callback is being defined from the function keyword to the closing curly brace. This is the function being passed into the callback parameter. This is the callback function. Does that help? If not could you specify what part is confusing?
//array is here
processtudent function(some,callback)
{
//console.log("1st call");//it is printed once my doubt
//loop through array element
if(cond)
callback(arrayelement)
}
process trident(array is passed,function(arrayelement recieved)
{
if(cond)
}
//my Question
processtudent function is called then one console is printed,callback is executed how 2nd time callback function is executed??(why console("1st call")is executed once?
I think it would help to see the contents fo the array. Can you post the entire code?