DEV Community: Memo Villalta

Promises, Async & Await

Memo Villalta — Sun, 29 Aug 2021 22:51:22 +0000

PROMISES

Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them.

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

A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation completed successfully.
rejected: meaning that the operation failed.

CHAINING

A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.

Here's the magic: the then() function returns a new promise, different from the original:

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise2 = doSomething().then(successCallback, failureCallback);

This second promise (promise2) represents the completion not just of doSomething(), but also of the successCallback or failureCallback you passed in, which can be other asynchronous functions returning a promise. When that's the case, any callbacks added to promise2 get queued behind the promise returned by either successCallback or failureCallback.

Basically, each promise represents the completion of another asynchronous step in the chain.

In the old days, doing several asynchronous operations in a row would lead to the classic callback pyramid of doom:

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

With modern functions, we attach our callbacks to the returned promises instead, forming a promise chain:

doSomething()
.then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

The arguments to then are optional, and catch(failureCallback) is short for then(null, failureCallback). You might see this expressed with arrow functions instead:

doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(`Got the final result: ${finalResult}`);
})
.catch(failureCallback);

Chaining after a catch:
It's possible to chain after a failure, i.e. a catch, which is useful to accomplish new actions even after an action failed in the chain. Read the following example:

new Promise((resolve, reject) => {
    console.log('Initial');

    resolve();
})
.then(() => {
    throw new Error('Something failed');

    console.log('Do this');
})
.catch(() => {
    console.error('Do that');
})
.then(() => {
    console.log('Do this, no matter what happened before');
});

This will output the following text:

Initial
Do that
Do this, no matter what happened before
- Note: The text Do this is not displayed because the Something failed error caused a rejection.

ASYNC/AWAIT

Synchronous vs. Asyncronous

When you execute something synchronously, you wait for it to finish before moving on to another task. When you execute something asynchronously, you can move on to another task before it finishes.

That being said, in the context of computers this translates into executing a process or task on another "thread." A thread is a series of commands (a block of code) that exists as a unit of work. The operating system can manage multiple threads and assign a thread a piece ("slice") of processor time before switching to another thread to give it a turn to do some work. At its core (pardon the pun), a processor can simply execute a command, it has no concept of doing two things at one time. The operating system simulates this by allocating slices of time to different threads.

Now, if you introduce multiple cores/processors into the mix, then things CAN actually happen at the same time. The operating system can allocate time to one thread on the first processor, then allocate the same block of time to another thread on a different processor. All of this is about allowing the operating system to manage the completion of your task while you can go on in your code and do other things.

Asynchronous programming is a complicated topic because of the semantics of how things tie together when you can do them at the same time. There are numerous articles and books on the subject; have a look!

Synchronous vs. Asychronous

Async

There’s some special syntax to work with promises in a more comfortable fashion, called “async/await”. It’s surprisingly easy to understand and use.

Async functions

Let’s start with the async keyword. It can be placed before a function, like this:
```
async function f() {
  return 1;
}
```
The word “async” before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.

For instance, this function returns a resolved promise with the result of 1, let’s test it:
```
async function f() {
 return 1;
}

f().then(alert); // 1
```
…We could explicitly return a promise, that would be the same:
```
async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1
```
So, async ensures that the function returns a promise (see promises above), and wraps non-promises in it. Simple enough, right? But not only that. There’s another keyword, await, that works only inside async functions, and it’s pretty cool.
- Await

The syntax:

  // works only inside async functions
  let value = await promise;

IMPORTANT: The keyword await MAKES JavaScript wait until that promise settles and returns its result.

Here’s an example with a promise that resolves in 1 second:

  async function f() {
    let promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve("done!"), 1000)
    });

    let result = await promise; // wait till the promise resolves (*)

    alert(result); // "done!"
  }

  f();

The function execution “pauses” at the line (*) and resumes when the promise settles, with result becoming its result. So the code above shows “done!” in one second.

Let’s emphasize: await literally makes JavaScript wait until the promise settles, and then go on with the result. That doesn’t cost any CPU resources, because the engine can do other jobs meanwhile: execute other scripts, handle events etc.

It’s just a more elegant syntax of getting the promise result than promise.then, easier to read and write.

Can’t use await in regular functions

If we try to use await in non-async function, there would be a syntax error:

  function f() {
    let promise = Promise.resolve(1);
    let result = await promise; // Syntax error
  }

We will get this error if we do not put async before a function. As said, await only works inside an async function.

