Asynchrony and You
I recently had the opportunity to delve into a technical problem that called for in depth knowledge of how javascript’s asynchronous functions work. In order to solidify my understanding thereof, I’m going to break down, to the best of my ability, the inner workings of these mysterious functions.
First let’s talk about what async functions(in the parlance of our times) are exactly, and why they are needed. I’m going to be talking specifically about how they are used in javascript. Other languages use them, but JS is the one I’m most familiar with. Javascript is what’s known as a single threaded language. This means that there is only one call stack to execute functions. Only one thing can be done at a time. Typically these operations are executed using blazing fast modern processors in a matter of milliseconds, but occasionally there are tasks that need to be run that require considerably more time. Processing a large image file or more commonly, loading data using a shaky broadband connection. In these cases, while that hefty operation is being run on the single thread that javascript is able to handle, nothing else is happening. A webpage will look static and be completely non-interactive while the single thread is struggling along. Surely there must be an alternative!
Indeed there is. Enter the async function. An async function is able to tell the compiler to wait, just hold on a sec, to execute that function until literally literally everything else on the call stack is complete. This is incredibly helpful for building quick, responsive web pages, as the the general architecture and layout for the page can load while the assets that are being fetched are taking their sweet time becoming available. There are a number of built in functions that are asynchronous, such as setTimeout and fetch, though any number of custom async functions can be written by placing the async keyword before the name of the function itself when you are defining it. Like so.
async thisIsmyFunction() {
this is what I do}
While async functions are a godsend for responsive websites, they can also lead to some pitfalls for programmers not used to working asynchronously. Let’s get into it with some pseudocode.
const output = []some asynchronous function that changes the value of output()console.log(output)
The output of the console.log function will actually be an empty array. The reason for this is that the asynchronous function waits until everything else is done before changing the value of output, so the log happens before the array is changed.
Let’s get into some more weirdness. Let’s say we had an asynchronous function with a return value. What would happen if we logged the return value of that function?
function thisIsAnAsychronousFunction() {return 'What's happening here?'
}console.log(thisIsAnAsychronousFunction(), )// Promise {}
What’s that?! It’s a promise. Promises are packages of information that are designed to be executed as part of an asynchronous call stack. Anything that attempts to observe anything that is asynchronous will return a promise. In order to get at the juicy innards of the promise, the function has to implement the “then” function. .then lets you execute an asynchronous function, and then chain on a callback function to do something with the promise. Let’s see it in action.
async function thisIsAnAsychronousFunction() {
return 'this will be a promise!...unless'
}console.log(thisIsAnAsychronousFunction())
// Promise {}thisIsAnAsychronousFunction().then(data => console.log(data)// 'this will be a promise!...unless'
Using .then waits for the call stack to finish, and therefore allows the tasty nuggets inside of the promise shell to be fished out. You will notice I used the word and then an arrow. It’s simple arrow function syntax. Any word could have been used there, the function needs something to represent the value of the return value of the async function that it is interacting with.
Now let’s talk about one more useful tool to use. Await!
await.then is nice, but it requires that you have a callback function ready and waiting to do something with the promise returned from an async function. Sometimes you just want to save a value for later. In these case you can use the await keyword to get the return value from an async function after it has been resolved. A caveat. Whichever function is using await must also be inside of an async function. Here’s the syntax.
async function thisIsAnAsychronousFunction() {
return 'this will be a promise!...unless'}async function getTheInnards() {
let innards = await thisIsAnAsychronousFunction()console.log(innards)
}// 'this will be a promise!...unless'
Without the await keyword, the value logged would have been a promise, but await allows the function to wait until the asynchronous action is complete before doing its business.
That’s a brief primer with asynchrony in Javascript. Hopefully it will be helpful to someone in their journeys into the time bending adventure that is coding asynchronously.
