Asynchronous Vs Synchronous Programming

Key Takeaways

hello everybody kyle here from webdev simplified in this video i'm going to be going over a synchronous versus synchronous programming which is a concept that confuses many beginner to intermediate level developers it's also a pattern that is incredibly common in JavaScript and especially in nodejs 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 asynchronous and synchronous code synchronous code will start at the very top of a file and execute all the way down to the bottom of file each line in order until it gets to the bottom and it will stop a circulars 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 will 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 synchronous code will execute from the top to the bottom but the ACE winners code will start at the top and execute until it hits something that is asynchronous and then it will execute that and the rest of the code at the exact same time and it will do that for every ace your goodness thing it hits so you may have multiple different threads running your different code in different sections so your code may execute in a different order but in synchronous code it always executes in the exact same order and that's really where the difference comes from asynchronous code is harder to work with because it'll 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 and 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 asynchronous and synchronous code right now I just have a really simple JavaScript file open and on the right I have the console for that file open so we can see the different things that I print out I'm going to start by writing an incredibly simple synchronous file here so we'll just start by declaring two variables we'll say a equals 1 and B equals 2 and then we're going to log out those variables to the screen so we'll log a and then we're going to log B and if we say that you'll see it prints 1 and then 2 and that's because as we expect the first variable that we print here is a which equals 1 and the second variable we print is B which equals 2 so as we can expect there in order from top to bottom 1 and 2 and if we put anything else in here let's say we just want our console console dot log and if we just want to say synchronous and if we save that you'll see the dope M synchronous before 1 & 2 and as because it comes before and in synchronous files it will 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 we're just going to use the set timeout function which is by nature and asynchronous function this function takes another function that it'll execute after a certain amount of time which you specify so we'll just tell this function here to do a log and we'll just say async code right there and then we have to specify how long we want it to take so we'll say it will take 100 milliseconds before it executes and if we save that you'll see that our async function down here prints after a synchronous and 1 2 3 even though it comes before them in the actual flow of the file itself and that's because this set timeout doesn't actually run the function in here until after these 100 milliseconds and at that point all of the rest of this code is already run because it sees this function queues this other function to log this after 100 milliseconds and then just keeps going as soon as it alongside and it doesn't wait for anything else to finish executing and that's what makes asynchronous code so powerful because you don't have to wait these 100 milliseconds in order to print out this log you just keep going with the rest of the code and then after hundred milliseconds it'll just come back to this function and set timeout is not the only form of asynchronous code in JavaScript that's built in the concept of promises which is something that you see whenever you see a dot Ben or 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 timeout so let's create a fetch function in here and we're just going to fetch the index page that I have which is just an empty page essentially and then so with promises you put that dot 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 been function and inside of here we're just gonna log fetch and if we save that you'll see that fetch happens after synchronous a and B are printed out but it happens before async 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 timeout 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 timeout want to print out the a variable for example but afterwards they just say that a equals 10 for example so instead of 1 they think it'll print 1 here in this timeout and that it'll print 10 down here but in reality it's going to print 10 inside the timeout we can just say timeout here so we know which ones which and if we save this and run it you'll see that it's prints out 10 for a even though a is not set till 10 until after the set timeout but that's because the timeout as we said occurs a hundred milliseconds after it hits the line where it sets the timeout and we set a equal to 10 after the timeout and this is something that really confuses a lot of people especially one it's not obvious where your timeouts are and your async 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 asynchronous function other than relying on them from outside the syncher asynchronous function since they could be changed by the rest of your program without you actually knowing it and it could cause a lot of problems and 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 a circuit as part of it not every single function that takes a function as an argument is asynchronous but in general most functions that take function arguments are going to be asynchronous so that's one way that you can spot these asynchronous style functions and that's really all there is to a synchronous versus synchronous code it's really a pretty straightforward concept but it can really be difficult to wrap your head around because it's not intuitive to have code executing in different threads and at different times than the way it's listed inside of the actual file here so hopefully this helps you understand the differences between asynchronous and synchronous 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 to subscribe to my channel for more videos just like this also check out my videos linked over here what you're going to be four more JavaScript related content also let me know down in the comments below anything that's confusing you guys so that I can make videos on these topics to hopefully help you and others out with this problem thank you guys very much for watching and have a good day