Async/Await
In an attempt to create study guides for the students I am mentoring, I wanted to quickly touch on async/await, and the importance of this when it comes to learning JavaScript.
Before we begin, it’s important to understand what asynchronous Javascript means. Being comfortable with asynchronous JS helps you break down JS problems into smaller sections/tasks, and they can help you get your best desired outcome.
What is synchronous JS?
Synchronous JS means that you are accomplishing tasks in order, and they are getting completed in order. By default, JS is synchronous, meaning it will complete tasks one by one, and not in conjunction with others.
For example, let’s say you have a website full of photos. Synchronous JS will load each photo one by one, instead of loading them all at once. If the first photo doesn’t finish loading, none of the others will continue their loading, and it will stop on photo one.
For example:
console.log("My name")
console.log("is")
console.log("Sara")=> "My name"
=> "is"
=> "Sara"
What is asynchronous JS?
Asynchronous JS allows you to complete multiple things at once. Thinking back to the website full of photos we just discussed, all of these photos will load at once instead of waiting for each photo to load separately. In this case, they are all functioning separately, and we don’t need to wait for the first photo to finish loading before we move onto the next — they are their own entity.
A great example of asynchronous code is a timer, or in this case, a setTimeout function.
console.log("My name")
setTimeout(() => {
console.log("is")
}, 5000)console.log("Sara")^ the setTimeout function will take 5 seconds to log to the console, which will have an output like this: => "My name"
=> "Sara"
=> "is"
Now why is this important to know?
Because of concepts such as promises and callbacks, understanding async JS is crucial in order to ensure your code functions the way it is expected to.
Promises and Callbacks are examples of async JS in action.
A callback function will take in another function as its argument, here is a great article to read deeper into callbacks as a concept.
Callbacks functions are set up in a way to where you can use another function as an argument within another function. As you can imagine, this can get quite confusing very quickly if not keeping track of your code properly. Our previous example of setTimeout is an example of a callback function. Functions that accept other functions as arguments are also called higher-order functions (a very important concept when learning React, but also great to know for interviews!)
However, too many callback functions can put you in what is known as “callback hell”. And…. you don’t want to be in callback hell.
A way for us to escape this callback hell and ensure that our code works properly and when we need it to is by using promises. A promise is basically exactly what it sounds like — our code is making a promise to us that it will run when it needs to. In other words, the MDN docs describe it as “the eventual completion (or failure) of an asynchronous operation and its resulting value.”
Within the promise, you are able to invoke callback functions, or in our case, we can also set a promise with a setTimeout as the callback function.
You can also set promise chains that function almost synchronously (even though they are asynchronous). In other words, one promise will succeed, and directly afterwards, your next promise will succeed and so on and so forth.
But what does this have to do with async/await?!
In order to create an asynchronous function, you just need a special keyword. This keyword is: async ! An example:
async function () {
// code here
}Sounds easy enough, right?
The await keyword waits for the promise to settle and return its result.
Above is a code example that shows how to use async/await in another function that is not dealing with setTimeouts.
