JavaScript Callbacks Explained in 5 Minutes (Essential for asynchronous code!)

hey I'm here to drop off my car for an oil change awesome it'll only take about an hour and what number can we call you at when we're done awesome yeah you can call me back at 555-555-5555 now that's a callback what's up everyone my name is James Q Quick and I do weekly videos on web development related topics and I do a lot with JavaScript Concepts and in this video I'm going to talk to you all about JavaScript callbacks in about five minutes so the first thing we need to know inside of JavaScript is functions are first class citizens and actually a callback is just a function that you pass as a parameter to another function that function will do some work and then call that callback function back just like we talked about with the oil change example earlier in the video you say hey I want you to do some work for me and then you give them a mechanism to call you back when they're done so that you're not there waiting on that work to be done the entire time so let's dive into some code and take a look at a couple of examples so the first one I think that is the most common is the set timeout function and you've probably seen this before so inside of set timeout you pass it a function and then the second parameter is some sort of DeLay So inside of your function you may do something like log hello all right so I've got this running with the live server so this is actually live reloading and you can see this logging out to the browser so this whole thing is the Callback function it's a parameter that's being passed to set timeout now we could move this to its own uh separate variable so we could call this log hello and still pass this in the exact same way so we could pass this in now and this will work the exact same way as long as we call this after that function has been initialized so now you'll see now one thing I do want to check is if you know how the basics of asynchronous JavaScript work so I'm going to give you a little example here we'll say two we'll do our console log of 1 and we'll do a console log of three so a little quiz for you and what order are these things going to be logged out in and even if we do this so we'll order with those log out in let me know in the comments below and if you want details about how or why it maybe doesn't work the way you expect let me know we can do a video dedicated to that so let's take another look at an example of callback functions I'm going to create an array with a few names in here so James Jess Lily and I don't we don't need ANS and arrays and uh savvy so this is me my wife and my two dogs so you've probably seen array functions like four each before so these actually use callbacks as well so with the for each you pass it a callback function that accepts a parameter of each individual item that we name here as name and then we can log out each one of these so we'll just log out name now this is a shorthand with es6 arrow functions if you're not familiar with those let me know I can do another video on those as well but what we're saying is for each one of these names this is the function that we want to be called as the for each is iterating through each one of those names so this should just log out what those names are now if we were to build our own I think this is a fun example to show you how callbacks work let's build our own so let's say kant's my for each and it's going to take in two parameters an array and then a callback function often you'll see that listed as a parameter as CB all right so what are we going to do in here what we're going to do a basic for Loop through an array so we'll say I've got a little snippet that will help but this will iterate through each item in the array it'll get each element and then with that element and we're missing an equals up here with that element what we're going to do is call that callback function so we'll Pat we'll call CB and then we'll pass in the element of the array so this is all the four each is doing so what we can say is we can call my for each we can pass in the names array and then we can have a callback function here that is going to accept the parameter of name and then we can log out that name so I'm going to uncomment the first one and this should do the exact same thing so we see those logged out as well so a callback function inside of here when we're creating our own for each is we Define this function that takes in two parameters an array and a callback it iterates through each element and then it calls the Callback this is the same as how the other array functions work like map sort reduce filter Etc they iterate through each item and call the callback for each one of those individual items now what we've shown so far are synchronous examples in JavaScript I want to show you an example of an asynchronous example as well so let's say we want to load a Pokemon from the Pokemon API so we can have a function that's going to take in an ID and then a callback function again and then what we're going to do is we're going to call Fetch and then I'm going to copy in the URL for the Pokemon API I like the Pokemon API because I like Pokemon and it's free so it makes for good examples here so we're going to make a request to this uh using the built-in fetch method and then we'll call Dot then to handle the response and with fetch you need to convert the response to Json and then we'll dot then to handle the actual uh data there so what do we do when that data comes back well again somebody called this load Pokemon function and told us to tell them when we're done by calling back their callback function so now we can call the Callback function with the Pokemon or with the piece of data and then we will call this function below and we'll pass in an ID of 56 I don't know which Pokemon that is and then we'll pass in our own callback function again defining this in line and this callback function as you can see should take a parameter that I'm going to name Pokemon and then we're just going to log out the Pokemon variable so we'll see if we get back this Pokemon data we do and Pokemon 65 is mate or 56 is Mankey so cool so callback functions are just functions that get passed to another function as a parameter that function will do some work and then call the Callback function to say hey I've done my work now it's your time to do whatever you want with this thing going back to the example of the getting my oil changed I say hey I want to get my oil changed they say okay we'll call you back when we're done at this number then I know to go pick up my car and do my work and take it home and go about my day so JavaScript callback functions in about five minutes let me know what other topics in JavaScript you'd like to see covered in five minutes I'm going to make this a bigger Series so let me know in the comments below hope you enjoyed it if you have any other questions share that as well and I'll catch you in the next one

Channel: James Q Quick

Views: 137,381

Keywords: javascript callbacks, callbacks explained, what are callback functions, javascript functions, javascript tutorial, javascript fundamental, asynchronous javascript, javascript functions with parameters, js callbacks explained, javascript promises, async javascript, callback functions, javascript tutorial for beginners, web development, javascript basics

Id: kz_vwAF4NHI

Length: 6min 42sec (402 seconds)

Published: Tue Aug 09 2022