About us

Learning library

For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Machine Learning Engineering (16 weeks)

Full-Stack Software Developer

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

From zero to getting paid as a developer, learn the skills of today and tomorrow. Boost your professional career and be hired by a technology company.

Start Coding

← Back to Lessons
Edit on Github

Creating asynchronous algorithms

Asynchronous Programming with JavaScript
  • Asynchronous

Asynchronous Programming with JavaScript

Up to this point, we have used JavaScript code to run simple web applications, which includes: using variables, calling functions and playing with the DOM. On functions, specifically, we even passed functions into another functions (callback functions) and there's more to talk about this.

Let's start by stating that JavaScript is synchronous and single-threaded by definition, i.e: the code is executed from line 1 until the last one, one at a time and in order(ish). Take a look at this example:

Synchronous (default)

1function runFirst(){ 2 console.log("first"); 3} 4function runSecond(){ 5 console.log("second"); 6} 7runSecond(); 8runFirst(); 9 10/* 11CONSOLE OUTPUT: 12 > second 13 > first 14*/

In here: line 5 runs before line 2 because we're calling runSecond() (line 7) before runFirst() (line 8). Breaking the order by commanding the computer to call (or execute) the code block within a function.

Things get more complicated when calling functions inside functions, as we can see here:

Calling functions

1function runFirst(){ 2 console.log("I want to run first"); 3 runSecond(); 4 console.log("I also want to run when runFirst runs"); 5} 6function runSecond(){ 7 console.log("Where am I running?"); 8} 9runFirst(); 10 11/* 12CONSOLE OUTPUT: 13 > I want to run first 14 > Where am I running? 15 > I also want to run when runFirst runs //this line of code had to wait for runSecond() to finish 16*/

OK What...?

This happens because the call stack in JavaScript keeps track of the functions that are currently running and are being processed:

  • runFirst() is pushed into the call stack because we called it (line 9).
  • We see our first console.log (line 2), after that, runSecond() is called (line 3).
  • runFirst() pauses its execution and runSecond() starts running.
  • Second console.log executed (line 7).
  • Once runSecond() finishes, runFirst() starts again, executing the rest of its code, the last console.log (line 4).

F U N!

But wait, there's more... We could even pass a function as an argument to another function (nope, this is not a typo). The function sent as a parameter it is called a callback function. Take a look:

Callback functions

1function runFirst(someFunction){ 2 console.log("I want to run first"); 3 someFunction(); 4 runSecond(); 5 console.log("I also want to run when runFirst runs"); 6} 7function runSecond(){ 8 console.log("Where am I running?"); 9} 10runFirst(aThirdOne); 11 12function aThirdOne(){ 13 console.log("this is crazy"); 14} 15 16 17/* 18CONSOLE OUTPUT: 19 > I want to run first 20 > This is crazy 21 > Where am I running? 22 > I also want to run when runFirst runs 23*/

...you may want to take a second look, don't worry, we'll wait...

Explanation time!

We've added a new function aThirdOne() (line 12), which console-logs: "this is crazy"; but we are not calling it directly, instead, we are passing the its name as a parameter to runFirst() (line 10). runFirst(someFunction) it's now expecting a value (line 1) which will be called as if it were a function (line 3). Note that the name is different because we pass the value, not the variable name. This produces a new print in the console: "this is crazy", before we call runSecond() (line 4).

...jump around!, jump around!, jump around!, Jump up, jump up and get down!...

Now, let's assume that we need to load some files from a server, specifically, images:

Synchronous image loading

1function fetchingImages(){ 2 console.log("Load them!"); 3 //SOME CODE TO LOAD IMAGES 4 console.log("Images loaded!"); 5} 6function userIsWaiting(){ 7 console.log("I don't like waiting"); 8} 9fetchingImages(); 10userIsWaiting(); 11 12/*CONSOLE OUTPUT: 13 > Load them! //user starts waiting 14 //now user has to wait for the images to arrive, time: unknown... browser: frozen :( 15 > Images loaded! //after ?? seconds 16 > I don't like waiting //we don't want users to wait that long to see images 17*/

Unnacceptable...

In a real life website, users will have to wait for a long time to see something, all because the DOM processing has to wait for the pictures to arrive from the server; and this is all because we are using the same thread of execution for everything.

Asynchronous

Asynchronous programming is a way to process lines of code and handle the result without affecting the main thread.

1function fetchingImages(){ 2 console.log("Load them!"); 3 fetch("the_url_of_the_image").then( (response) => { 4 if(response.ok){ 5 console.log("Images Loaded!!"); 6 } else { 7 console.log("Uh-oh something went wrong"); 8 } 9 }); 10} 11function userIsWaiting(){ 12 console.log("I don't like waiting"); 13} 14fetchingImages(); 15userIsWaiting(); 16 17 18/*CONSOLE OUTPUT: 19 > Load them! //user starts waiting 20 > I don't like waiting //no waiting! DOM ready to see 21 //... and ?? seconds later 22 > Images loaded! OR Uh-oh something went wrong //Images!... Magic! || Oops, no images 23*/

Javascript offers a handful of predefined asynchronous functions which we can use to solve any possible scenario. Some of them are:

  • Fetch API: used to load files asynchronously.
  • setTimeout(): used to set timers between blocks of code.

In this case, we used the Fetch API to load the images and then (after getting an answer from the backend) we wrote some feedback from the process.

Keep in mind that any network call could fail because of many reasons, we should always be prepared for failure.

Promises

A promise is nothing more than the result of an asynchronous operation. It represents the completion or failure of that result in form of object provided by the promise.

A promise has 3 different states:

  • Pending: promise result has not been determined yet because the asynchronous operation has not been completed.
  • Fulfilled: it is when asynchronous operation is finished and the promise returned a value as an object.
  • Rejected: it takes place when the operation failed.

This is how a promise can be created

1var myPromise = new Promise(function(resolve, reject) { 2 setTimeout(function() { 3 resolve("I was resolved"); 4 }, 300); 5}); 6myPromise.then((obj) => { 7 console.log(obj); 8}); 9console.log(myPromise); 10 11/*CONSOLE OUTPUT: 12 >promise object //it will return a promise object 13 >"I was resolved" 14*/

Resolve and Reject functions

  • Resolve is used to change the status of a promise from pending to fulfilled.
  • Reject is used to change the status from pending to rejected.

Important methods to know when using promises

  • resolve: it returns a promise object that has the status of resolved with a value.
1//here Promise represents the Promise object. 2Promise.resolve("I was resolved with this value").then(value => console.log(value)); 3 4/*CONSOLE OUTPUT: 5>"I was resolved with this value" 6 7*********** 8 a better recommended approach will be initializing a variable 9 equals to the resolved Promise. 10 11--- sample: 12 var myResolvedPromise = Promise.resolve("I was resolved with this value"); 13*/
  • reject: it returns an already rejected promise with a reason.
1Promise.reject(new Error("I was rejected")).catch(error => console.log(error));
  • then: this method return a promise and it can take up to 2 arguments. One for the resolved promise and one for the rejected promise. Above there is an example that uses then method and takes one argument.
1var promise = new Promise(function(resolve,reject){ 2 resolve("I was resolved and you can see me when you use then method"); 3}); 4promise.then(value => console.log(value));
  • catch: returns a promise and deals with rejected operations. It is very handy when trying to debug or showing errors.
1var promise = new Promise(function(resolve,reject){ 2 reject("I was rejected and you can see me when you use catch method"); 3}); 4promise.catch(error => console.log(error));

Async/await

  • Async/await is a way to write asynchronous code.
  • Async is a JavaScript function and can contain an await expression.
  • Await pauses the execution of async function and waits for a Promise's result.

☝️ Remember that await expressions are only valid inside async functions. If you use them outside you will have a syntax error.

1function returnedPromiseHere() { 2 return new Promise((resolve, reject) => { 3 setTimeout(() => { 4 resolve("I am the images coming from the database"); 5 }, 1000); 6 }); 7} 8async function useAsyncFunction() { 9 console.log("I am a fast task"); 10 var result = await returnedPromiseHere(); 11 console.log(result); 12 console.log("I had to wait for await to finish"); 13} 14useAsyncFunction(); 15 16/*CONSOLE OUTPUT: 17 >"I am a fast task" 18 //after 1 second... 19 >"I am the images coming from the database" 20 >"I had to wait for await to finish" 21*/

Async becomes powerful when there are multiples steps in action:

1function promise1() { 2 return new Promise((resolve, reject) => { 3 setTimeout(() => { 4 resolve("I am resolved as 1"); 5 }, 100); 6 }); 7} 8function promise2() { 9 return new Promise((resolve, reject) => { 10 setTimeout(() => { 11 resolve("I am resolved as 2"); 12 }, 200); 13 }); 14} 15function promise3() { 16 return new Promise((resolve, reject) => { 17 setTimeout(() => { 18 resolve("I am resolved as 3"); 19 }, 300); 20 }); 21} 22async function handlingAllPromises() { 23 var first = await promise1(); 24 var second = await promise2(); 25 var third = await promise3(); 26 27 console.log(first); 28 console.log(second); 29 console.log(third); 30} 31handlingAllPromises();

In the example above instead of awaiting for a promise every new line, we could use the Promise.all method and wait for all the promises to be fulfilled.

1 var [first, second, third] = await Promise.all([promise1(), promise2(), promise3()]);

Also you can do async functions as arrow functions

1const handlingAllPromises = async () => { 2 var [first, second, third] = await Promise.all([promise1(), promise2(), promise3()]); 3 4 console.log(first); 5 console.log(second); 6 console.log(third); 7}

How to handle errors in async functions?

A good way of handling errors in async functions is to use the try ... catch statements.

1async function handeErrors() { 2 let msg; 3 try { 4 msg = await promise1(); //notice this method is already written in your application 5 console.log(msg); 6 } catch(err) { 7 console.log(err); 8 } 9}

Fetch api is promise based. Guess what? You can use it in your async functions too!!

1async function fetchData(endpoint) { 2 const response = await fetch(endpoint); //notice the use of fetch api 3 let data = await res.json(); 4 data = data.map(user => user.ID); 5 console.log(data); 6} 7 8fetchData(http://dummyData/api/allUsers); //this is an example endpoint 9 10/*CONSOLE OUTPUT: 11 >[1, 2, 3, 4] //here we get all users ID from the database 12*/

In conclusion

You have the ability to create awesome and faster web applications. In addition, users and faster tasks no longer need to wait for slow tasks to be finished, thanks to asynchronous programming.