Asynchronous Javascript

What is synchronous javascript? When talking about javascript, you may have come across a term called the javascript interpreter or javascript engine. If you haven't, the interpreter is basically just your browser and how it reads and evaluates javascript (or node if executing javascript on the server). The interpreter parses (fancy word for "reads") your javascript code in a top down order. Think of this in the same way you would read a book. You start reading (at least in most languages) from left to right and top to bottom. Consider this code snippet: console.log('hello') console.log('world') console.log('!') // hello // world // ! In javascript, the next line of code will not be allowed to run until the previous line has completed and this is referred to as blocking code. So in our example, the log for 'world' will not run before the log 'hello' because of its order. What is asynchronous javascript? Asynchronous javascript is code that can run out of order of the original flow of code. Consider this snippet: console.log('hello') setTimeout(() => { console.log('world') }, 1000) console.log('!') // hello // ! // world setTimeout is an asynchronous function that takes a function as an argument (a callback) and a time (in milliseconds) that will act as the amount of time to wait until it can execute the callback passed. Looking at the example, the interpreter starts to parse the code from top to bottom. It first logs hello to the console. It moves on to the next line of code and sees that there is a setTimeout which is asynchronous. It determines that we don't need to wait for this line to finish. It registers this callback in a different queue for execution (beyond the scope of this article), so we can move on to the next line to execute. It then logs the ! to the console. Now, at minimum 1000 milliseconds (1 second) has passed. It can now execute the callback in setTimeout and logs world to the console. Asynchronous code is non-blocking, meaning that the interpreter doesn't have to wait for the async code to execute for it to move to the next line for processing. Think of it like asking someone on a date when you were in high school (might be showing my age here). You say on a note something along the lines of "Will you go out with me?" and a few boxes that say [] yes ✅ [] no ❌ [] maybe ❓ You pass it off to that person and and go about your day until they give it back with a reply (and hopefully you didn't get rejected

Apr 29, 2025 - 18:42

What is synchronous javascript?

When talking about javascript, you may have come across a term called the javascript interpreter or javascript engine. If you haven't, the interpreter is basically just your browser and how it reads and evaluates javascript (or node if executing javascript on the server). The interpreter parses (fancy word for "reads") your javascript code in a top down order. Think of this in the same way you would read a book. You start reading (at least in most languages) from left to right and top to bottom.

Consider this code snippet:

console.log('hello')
console.log('world')
console.log('!')

// hello
// world
// !

In javascript, the next line of code will not be allowed to run until the previous line has completed and this is referred to as blocking code. So in our example, the log for 'world' will not run before the log 'hello' because of its order.

What is asynchronous javascript?

Asynchronous javascript is code that can run out of order of the original flow of code.

Consider this snippet:

console.log('hello')

setTimeout(() => {
  console.log('world')
}, 1000)

console.log('!')

// hello
// !
// world

setTimeout is an asynchronous function that takes a function as an argument (a callback) and a time (in milliseconds) that will act as the amount of time to wait until it can execute the callback passed.

Looking at the example, the interpreter starts to parse the code from top to bottom. It first logs hello to the console. It moves on to the next line of code and sees that there is a setTimeout which is asynchronous. It determines that we don't need to wait for this line to finish. It registers this callback in a different queue for execution (beyond the scope of this article), so we can move on to the next line to execute. It then logs the ! to the console. Now, at minimum 1000 milliseconds (1 second) has passed. It can now execute the callback in setTimeout and logs world to the console.

Asynchronous code is non-blocking, meaning that the interpreter doesn't have to wait for the async code to execute for it to move to the next line for processing. Think of it like asking someone on a date when you were in high school (might be showing my age here). You say on a note something along the lines of "Will you go out with me?" and a few boxes that say

[] yes ✅
[] no ❌
[] maybe ❓

You pass it off to that person and and go about your day until they give it back with a reply (and hopefully you didn't get rejected