Creating asynchronous algorithms

Up to this point, we have used JavaScript code to run simple web applications, which include: using variables, calling functions, and playing with the DOM. On functions, specifically, we even passed functions into another function (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*/

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 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 the 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 that 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 the 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 the 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 returns 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 the 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 the 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 show 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 the 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 response.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.

Continue learning for free about: