3 weeks down

3 Weeks Down

Update of Progress

This week we continued to focus on vanilla JavaScript. We made sure that we understood how to pull information from APIs, utilize localStorage in browsers, and created a new portfolio project.

The project was a custom website for a restaurant. (You can view mine here.) We had to use all the skills we’ve learned thus far to build the site including pulling information from an API. Our pretend restaurant is brand new so the owner’s are constantly changing and refining the menu. Lucky for us, they created an API so we can keep the website constantly up to date with the current fare.

While working with our APIs we came upon a problem: if I want to request information from a second API, using information returned from the first, things don’t behave as expected.

Asynchronous vs. Synchronous

Functions in Javascript are like runners in a 100m sprint - they don’t wait for each other. When a JavaScript file is read all functions begin running at once. This is because JavaScript is an asynchronous programming language.

Let’s return to the track example to illustrate the difference between asynchronous and synchronous languages.

Synchronous programming languages execute commands in a specified order like runners in a relay race. At the beginning of the race one runner starts while the other runners wait until they are handed the baton to begin running.

Asynchronous languages execute everything simultaneously. At the beginning of the race all the runners start running.

So how does this affect our API calls?

We have two API requests to execute. api-1 and api-2.

Imagine api-1 gives us a list of hotels with open rooms organized by cheapest to most expensive. And api-2 returns a list of prices for rooms in a specific hotel. We create some JavaScript code so that api-2 uses information from api-1 to return a list of prices for rooms in the cheapest hotel. When we run this code it doesn’t work! Because JavaScript is asynchronous the two APIs try to run simultaneously. And without the information from api-1, there is nothing to request from api-2.

How do we fix this? With callbacks.

Callbacks

Callbacks are extremely important in JavaScript because they allow us to run functions in a specified order. So what is a callback?

A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.

Callbacks used to be quite tricky but lucky for us JavaScript has recently added native support for Promises.

Promises

A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

We discussed what a callback is and why we need them so let’s jump right into creating a promise.

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

The promise constructor takes one argument, a callback with two parameters, resolve and reject.

Now that we have a promise, let’s implement it.

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

then() takes two arguments, a callback for a success case, and another for the failure case.

Conclusion

JavaScript is an asynchronous language that runs functions simultaneously. In order to have a function wait on another action to complete before running we use callbacks. Callbacks and promises are powerful and complex JavaScript concepts. I urge you to research these on your own to gain a deeper understanding of how they work and when to implement them.