Callbacks in JavaScript Explained!

hello everyone out there today i'm going to be explaining what a callback function is in my usual visual style for all you visual learners out there i'm going to start off with a simple example first and then move on to a harder code example later i really wanted to do this in my own way as i have seen some callback tutorials out there i think they really miss a key core concept that i really want to go over it's definitely helped me memorize how to use them and why they are so effective now who's this video for this video is for anyone who is currently learning javascript if you have used functions before you might actually realize that you have used the callback before so this is definitely the video for you if you are at that stage in your coding journey but first a word from our sponsor who has made this little video possible and as always please don't forget to give me that like and that sub so i can carry on creating more content for everyone this week's video sponsor is stream stream is a make of enterprise grade developer tools that help product and engineering teams solve two common problems at scale in-app chat and social activity feeds with stream developers can integrate any type of messaging or feed experience into that app in a fraction of the time it would take to build these features from scratch the stream chat is super easy to integrate into any app use the sdk or rest api to add stream into your react react native or flutter app or have a go at implementing the activity stream both are free of charge for small teams or personal projects go on have a play around and visit get stream forward slash and your kubo to let them know that you have come from watching this video it will really help out the channel so i appreciate it i will put the link in the video description below now in a nutshell a callback is essentially a function that is passed into another function and then called inside that function to complete some sort of routine or action sounds complicated don't worry we're going to go through this step by step until you feel comfortable okay so here's the function i have already pre-written it's really basic all it does is essentially grab our button so here is our button in our html so it's grabbing that grabbing it using the query selector which is a javascript method as a javascript method we can use in order to grab the element of button and then i'm storing it as the const button to use in our javascript file and then i've written this function here so the function is called toggle which again i'm grabbing the button and i'm using classlist toggle to toggle the class of alt color that i have written here so alt color is red now if we look at what this looks like in the browser well at the moment it's just a yellow button why is this this is because this function toggle is not being called yet so now if i call the function so i just go toggle and i call it like so so i'm just adding these two parentheses and i save the page and refresh my button is turning red okay so that is it is being called instantaneously however what if we don't want it to be called instantly we want it to toggle if we click the button so to do this i'm going to use a callback function to call the toggle function when certain things are met to show you this with an example let's look at a javascript method that takes functions as one of its parameters and that is add event listener the ad event listener is a javascript method and is also considered a function so when you have button add event listener click toggle you're essentially saying that if you click on a button we want the function to be called so we want the toggle to happen i am grabbing the button which is an html element and then using the add event listener javascript method on it and passing through the string of click which is one of many possible events i can pass down and if a click on the button happens then this function will be called and the button will be changed to red the way that i like to think of this is that its function this function here toggle is just sitting here waiting to burst and once we call it like so so by adding the parenthesis it gets called and releases all of its wonderful javascript power without the parenthesis however it is a callback function this is essentially the same as me writing the following this is now an anonymous function that is being passed through but we get the exact same results or even use an arrow function like so so as you can see the function is being called only by the outer function or method of add event listener if a click has been made all three of the second arguments being passed in to the ad event listener are callback functions so just before we move on i want to make it super clear that toggle is the same as me writing this and toggle with the parentheses is not the same as me writing this toggle with parenthesis will be called immediately and cannot be used or is not considered a callback great now that we have a simple example let's actually move on to see what happens if we want to pass parameters to our callback function we have to open up the parenthesis right to pass the parameters through and this will essentially call the function immediately this is no longer a callback function let's move on to explain how we would do this as well as learn more about asynchronous programming as we know javascript runs code sequentially from top to bottom however sometimes we don't want this behavior we want a function to be called after something else happens or a certain condition is met this is called a synchronous programming if i run this code as is the two functions will be called from top to bottom so i will get i'm the first action as a string followed by and the second action in the console log also as a string now what if i pass the first action into a set timeout set timeout is another javascript method that takes functions as one of its parameters so just like the add event listener so i'm just going to grab the first action function and pass it through into set timeout as its first parameter followed by the milliseconds i want to pass until the function gets caught if i pass through 5000 i should get the string of i'm the first action five seconds after the string of i'm the second action in my browser if i refresh the page so let's go ahead and do that and see if i am right great once again first action is a callback function in this scenario it is being passed into another function and is then invoked inside the outer function to complete some kind of routine or action if we wanted to we can even have like a bunch of different callbacks happening everywhere to really take control of when we want certain functions to record so i'm just going to take the second action function and put it inside a set timeout inside of the first action which is an argument of the outer set timeout and the root of our project now what behavior would you expect if i refresh this page have a think and i'm just going to run it great so even though the second action is called after two seconds because it's in the function called first action and that is inside the set timeout and as a callback function that won't get called until five seconds have passed the string i'm a second action will get called after all of this runs and therefore after seven seconds have passed now what if i want to pass a parameter into the first action this will be a problem as soon as i open up the parenthesis i am calling the first action function immediately so there we go let's have a look at this see so we are not getting the correct behavior now with this code if we refresh the page the first action is being called straight away we don't want this we need to use a callback for this like so okay so we're putting the quote essentially we made a call back but then we opened up the parentheses so now we need to put this in a callback so let's do it now if we do this we can safely pass the function with parameters as a parameter of the set timeout so now let's give it a go awesome you could of course take this a step further and making the first action function reusable to print out a message and then call the second action function which is now also reusable like so so once again i would open up the parenthesis for the callback here so i can pass any message i wish but now the callback is invoked so we need to make this a callback function again like so and let's just pass the message in i'm going to take out this string so i can now pass through whatever string i wish here for it to be console logged in the second action great so we have made the second action reusable now let's do the first action so we are already passing through a callback as the first parameter of the first action let's pass through a message as the second parameter and make sure that reflects the same here and once again just grab the message so we can pass through whatever string we wish into the first action wonderful and now let's move this around so you can see and let's just check this works so one two three four five and one two great now this can be quite a difficult topic to get your head around so i would suggest playing around this for yourself and getting to grips with the callback concept i don't want to over complicate anything at this point but if you want to take it a step further please have a go at making callbacks in your own functions and not just practicing them through to javascript methods that take arguments to approach this think of all javascript methods as functions let's take a callback and use it under the hood so as illustrated here with the ad event listener once certain conditions are met this is of course just for illustration purposes of course but hopefully we'll get you thinking once again about how function is passed through as an argument and as a callback to be used later by the outer function once a condition is met if you go back to our original code right here let's just write another function so i'm just going to write third action like so just like we've been doing the whole time so i'm just going to put on a console.log and then pass it into the first action as a callback so once again callback and simply call it here so once again callback and then calling the function inside of the outer function that is essentially what is happening under the hood of add event listener and set timeout wonderful so i hope uh you found this video useful i just want to hone in again that this is a callback function this is a function being called once again this is a callback function and this is a function being cool wonderful okay well i hope you've learned something if this still isn't clear please do let me know in the description below as i'd really like you to uh let me know if i can be explaining stuff better um the next place that i would suggest to go from here is to look at async javascript and start looking at promises thanks very much and i'll speak to you soon

Channel: Code with Ania Kubów

Views: 19,079

Rating: 4.9647436 out of 5

Keywords: callbacks, javascript callbacks, callback functions, async javascript, software development, addEventListener, setTimeout, callback example in javascript, software engineering, coding free, learn javascript for free, javascript bootcamp, coding bootcmap, functions in javascript, functions javascript exercises, functions javascript, javascript for beginners, javascript for beginners 2021, getstream

Id: cNjIUSDnb9k

Length: 14min 3sec (843 seconds)

Published: Wed Jun 16 2021