Let’s take the showAvatar() example from the chapter Promises chaining and rewrite it using async/await:

We’ll need to replace .then calls with await.
Also we should make the function async for them to work.

   async function showAvatar() {

    // read our JSON
    let response = await fetch('/article/promise-chaining/user.json');
    let user = await response.json();

    // read github user
    let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
    let githubUser = await githubResponse.json();

    // show the avatar
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

    // wait 3 seconds
    await new Promise((resolve, reject) => setTimeout(resolve, 3000));

    img.remove();

    return githubUser;
  }

  showAvatar();

Pretty clean and easy to read, right? Much better than before.

await won’t work in the top-level code

People who are just starting to use await tend to forget the fact that we can’t use await in top-level code. For example, this will not work:

   // syntax error in top-level code
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  We can wrap it into an anonymous async function, like this:

   (async () => {
    let response = await fetch('/article/promise-chaining/user.json');
    let user = await response.json();
    ...
  })();

await accepts “thenables”

Like promise.then, await allows to use thenable objects (those with a callable then method). The idea is that a 3rd-party object may not be a promise, but promise-compatible: if it supports .then, that’s enough to use with await.

Here’s a demo Thenable class, the await below accepts its instances:
```
   class Thenable {
    constructor(num) {
      this.num = num;
    }
    then(resolve, reject) {
      alert(resolve);
      // resolve with this.num*2 after 1000ms
      setTimeout(() => resolve(this.num * 2), 1000); // (*)
    }
  };

  async function f() {
    // waits for 1 second, then result becomes 2
    let result = await new Thenable(1);
    alert(result);
  }

  f();
```
If await gets a non-promise object with .then, it calls that method providing native functions resolve, reject as arguments. Then await waits until one of them is called (in the example above it happens in the line (*)) and then proceeds with the result.

Async class methods

To declare an async class method, just prepend it with async:

  class Waiter {
    async wait() {
      return await Promise.resolve(1);
    }
  }

  new Waiter()
    .wait()
    .then(alert); // 1

The meaning is the same: it ensures that the returned value is a promise and enables await.

RESOURCES

Async/Await

Object Oriented Programming 💊

Memo Villalta — Sat, 28 Aug 2021 05:49:39 +0000

INTRODUCTION

Object-oriented programming is a term that as a developer, you hear a lot and you build into the concept as you write more code, it was until recently that I decided to take a deeper dive into really understanding what it is and the greater advantages of exploiting its benefits.

Here's a quick example of how an Object usually looks like in javascript:

let myObject = {
    myStringProperty: 'OOP',
    myNumberProperty: 21,
    myMethod: () => {
        return this.myNumberProperty++;
    }
}

DEFINITION

OOP (Object-Oriented Programming) is an approach in programming in which data is encapsulated within objects and the object itself is operated on, rather than its component parts.

It's important to mention that JavaScript is heavily object-oriented. It follows a prototype-based model (as opposed to class-based). Every single datatype has its own prototype with its own properties and methods, the way to invoke them is using the keyword prototype, for example: Array.prototype. With this we just created an instance of an array.

The best way to put OOP into simple words: box containing characteristics, traits, attributes, features, etc., that define a concept or idea. For example, if we want to describe a car in OOP, we could do something like this:

let car = {
    model: '...',
    year: 0000,
    engineOn: false,
    start: _ => {
        return this.engineOn = true;
    },
    stop: _ => {
        return this.engineOn = false;
    }
}

On the example above we just modeled a car into an object containing all its key properties and methods, which are functions that a car actually can do.

BENEFITS

Pre-OOP, JavaScript programming was mainly procedural, which basically means, having a lot of variables with a bunch of functions which would alter data in order to achieve a desired output. Which in most cases is "easy" to follow-up and might be straightforward. The problem with this is, as your program grows, so does its complexity, and you might end up with a large number of functions all over the place with repetitive code blocks prone to breaking and bugs, in other words: spaghetti code, but there's four core concepts that OOP provides, which will help us find ways to manage this issue.

ENCAPSULATION

The first benefit is the ability of encapsulating information into units, making it easy to access and manipulate. These units are objects, the data/variables is our properties and any manipulations affecting the data is our methods.

Here's a clear example that brings to light the benefits of encapsulation:

let baseSalary = 30000;
let overtime = 20;
let rate = 15;

function getWage(baseSalary, overtime, rate) {
    return baseSalary + (overtime * rate);
}

