DEV Community: Moisés Fernández Zárate

Asynchronous JavaScript

Moisés Fernández Zárate — Thu, 08 Dec 2022 17:19:17 +0000

JavaScript is a single threaded language, which means that it can only handle one process at a time, and it executes the code sequentially because it cannot run another instruction until it finishes executing the current instruction. This becomes a problem whenever tasks that are long-running tasks must be executed, such as HTTP requests or handling device settings, but this is when asynchronous programming comes in handy.

What is Asynchronous Programming?

This is a technique that allows JavaScript to handle long-running tasks and run other events in parallel, instead of having to wait for the first task to be finished, and this has been done using callbacks, promises and recently async/await.

What is a callback?

A callback is any function that is passed as an argument inside another function and then is invoked from within that function to perform a task. A good example to show this is with the use of setTimeout() as shown below.

function printHelloWorld() {
  console.log('Hello World');
}

setTimeout(printHelloWorld, 5000);

This function prints 'Hello World' after 5 seconds because of the callback it received. This is a simple example, but sometimes it becomes more complicated as in the example shown below.

function firstFunction(callback) {
  console.log('This is the first message');
  setTimeout(callback, 2000);
}

function secondFunction() {
  console.log('This is the second message');
}

setTimeout(firstFunction, 5000);

setTimeout(firstFunction(secondFunction), 5000);

setTimeout(() => firstFunction(secondFunction), 5000);

The first call of setTimeout() prints 'This is the first message' after five seconds but doesn't execute the setTimeout() inside the firstFunction() because it didn't receive the callback.

The second call of setTimeout() prints 'This is the first message' immediately because by opening up the parenthesis, it stopped being a callback and then prints 'This is the second message' after 2 seconds.

The third call of setTimeout() prints 'This is the first message' after five seconds because we made it back a callback with the arrow function, and then prints 'This is the second message' after 2 seconds.

There were some cases where multiple calls were made in the code with many callbacks nested as in the example shown above, which had bad code readability and was not easy to main, this is called Callback Hell, but this was solved with the introduction of Promises.

What is a Promise?

A Promise in JavaScript is a special object which represents the eventual completion or failure of an asynchronous operation and its resulting value.

A Promise object has the following two properties:

PromiseStatus
PromiseValue

A Promise can only have one of the following three states:

pending - initial state
fulfilled - it means that the operation was completed successfully
rejected - it means that the operation failed

When creating a Promise, two arguments must be sent as parameters, the first one is resolve and the second one reject, which are in charge of changing the PromiseStatus to fulfilled or rejected respectively.

const promise = new Promise(function(resolve, reject) {
  resolve('Hello World');
});

The methods then and catch are used to handle the two possible states of a promise, the first one can be used to handle both fulfillments and rejections, and the second one only to handle rejections, but usually both are used combined because of code readability as shown in the example below.

function sumPositiveNumbers(number1, number2) {
  const promise = new Promise((resolve, reject) => {
    if (number1 < 0 || number2 < 0) {
      reject('Both arguments must be positive numbers');
    }
    const result = number1 + number2;
    resolve(result);
  });
  return promise;
}

sumPositiveNumbers(1, 2)
  .then(value => {
    console.log(value);
  });
// Expected output: 3

sumPositiveNumbers(-1, 1)
  .then(value => {
    console.log(value);
    return sumPositiveNumbers(-1, 1);
  }, reason => {
    console.log('Error: ' + reason);
  });
// Expected output:
// Error: Both arguments must be positive numbers

sumPositiveNumbers(5, 5)
  .then(value => {
    console.log(value);
    return sumPositiveNumbers(1, -5);
  })
  .catch(error => {
    console.log('Error: ' + error);
  });
// Expected output: 10
// Error: Both arguments must be positive numbers

When many promises are nested as in callbacks, a Promise Hell can be created and affect code readability and maintainability, but this can be solved by using the method all(). This method can be used when the promises don't depend on each other and returns a fulfilled promise only if all promises where executed successfully and a rejected promise otherwise.

function firstPromiseFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Cody'), 2000);
  });
}

function secondPromiseFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Bruno'), 2000);
  });
}

function thirdPromiseFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject('Database error.'), 2000);
  });
}

Promise.all([firstPromiseFunction(), secondPromiseFunction()])
  .then((responses) => {
    console.log(responses);
  })
  .catch((error) => {
    console.error('Error ' + error);
  });
// Expected output: ["Cody", "Bruno"]

Promise.all([firstPromiseFunction(), secondPromiseFunction(), thirdPromiseFunction()])
  .then((responses) => {
    console.log(responses);
  })
  .catch((error) => {
    console.error('Error: ' + error);
  });
// Expected output: Error: Database error.

Async and Await

