Understanding JavaScript’s sync vs async
This article will shed some light on JavaScript’s synchronous verse asynchronous code. Understanding the difference between these two is essential when it comes to understanding how one’s code runs.
Let’s first start by defining synchronous and asynchronous.
JavaScript is synchronous, blocking, single-threaded code. This means that only one operation can execute at a time, starting from the top of a file down to the very bottom of the file. It runs from the top down and in sequential order. When theres a function that takes a long time to run, it must finish executing before moving on to the next line of code.
Asynchronous code means that the code can move to another task before if finishes — multiple things can happen at the same time. It is non-blocking, unlike synchronous code. Usually, asynchronous functions take a while and need time to run. They can run in parallel with other functions that are executing.
A few examples of asynchronous functions include: setTimeout(), setState(), promises, etc.
Learning the difference between sync and async was solidified for me during my final assessment at The Flatiron School. In my review for the project in React/Redux, part of the assessment was being able to demonstrate which parts of our code were sync verses async.
I will share some code below from my final project to demonstrate. This was a todo app with a user being able to create lists.
There are console.log() placed throughout the above code which fire in a specific order. The console.log() are labeled ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, and ‘g’.
The code will run in this order:
console.log(a)
console.log(b)
console.log(c)
console.log(e)
console.log(g)
console.log(d)
It begins when a user creates a list in my todo app. The the addAList() function is called in the handleSubmit() function.The handleSubmit() function is called once a user creates a list. Remember JavaScript executes one line of code at a time. Thus it will print console.log(‘a’) to begin, then hit the addAList() function. Once it hits the addAList() function, it will go to the actions index file where it will hit the addAList() function. The first line of code is console.log(‘b’), which will print in the console. Next, is the return function which dispatch as a parameter. After that is another console.log(‘c’), again printed to the console. Then you have a fetch call which is synchronous but has promises that make the fetch call asynchronous. The .then(s) return a promise and attach a callback that is parsing a response object. It will then wait in the call stack before executing. So we skip over the console.log(‘d’) because it’s inside the fetch call. Then that takes us to console.log(‘e’) which is outside of the promises in the fetch call. The console.log(‘e’) gets printed to the console. Then while the promises are in the call stack, it goes back to the handleSubmit in the ListForm component and hits the next line code. The console.log(‘g’) gets printed to the console. And finally, console.log(‘d’) gets printed to the console. The reason console.log(‘d’) is last to run is because the promises were in the call stack which can not run until all the other code has executed.
Moral of the story, it helped me to go through the code one line at a time including putting console.log()’s throughout in order to fully understand how the code was executing. My app is small, but in large apps this can get really complicated. Also, know the functions that are synchronous verse asynchronous.
Thanks for reading!