In this example, we have procedural code with 3 variables on one side and a function performing an arithmetic calculation returning a result on the other side, you can say that they are decoupled.

Here's how this code block would look through the eyes of OOP:

let employee = {
    baseSalary = 30000,
    overtime = 20,
    rate = 15,
    getWage: _ => {
        this.baseSalary + (this.overtime * this.rate);
    }
}

employee.getWage();

We created a new employee object with three properties and a single method which computes the data returning a result. Benefits are clear, if you look at the getWage function you can notice there's no parameters being passed along; since the employee object already contains all data within its properties, we can use the scope to use them (this). All properties and methods inside the employee object, are highly related and modeled into one single unit. So we can say, one of the symptoms of procedural code it's functions with multiple parameters, but as you write more OOP code, you'll get functions with fewer parameters. The lower the number of parameters, the easier it is to use and maintain.

ABSTRACTION

The main purpose of abstraction is: the ability to remove a complex concept out of sight and mind. You can image a CPU as a black box with buttons, since the case covers the motherboard, cables, power source, graphic cards, fans, etc., people don't really give a lot of thought of all the delicate intricacies that go into the build of having a working computer. From here you can say that the concept of a CPU has been abstracted from the user.

You can use the same technique in OOP by hiding some of the properties and methods from the outside. Some of the benefits of doing this would be:

A simpler interface to interact with the object.
You reduce the impact of change.

By having a container unit, you're able to just expose some properties and methods, making it more digestible for the user. As well, if you change these private methods contained within the object, changes won't leak to the outside global scope of our code and affect less of the overall functionality of our program. By this you're avoiding the spaghetti mentioned up top.

INHERITANCE

By using inheritance, we avoid the need of redundant code. Objects can be modeled into cookie-cutters which will create multiple variables, each having the same properties and methods. With this we're creating multiple clones with different names but with the same functionality. You can later reference these clones in a unique and particular way, affecting one of them but not all. This introduces us to the concept of an object template, or constructor. By using constructors you can generate object instances that will have the same usability across our program, instead of having to redefine all these properties and methods per element created.

Constructors are functions which assign features to an object. Here's a quick example of how this looks:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = _ => {
    alert('Hi! I\'m ' + this.name + ', and I\'m ' + age + ' years old.');
  };
}

In this example we're creating a person with name and age as properties and a greeting method. In order to use it, we write the following:

let person1 = new Person('Jimmy', 20);
let person2 = new Person('John', 21);

console.log(person1.name); // Jimmy
console.log(person2.name); // John

POLYMORPHISM

To understand Polymorphism better, we're going to look into how the word is compose, poly means many and morph means form. In OOP, polymorphism is a core concept that provides a way to perform a single action in different forms. It provides an ability to call the same method on different JavaScript objects. As JavaScript is not a type-safe language (unless you are using either Typescript or strict mode), we can pass any type of data members with our methods.

Going back to our Person example, we're able to see how the greeting method returns two different outputs, since it depends on the values on name and age.

person1.greeting(); // Hi! I'm Jimmy, and I'm 20 years old.
person2.greeting(); // Hi! I'm John, and I'm 21 years old.

Basically the advantage of polymorphism is, that as developers, we are able to design objects to share behaviors and to be able to override shared behaviors with specific ones, taking advantage of inheritance to make this happen. If we want to alter the behavior of one specific instance of the person class and create an athlete, we would want to go about it like this:

function Athlete(age, weight, speed){
 this.age = age;
 this.weight = weight;
 this.speed = speed;
}

Employee.prototype = new Person();

After this, we want to alter the behavior of the greeting method, by letting users know how fast our new athlete can go:

Athlete.prototype.greeting = _ => {
    alert('Hi! I\'m ' + this.name + ', I\'m ' + age + ' years old, and I can run up to ' + speed + ' miles per hour');
}

Being able to do all this, will provide a user friendly and more elegant way to describe different cases for specific scenarios that demand multiple outcomes depending on the type of the input. That's something that would be written more extensible within switch/case statements.

SUMMARY

Object-oriented programming allows us to model/design our data as units, providing the benefits of Encapsulation, which allows us to group related variables and functions together, reducing complexity and reusing code along different parts of the program. With Abstraction, we hide the details and complexity, showing only what's necessary, helping us to isolate the impact of changes. Inheritance helps us to eliminate redundant code and lastly, with Polymorphism we are able to avoid overloading our code with multiple case scenarios.