Kyle here from Web does simplified.

In this video, I'm going to be going over a second versus synchronous programming, which is a concept that confuses many beginner, intermediate level developers.

It's also a pattern that is incredibly common in Java script and especially and no Js.

So something that you need to have a fairly strong understanding of before you can start to truly use these languages and frameworks to their full potential.

So let's get started now.

I'm going to start by explaining the differences between a circus and synchronous coat singleness code.

We'll start at the very top of a pile and execute all the way down to the bottom of a file each line in order until it gets to the bottom and it will stop.

Hey, circle.

This code starts out very similar.

We'll start at the top of the file and execute the code until it gets to the bottom.

But during that execution, it'll run into certain asynchronous functions or code, or it'll split off and execute that asynchronous code separately from the rest of the code.

And that's usually because it needs to wait, reduce some operation that takes a long period of time, so the synchronised code will execute from the top to the bottom.

But the A C units code will start at the top and execute until it hits something that is a synchronous and the little execute that and the rest the coat at the exact same time.

And I'll do that for every ace or gonna sting It hits, so you may have multiple different threads running.

You're different code in different sections, so your code may execute in a different order, but in synchronous coded always executes in the exact same order.

And that's really where the difference comes from.

A synchronised code is harder to work with because it will execute in a different order every single time.

Potentially, which means that you have to make sure that your code will work no matter which path it takes, whether it executes everything in order, in reverse order or any other scrambled order that you haven't thought about before.

So let's jump into some examples in visual studio code showing you the differences between a synchronous and sacred is code.

Right now, I just have a really simple Java script file open and on the right.

I have the consul for that file open so we can see the different things that I print out.

I'm gonna start by writing an incredibly simple synchronous file here.

So we'll just start by declaring two variables.

Well, say equals one and B equals two.

And then we're gonna block out those variables to the screen.

So we'll like a and then we're gonna wanna be.

If we say that, you'll see it prints one and then two.

And that's because, as we expect, the first variable that we print here is a which equals one.

And the second variable we print is B, which equals two.

So as we could expect there an order from top to bottom one and two.

And if we put anything else in here, what say we just want to console comes soul dot log.

And if we just want to say synchronous, if we say that you'll see that open synchronous before one and two.

And as because it comes before and in synchronous files, it'll always execute top to bottom.

But what happens if we throw in some asynchronous code?

So let's do it here above all the rest of our synchronous code.

What is going to use the set time out function, which is by nature and a sinker dysfunction?

This function takes another function that it will execute after a certain amount of time, which you specify.

So what does tell this function here to do a log and we'll just say, Hey, sink code right there And then we have to specify how long we wanted to take.

So we'll say it'll take 100.

Men could milliseconds before executes.

And if we save that, you'll see that our racing from Shin down here prince after a synchronous and 123 even though it comes before them in the actual flow of the file itself.

And that's because this set time out doesn't actually run the function in here until after these 100 milliseconds.

And at that point, all of the rest of this code has already run because it sees this function pews, this other function to log this after 100 milliseconds, and it just keeps going as soon as it logs that, and it doesn't wait for anything else to finish executing.

And that's what makes a synchronous coach so powerful because you don't have to wait thes 100 milliseconds in order to print out this log.

You just keep going with the rest of the coat and then after 100 milliseconds, it'll just come back to this function and set time out is not the only form of asynchronous code in Java script that's built in the concept of promises, which is something that you see whenever you see a dot ben hur dot catch coming after a function, especially when you're doing fetching, for example, is another great example of asynchronous code that you don't actually know how long it's going to take.

Since you don't specify the time out, let's create a fetch function in here and what is going to fetch the index page that I have, which is just an empty page?

Essentially and then so promises you put that out then and then you give it a function, and this function is going to execute as soon as this fetch is done.

So it's going to fetch the index page of my application.

And then as soon as that's done, it'll call this dot ben function, and inside of here what is gonna log fetch.

And if we say that, you'll see that fetch happens after synchronous a and beer printed out.

But it happens before a sink is actually printed out, and that's just because fetch is quicker than 100 milliseconds in this case.

And it may look really simple, you may think, Well, of course, that time out will happen after the stuff that comes after it and fetch will happen after because it has to go get something.

But a lot of times what tricks people up is they may in this set time out, want to print out the A variable, for example.

But afterwards they just say that a equals 10 for example.

So instead of one, they think it'll print one here in this time out and that little print 10 down here.

But in reality, it's going to print 10 inside of the time out.

We could just say time out here so we know which one's which.

And if we save this and running, you'll see that it's prints out 10 for a even though, eh is not septal tent until after the set time out.

But that's because the time up, as we said, occurs 100 milliseconds after it hits the line where it sets the time out, and we set a equal to 10 after the time up.

And this is something that really confuses a lot of people, especially one.

It's not obvious where your time outs are on, you're a sink.

Functions are, and your variables start to get messed up.

This is why, if you're using some form of asynchronous function, it's almost always better to pass the variables into the A sink and dysfunction other than relying on them from outside.

The sinker asynchronous function says they could be changed by the rest of your program without you actually knowing it.

And it could cause a lot of problems.

And in a way, to really spot asynchronous functions is every single asynchronous function, for the most part, is going to take a function as a parameter, which is going to be called after a certain delay, which is the eighth Circuit is part of it.

Not every single function that takes a function of an argument is a synchronous, but in general, most functions that take function arguments are going to be a synchronous, so that's one way that you could spot these asynchronous style functions, and that's really all there is to asynchronous versus synchronous coat.

It's really a pretty straightforward concept, but it can really be difficult to wrap your head around because it's not intuitive tohave code, executing in different threads and at different times, then the way it's listed inside of the actual file here.

So hopefully this helps you understand the differences between a synchronous and secrets code a bit better and allows you to use some of these functions like fetch and set time up more effectively without running into any bugs.

If you did like this video, please make sure you subscribe to my channel for more videos just like this.

Also check out my videos linked over here, which is going to be for more Java script related content.

Also, let me know down of the comments below anything that's confusing you guys so that I could make videos on these topics to hopefully help you and others out with this problem.