These new keywords added in the ES6 Version made it simpler to work with asynchronous programming and promises in JavaScript. By adding the async keyword JavaScript interprets the function as an asynchronous function. Inside an asynchronous function, the keyword await can be used before a call to a function that returns a promise as in the example shown below.

const dogsDatabase = [
  {
    id: 1,
    name: 'Cody',
    age: 5,
    breed: 'Siberian Husky'
  },
  {
    id: 2,
    name: 'Timo',
    age: 12,
    breed: 'Poodle'
  },
  {
    id: 3,
    name: 'Bruno',
    age: 3,
    breed: 'Golden Retriever'
  },
];

function resolveAfter2Seconds() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Here is the dogs information:');
      resolve(dogsDatabase);
    }, 2000)
  })
}

async function getDogs() {
  console.log('Sending request to get dogs information.');
  const result = await resolveAfter2Seconds();
  console.log(result);
}

getDogs();
// Expected output:
// Sending request to get dogs information.
// Here is the dogs information:
// * The list of dogs *

The standard way to handle errors with they keywords async/await is by using the block try/catch.

function sumPositiveNumbers(number1, number2) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (number1 < 0 || number2 < 0) {
        reject('Both numbers must be positive.')
      }
      resolve(number1 + number2)
    }, 2000)
  })
}

async function getSum(number1, number2) {
  let result;
  try {
    console.log('Sending request to sum numbers.');
    result = await sumPositiveNumbers(number1, number2);
    console.log('The result is: ' + result);
  } catch(error) {
    console.log(error);
  }
}

getSum(-1, 5);
// Expected output:
// Sending request to sum numbers.
// Both numbers must be positive.

JavaScript | Mutability vs Immutability

Moisés Fernández Zárate — Wed, 23 Nov 2022 18:03:13 +0000

In JavaScript whether a variable is mutable or immutable it depends on its type and there are only two types of variables in which data is stored: primitive and reference.

Primitive Type (Immutability)

All the JavaScript primitive types that are the atomic values stored to a variable, which are the following:

Number
Boolean
String
Null
Undefined
Symbol

Following is an example of how these primitive types are stored in JavaScript:

let dog = "Chopper";
let dog2 = dog;

dog = "Cody";
console.log(dog2); // Expected output: Chopper

The variable 'dog2' is created as a new space in memory and is allocated with the same value as the variable 'dog', it is not a reference. Modifying the first variable won't change the value stored in the second variable because it is not a reference. This is a perfect example of Immutability in JavaScript.

Reference Type (Mutability)

This type is more complicated than simple and atomic values, they consist of multiple properties and are stored as references in memory. In JavaScript exist the following reference types:

Array
Object
Function

Following is an example of how these reference types are stored in JavaScript:

let dog = {name: 'Chopper', age: '5'};
let dog2 = dog;

dog.name = "Cody";
console.log(dog2); // Expected output: {name: "Cody", age: "5"}

The variable 'dog2' is created as a new variable, but only as a reference to the first object. Modifying the first variable affects the value shown when printing the second variable because it is a reference to the first object. This is a perfect example of Mutability in JavaScript.

JavaScript Fundamentals

Moisés Fernández Zárate — Mon, 31 Oct 2022 17:32:08 +0000

Differences between var, let and const

Variables declared using var can be used within the whole function where they were initialized, but variables declared using let and const can only be inside the block where they were created.

The values of variables declared using var and let can be reassigned, but in the case of const that's not possible.

Variables declared with var can have the same name, but in the case of let and const it's not possible and you will get a Syntax Error. It's only possible to do it for the latter options if they are declared in a different scope.

Variables declared with var and let without an initial value will have undefined assigned as default. In the case of const it's not possible to declare a variable and not assign a value to it, JavaScript will return a Syntax Error.

Variables declared with var are assigned as a property of the global object, unlike in the case of let and const.

Hoisting

Variables declared using var are read by the JavaScript interpreter as if they were declared at the beginning of the function or scope. This means that the value of the variable can be referenced before it is declared in the code.

The same thing goes for let and const but in these cases they are declared without an initial value until they have an assigned value in the code. This time between the beginning of the scope and the assignment of a value to the variable is called Temporal Dead Zone. During this time a variable can't be referenced until a value is assigned to it.

This is possible because JavaScript saves in memory in the Lexical Environment the references to the declarations as undefined and then assign the value to it later when they are initialized in the code. This is only possible for the following cases:

Class
Function
Const
Let
Var

Scope

This is an important concept because it manages the accessibility of variables in the code depending on how we handle their declaration. There are three type of scopes:

Global
Function & Local
Block

Global Scope

This is the scope outside a function, all variables declared here can be used anywhere in the code.

Function & Local Scope

This is the scope inside a function, all variables declared here can only be used inside the scope of the function.

Block Scope

This is the scope inside a pair of curly braces since JavaScript ES6, all variables declared here, except for var, can only be used inside this block.