All language subtitles for Async JavaScript Part 2- Async vs Sync Explained

hello my internet friends and welcome to

this video which we're gonna be learning

about

asynchronous javascript by understanding

what synchronous

or sync javascript is first

this video is actually part of a little

asynchronous javascript mini series i am

doing so if you do enjoy this video

please do go on to

watch the others to really get a

well-rounded uh learning experience of

what asynchronous javascript is all

about but before we get going a quick

word from our video sponsors which is

the reason that this video is here for

you

today hashnote is one of the easiest

ways to start a developer blog that will

get

seen globally if you are looking to get

noticed by the developer community

hashnode will help distribute your posts

on their platform

it's a blogging site built for

developers by developers

and not only that you can move it onto

your personal domain

super easy too just check out these

wonderful

reviews please do have a go at signing

up

and if you do please use the link in my

description to let them know this ad

has worked now if you have ever

encountered a website that relies on a

database or an

api or some other third-party service

that can take

time retrieving our data it is likely

that you have already come across

a use case for asynchronous javascript

to allow us to understand what

asynchronous javascript

is let's start off by making sure we

understand what

synchronous javascript is too

so if you have covered the fundamentals

of javascript you would have unknowingly

been coding the majority of your lessons

synchronously let's look at some code

here we have three functions now if i

call the functions like

this so all three of them here

what do you expect will happen in the

console

we will get these strings i'm the first

action

i'm the second action and i'm the third

action

show up in exactly that order

this is because javascript runs from top

to bottom

or in other words sequentially the lines

are

executed one after the other

now let's look at another example

so here we have an example in which i am

grabbing

a button from our html and then

grabbing that button again and using the

add event listener javascript method

and passing through the event of click

followed

by some code then we have the console

log of count

followed by document create element in

which i create an h1 tag

and assign it to the const text

next i'm grabbing the text and giving it

a string

which has nothing to do with the count

and then

sticking in our html

so if i click this button in our browser

when do you expect the text to show up

in the browser

let's have a look and see you will

notice that the text only shows up

after the entire loop has completed

this will take a bit of time not a lot

in this example but definitely more than

say if we were to do

one loop like this

but why does this time delay happen well

while each operation is being processed

nothing else can happen

rendering is paused this is because

javascript is

single threaded only one thing can

happen at a time

on a single main thread and everything

else is

blocked until an operation completes

before we move on it's actually

important to tell you that today

many computers have multiple cores so

can do multiple things at once

programming languages that can support

multiple threads can use

multiple cores to complete multiple

tasks

simultaneously great now that we have

covered

synchronous code let's get into

asynchronous code

now for the reason we spoke about

earlier to do with blocking

many web api features now use

asynchronous code

this is especially true for those that

access

or fetch something from something

external

this can be fetching a file from the

network or getting data from a database

or accessing a video stream from a

webcam and so

so much more now this can sometimes be

problematic let's have a look at why

here is some code that's been written in

an attempt to fetch

an external image so we can use it in

our file

when you fetch an image from a server

it is unlikely that it will be returned

immediately

this is because the image can take a

long time to come to us

this means that when it comes to running

the second line

here it could throw an error

because the response is not yet

available

so in other words you have no image

that's come back for you to work with

so think of it like this here we have

some

code here we have the code that is

responsible for fetching the image

here we have some code that displays the

image in our browser

all in one thread now if we run our code

we will run it

sequentially so i'm bringing out all the

buzzwords here

this means that this code will get run

from top to bottom

okay so this code will get run this code

will get run but uh-oh

it's taking a long time to get a

response

in the meantime the third cone gets run

and we have no image to show

and we get errors okay so we are running

it but there's no image

the part here is being run

asynchronously

but at the same time the rest of the

code is living its life as usual

and moving on without the response that

is not the behavior we want

we need to get the images to show right

but how

for this we can use either an old style

callback or a new style promise

we will go into these in the next video

in this mini-series i'll see you soon