All language subtitles for Async JavaScript Part 3- Async Callbacks

hello and welcome to this video about

asynchronous callbacks there are two

types of main styles that you will come

across

in asynchronous code they are the older

style callbacks

and the newer style promises whilst

callbacks are considered to be the older

type

it is still important to get to know

them case you come across them

on your journey to become a well-rounded

developer

async callbacks are functions that are

specified as

arguments when calling another function

that will get to work

executing code in the background only

when the

background code finishes running the

callback

is called don't worry if none of this

makes sense because we're going to go

through this

step by step with code an example

of an async callback function you might

have come across before

is when you use the add event listener

javascript

method the second parameter here

of the ad event listener javascript

method so right here

is considered to be an async callback

the method works in such a way under the

hood that if we pass an event throughout

the first parameter

this in this case it is a click but it

is one of many from a long list that

exists

the event listens out for this event and

once it hears the event

the second parameter so in this case the

callback function

is called when we pass a callback

function as an argument

to another function or method we are

only passing the function's

reference as an argument i.e the

callback function is not executed

immediately it is called back

asynchronously

somewhere inside the containing

function's body

the containing function is responsible

for executing the callback function

when the time comes so

that is essentially what is happening

all under the hood of the add event

listener

method i could of course also written

like this so just taken out this entire

function

and assigned it to the const alert

me so that is a function expression or

as you might have seen it written i mean

this is just a function

you could also just write function alert

me like so so just the traditional way

of writing a function

okay all of these are essentially the

same it is a contained function

it is not being called so now you can

see that

alert me is essentially equivalent to

this okay cons alert

parentheses our function curly braces

allow me equals parentheses curly braces

okay and that is of course what we are

passing into the ad

event listener okay i like to think of

it as this

like here is a function it is just

bursting with all the power

of a function but can't do anything with

it yet until

it is called and it just called inside

the method

under the hood or inside a function

cool to understand this a little bit

better

let's actually write our own function

one where we can see actually what is

going on

under the hood so here i have written an

example i'm just going to

paste this in here here is an example

that loads a resource by the xml http

request

api so this is going back to our first

ajax

lesson the first lesson of this mini

series

so what is going on here is that we

essentially have

two functions so function show image

and function create image we then

use the show image function and

call it with these three parameters

so this means that i'm essentially

getting apple jpeg

and passing onto the url so every time i

use url

in this function i'm essentially meaning

apple jpeg same for blob so when we pass

through

blob as the type the response type

is going to take blob as a string

response type takes many different

things please do some research on this

if you wish but we are

essentially passing through blob as the

type for the response

type and same for create image

so this is interesting this is the

callback you can see the function create

image here

and i am essentially passing it through

into this function

so this is it now this is create image

and i'm going to be using it here

okay but i'm only going to be using it

after

all of this has completed by this i mean

that essentially we have the

xml http request object here i'm getting

a new one

and then saving as the cons xhr so i can

use these methods

on it so essentially what i am doing is

waiting

for my apple image to

uh be gotten for this file so that i can

use it

only once i have the apple image

i can then pass through the response

into the callback

which is this so xhr response is going

here

here and then i am displaying the apple

okay so this is a great example of how

to use a callback because i only want to

display or create the image once

all of this has been completed

cool hopefully that makes

sense once again one function

another function i am then passing this

function through

into this function to be used as a

callback

please do note that not all callbacks

are asynchronous

some run synchronicity an example is

when we use

for each to loop through items in an

array

sort of like this in this example we are

just looping through an array

and we are just printing out values to

the console the

argument that we are passing into the

for each is of course

a callback function because you see the

parenthesis

the arrow function and you know the kali

braces

now there's nothing really to wait for

it here everything runs

immediately okay so that is just an

example of callback

running synchronously um hopefully this

lesson has been really useful

in learning a little bit about what a

callback

function is and how you would use it

in asynchronous javascript

okay so just to recap this

is a callback we are passing a function

into another function

only to be called later when it releases

all of its function energy thanks to the

parenthesis

this is also a callback function so you

can write it as

this where the function is separate and

you're just passing through the

reference for it

or you can write it like this okay and

this is of course the parenthesis

parenthesis uh arrow function and the

cardio braces

it is totally up to you next up now that

we have looked at quarterbacks

especially in the context of the xml

http requests api

let's move on to promises i will see you

in the next video