javascript callback functions tutorial

it's welcome to tech see tutorials today we are going to learn about callback functions in JavaScript which are also called higher-order functions now if you have used JavaScript you probably have already used callback functions if you haven't then you haven't done a real JavaScript programming so they are very useful and let's understand what they are in JavaScript functions are actually first-class objects just like you can pass objects into functions as argument you can pass other functions into functions as arguments and execute at some point so let's look at an example here in this example I have a function X and another function y now function y has an argument called callback I am executing this function callback then in function y what I execute it I can pass X which is a function as an argument as a callback and it would execute inside Y now if you notice something function X we are passing into Y as a function body we're not executing in passing the you know the results we're just passing the function body itself into into another function and we can execute it at some point so if I run this the first line it gets executed console.log do something and then the function X gets executed which basically console logs you know I am called from inside a function so this is a very simple way of doing it now you can you could be doing something before or after this callback function it would work fine now this is a very simple example of a callback function but just like anything when you're learning something you need to understand why are you learning this right why why do we need callback functions so I am going to give another simple example of some doing something without callback function and then improving using callback function so you can see the real use of callback functions and in the end I'm gonna give you a real practical example that you can understand apply in your code okay so I'm going to build a simple function called calc and what it's going to do it's going to it's going to take two numbers as arguments first two our numbers and the third argument would be calculation type and then inside the function it would based on the calculation type it would decide what to do with two numbers so for example if the argument third argument is add it would add these two numbers and return if it's multiplied then it would multiply these two numbers and return the result so inside the function I have to make the decision so I would say if calc type equal to add then I would return a basically number one plus number two simple right else if the calotype is that say multiply then it would simply return the multiplication after these two numbers so it would basically do this okay it's fine now if I execute this I can take out two three and add and I can console.log when I run this oops I have some error here oh I have else--if okay if I run it again I would get five now this works fine but let's say if this function calc is a part of some library just like jQuery library and user supposed to use this library and pass the number and calculation type and should get the result now in order for all the possible calculation type this library has to implement all of it right you could be passing ad multiply subtract or it could be some random operation that the library people have not thought about so what is the best way the best way to do it is make this function as abstract as possible in order to do that we can bring the the functionality add and multiply outside we don't need this inside the dysfunction so what we can do is we can take the whole thing and we can actually build this function outside so we can say add it is a function which takes two arguments a and B and it simply returns a plus B fine and I can have another function call multiply and it simply multiply these two numbers and returns it now here in the calc function all I have to do instead of calc type I can just simply say call back what's a function and inside I can just execute this function just like we looked in a previous example and pass number 1 and number 2 now here instead of passing the string ad we're going to pass this function itself now let's look at it if it works if I clear this and play this now I have to actually return this and it returns me five so now instead of ad I can say multiply and it would multiply this to a number and give me 6 I can even create my function you can see the use for this call that function because as a user I can create any function and pass into this library and it would give me this result I can say let do what ever let's say it's a function and what he does it's simply that it turns it consoles it back numbers here your your two numbers back and it basically gives the numbers back okay so if I clear this and run this I have to really pass this now I made a mistake function and actually I also need to pass this here do whatever it says here are your two numbers back two and three so this is a really power of callback functions now let's look at few interesting patterns on this right now I have a function add and multiply and do whatever which I'm passing you know as a callback function but actually I can write function directly as an argument I don't really have to define the function outside so I can simply do this function a B now here I can do subtraction I can say let it turn a minus B and it would work just fine if I run this it would give me minus 1 2 minus 3 is minus 1 now this function because I have I don't have a name for it it's called anonymous function when you have to use something only once you don't want to define it and pass it you can just directly write into function argument so they are very useful when you have to do something only once now if I tidy this up it looks more presented if this is how you really need to write not in like one line this is a better way of writing it second thing you want to do is when I pass the callback function and execute it I want to make sure that the user who's using it it's really passing a function not anything else so I need to check I need to do a check here before I actually the callback function so what I need to do is I would like to have an if statement if the callback function if type off callback equal to function then only I want to execute this just in case of somebody passed some garbage which is not a function then it should basically this should actually take care of it and you might want to put something in else maybe some error depends on your situation what you want to do but this actually won't break if somebody passed something else but the function now let's look at a practical example so here I have an array which has some numbers and string as properties you know 5 apples 7 cabbage and one been a banana so what I want to do I want to sort it by string so the Apple would come first banana would come second and the cabbage would come third so the best way to do it is using a callback function now javaScript provides a sort function but it it's up to us how we want to sort it so you can pass a callback function inside the sort function that will make the decision how the source is going to happen so if you look at this it would the the callback function has two values of l1 and l2 and we can say well one dot string which would be this if you have two values and whichever is bigger so if it's if if if the string a is big we can sort this would basically sort in in a reverse order so the cabbage would come first a banana would come a second and an apple would come last so if I sort if I basically run this if I run this I will get three objects here and I can expand it here and as you can see it has cabbage banana and apple now I can simply say switch the sign from greater than to less than and I run this and it would give me completely reverse order now how how easy this is sorting instead of string I can actually sort by number all I have to just say dot now here as you can see in this callback function V are deciding how we want to sort and it says tiny function but the sorting mechanism happening inside the sort function that is that we don't know exactly how it's happening but all we can control is the order you know and it works fine so now if I run this it should basically give me one five and seven because now I'm sorting by numbers so it gives a one five comes and then the seven comes last and if I switch the sign again it would give me seven five one so I'm controlling using this callback function how the sorting is going to work so this is an interesting example of how the callback functions are useful well so that's it folks I hope you learned something and if you did please provide some comment and like the video and subscribe it for the future cool videos thank you you

Channel: techsith

Views: 427,612

Rating: 4.8259764 out of 5

Keywords: callback functions, programming, javaScript tutorials, javaScript lessons, javaScript training java Script tutorials, java Script lessons, java Script training JS tutorials, JS lessons, JS training Advanced javascript tutorial Concepts, techsith.com, techsith, techsithtube, jquery

Id: pTbSfCT42_M

Length: 15min 40sec (940 seconds)

Published: Wed May 11 2016