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.
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
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
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!
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.
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!
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
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.
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.
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) ...
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?
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 :)
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...
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 :)
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
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?
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?
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
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.
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.
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?
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
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.
@@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.
One if the best explanation on callbacks on TH-cam.
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.
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!
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
best explained javascript callback topic on TH-cam, well done, helped me so much.
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
Both beginners and expertise will love your explanation
Even the other great youtube teachers didn't explain it this well!
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!
Only video that explains callback's in a simple, down to earth way.
I’v spent several weeks searching straight forward explanations about js...Finally I found your channel!
Thank you!!!!
Glad it helped!
Outstanding! I was struggling with this, but this has helped a huge amount.
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
Was really confused with callbacks, but now I finally got it. Thank you very much!
Glad it helped!
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
this channel is very much underrated...Great video.
ok im still new to the concept. Cant say i totally got it but i got some grasp of it. Thx was helpful
Hey Buddy, you are simply the best explaining callbacks in javascript, congratulations!
Short and well explained, this kind of videos are the best
Yeah, definitely the 'go to guy' for all things JS on TH-cam. Thanks.
Wow, thanks!
Amazing lesson! I loved even the keyboard sounds. They made me feel like I was the one who was typing! haha
this is the best tutorial on callback so far. Many thanks.
Glad it was helpful!
Great video sir! You have a uniquely positive way of speaking that keeps me interested and positive minded at the same time.
Thanks!
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
One of the best videos - explaining how to create custom callbacks and get them invoked !!
pure and simple explanation
This is a great video for a concept that I was finding difficult to grasp! So clear.
Glad it was helpful!
Your explanations are very concise.
Your explanations are just great... Thank you sir for helping me
Glad to help!
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!
Great explaination.
best explanation on call backs thanks
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.
Awesome your teaching is very logic and simplified !!
Excellent Explanation thank you
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
Very clearly explained
Very clearly explained. Thanks!
Great tutorial, one of the only ones out there which are simple to understand
Thanks... Finally i understand by this explanation ❤
Most welcome 😊
This is a really good tutorial!
this is very good tutorial for everyone .Thanks a lot
Subscribed for more. I Wanted this. Thank you so much.
Great tutorial on JavaScript callback functions. Well done!
Thank you sir for sharing this, it's really helpful
Glad it was helpful!
Great job explaining this topic 👍🏽 thanks!
what a great explination. Thank you.
Glad it was helpful!
Thank you so much; very useful!
the event listener example showed me that I already really understand callbacks! Thanks for this!
Thank you very much for this video! It was very clear and educational :)
You are a legend man!
Thanks All concepts are clear now
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.. :)
Thank you so much, I really got the concept
The best callback ever
Great tut. Subscribed
Really Helpful
Very well done
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.
Ur amazing teacher sir
Thank you!
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
Awesome explanation, thank you!
Great video. Clear and understandable.
Brilliantly explained! Thanks a ton!
thank you bunches man. thank you.
You are a genius. Please do more examples and explanations.
Thanks, clearly explained
I finally understand callbacks, thank you very very much! :D
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
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!
thank you
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.
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.
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.
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!
at last I understood callbacks 👍
thanks
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
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?
@@AllThingsJavaScript ok its the processStudents function in line 10. I`m slowly getting there. Thanks
That's great! Thanks :)
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.
so smooth. ilke it
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.
There is a way to get the code along for checking or for boilerplate ?
I haven't put together a way to make this possible yet.
All my courses provide code for the examples and exercises.
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!
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.
Excelent sir
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.
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?
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
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.
How would I filter images on a page using a search bar or drop-down. Could I use data-*?
You could also use queryselectorall. Have you tried that. I have a few tutorials on it.
@@AllThingsJavaScript I haven't! I'll check it out when im home from work! Also I'm amazed at the quality of content!