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
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!
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
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!
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.
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?
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
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
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?
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) ...
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...
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 :)
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 :)
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?
The function is being defined at the same time it is being passed in. This is called an anonymous function and happens quite frequently in JavaScript. Notice that the second parameter starts with function; this is where I am defining it.
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.
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.
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?
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.
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.
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
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?
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 }
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.
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
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.
//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?
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!
After so many tutorials on TH-cam now i understand calkback functions, thanks man.
Glad to help!
Your voice is Crystal clear...
but his keyboard sounds crappy :)
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!
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.
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
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!
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
this channel is very much underrated...Great video.
Yeah, definitely the 'go to guy' for all things JS on TH-cam. Thanks.
Wow, thanks!
This channel has the clearest explanations about JS. I simply love it. Thanks for the lessons!
Hey Buddy, you are simply the best explaining callbacks in javascript, congratulations!
Outstanding! I was struggling with this, but this has helped a huge amount.
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
Was really confused with callbacks, but now I finally got it. Thank you very much!
Glad it helped!
this is the best tutorial on callback so far. Many thanks.
Glad it was helpful!
ok im still new to the concept. Cant say i totally got it but i got some grasp of it. Thx was helpful
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
Your lessons are incredible. One of the better js tutorials on here
Short and well explained, this kind of videos are the best
Great video sir! You have a uniquely positive way of speaking that keeps me interested and positive minded at the same time.
Thanks!
One of the best videos - explaining how to create custom callbacks and get them invoked !!
Amazing lesson! I loved even the keyboard sounds. They made me feel like I was the one who was typing! haha
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!
This is a great video for a concept that I was finding difficult to grasp! So clear.
Glad it was helpful!
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.
pure and simple explanation
Your explanations are just great... Thank you sir for helping me
Glad to help!
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!
Your explanations are very concise.
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.
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.
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
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.. :)
best explanation on call backs thanks
Awesome your teaching is very logic and simplified !!
Excellent Explanation thank you
This is so slick - I love it
Great explaination.
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
Very clearly explained. Thanks!
Very clearly explained
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?
this is very good tutorial for everyone .Thanks a lot
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
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.
Great tutorial on JavaScript callback functions. Well done!
This is a really good tutorial!
Great tutorial, one of the only ones out there which are simple to understand
Thank you sir for sharing this, it's really helpful
Glad it was helpful!
Great job explaining this topic 👍🏽 thanks!
Thank you very much for this video! It was very clear and educational :)
Thanks... Finally i understand by this explanation ❤
Most welcome 😊
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.
Subscribed for more. I Wanted this. Thank you so much.
The best callback ever
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 :)
the event listener example showed me that I already really understand callbacks! Thanks for this!
what a great explination. Thank you.
Glad it was helpful!
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.
10:03 where is the definition of callback function ? Isn't it should be defined before calling it ?
The function is being defined at the same time it is being passed in. This is called an anonymous function and happens quite frequently in JavaScript. Notice that the second parameter starts with function; this is where I am defining it.
Thank you so much, I really got the concept
You are a legend man!
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.
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
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.
Awesome explanation, thank you!
You are a genius. Please do more examples and explanations.
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.
Thank you so much; very useful!
Thanks All concepts are clear now
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.
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
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.
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!
Great tut. Subscribed
Brilliantly explained! Thanks a ton!
Great video. Clear and understandable.
I finally understand callbacks, thank you very very much! :D
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?
Could you please make tutorial of promise in javascript?
I will add that to the list.
thanku so much ,eagerly waiting
Its funny he promised to make a promise video.
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
}
Thanks, clearly explained
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.
Really Helpful
Ur amazing teacher sir
Thank you!
Very well done
This is what im looking for, how to create my own functions with callbacks, thank you alot, sir.
Glad it was helpful!
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
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.
really u r great explainer.....
Thanks a lot
//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?
Do you have any video related with indexeddb?
th-cam.com/video/g4U5WRzHitM/w-d-xo.html Also, you can get a complete list of tutorials here: www.allthingsjavascript.com/youtube.html