DEV Community: Rodolfo Machirica

Asynchronous Coding in JavaScript

Rodolfo Machirica — Mon, 14 Feb 2022 14:59:14 +0000

In this post we are going to explore and learn some concepts about asynchronous programming. We will talk about what asynchronous coding is and the importance of it in web development, and async operations using callbacks.

JavaScript is a synchronous programming language. The execution of a JavaScript program occurs in a single thread, line by line, without skipping any line of code. Single threadiness, however, exposes an issue: different lines or blocks of code in functions take different amount of time to run, thus, there would be a long wait time when time expensive operations are reached. So, this is where asynchronous approach come in to save the day! Asynchronous JavaScript makes possible for multiple and complex actions to happen while the program is running but without blocking the main thread.

Why Asynchronous coding

According to Javin Paul on Top 5 Programming languages for Web development in 2022, Jan 13, 2021, on medium.com, most web development is done with JavaScript. Asynchronous coding is particularly relevant for frontend development. The problematic of time lag (mentioned in the paragraph above) that occurs when heavy duty programs are in execution or a request to an API is made, in the context of web development, is very important as it affects the user experiences with the UI. A user considers a website to be slow if the response for any action they perform on it takes more than 100ms, said Divyanshu Bhatnagar in a blog post titled How to Optimize Long Tasks (Blocking Javascript) in Browsers on, Jul 11, 2021, on medium.

Handling asynchronous events

In JavaScript, there are various ways in which code can run asynchronously. The most commonly used in these recent years are: Promises and Async/await; but for matters of legacy, we are going to talk about the old and classic way of handling asynchronous code - callbacks.
Callback functions which simply in this context refer to functions that are passed into other functions as parameters or arguments, with the purpose of running when an event associated with that callback is initiated or some operation finishes. See bellow an example of an asynchronous code using the callback approach:

const btn = document.createElement('<button></button>');
  btn.textContent = "Click to register";
  btn.addEventListener.on("click", ()=>{
    console.log("Welcome, you are now a member");
});

addEventListener is our function that is taking in an event of type "click" and an anonymous callback function that sits there waiting for the event "click" to occur and then it executes and returns the result of that operation to the addEventListener function which then gives the response back to the user.
The example above is a typical occurrence in webpage or interactive UI applications where users can perform a varied set of actions from clicking buttons, making requests to a server for data, etc. Here is an example of an asynchronous program using a callback for requesting data from a server:

  //we create a variable to hold an image tag
  const $img = $('img');
  // we make our a.jax call 
  $.ajax({
    url: "http://fakeimageapi.img", 
    dataType: {json: true},
    //callback to run if the request is successful
    success: ((data) => { 
    $img.append(result.url);
   }),
    error: () => {console.log ("image not found")}
});

Callbacks are great and they help us run programs asynchronously. However, they present a major drawback: in cases of nested callbacks, which does happen, they can confuse readers and even the author of the code, and for this reason alone, we have Promises and Async/await, concepts to be covered in the next article.

conclusion

Asynchronous coding is extremely important in the web development as it addresses the issue of UI freezing caused by the complex and time expensive operations.

Sources consulted:

Passing by Value vs Passing by Reference

Rodolfo Machirica — Mon, 20 Dec 2021 23:34:19 +0000

To talk about passing/copying values in JavaScript we need to talk about data types.
JavaScript data types can be grouped into two categories:

Simple data types
Complex data types

Simple data types vs complex data types

The concept of copying/passing data by reference or copying/passing data by value occurs in the face of the difference between these two data types when it comes to assigning variables to variables and data mutation.

Copying by value

Primitive data types like strings, numbers, Booleans, undefined, null, BigInt and symbol are copied by value; that is, two different variables holding primitive values cannot have the same memory address. Let us observe the example bellow:

let myName = "Elijah Gabriel"; // name is pointing at the value "Elijah Gabriel".
let yourName = myName; 
console.log(yourName); //prints => "Elijah Gabriel", a copy of myName.

As we can see, while yourName and myName hold the same value, they aren't the same thing in memory. myName has a unique memory address and so does yourName, have its own unique memory address.

Copying by reference

Unlike primitive types, complex data types like arrays and objects in JavaScript are copied or passed by reference; meaning, two different variable names can point to the same data. When an object intended as an object literal or an array object is created, a reference to that object is created and allocated an address in the memory. So, if you create an object and assign it to a new variable, an object reference will be created and both variables will now be pointing at the reference object in memory address.
Example:

let reference = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]; // creates a reference array with a memory address
let refCopy = reference;// now both reference and refCopy are referencing the same array.

Image by Arnav Aggarwal, October 2017.
! diagram showing a referenced data

reference and Copy are pointing at the same array (reference) share the same memory address. This allows us to change properties in one objects or entries in one array and the change will be reflected in all variables pointing at the same reference. This is how it would look:

copy.pop();// 
console.log(reCopy) //prints to the console => ["Monday", "Tuesday", "Wednesday", "Thursday"];
console.log(reference); // prints to the console => ["Monday", "Tuesday", "Wednesday", "Thursday"];

As we could see, all changes made to the variable copy affected the variable reference in the same manner, and it would be true vice-versa.

Let us look at an example with objects intended as object literal:

const users = {
   firstUser : {firstName: "Tinache",
                 lastName: "Sabonete",
      },
  secondUser : { firstName: "Clayde",
                  lastName:  "Magarrafa",
     },                       
};

const usersCopy = users;// both users and usersCopy are pointing at the same object in memory address.

Now, if we change any of the properties in one of the objects, that change will automatically be made in the other object as well, and this is because these two objects share the same reference at this moment. Example:

usersCopy.firstUser = "online";
console.log(users);// prints=> {
   firstUser : "online",
  secondUser : { firstName: "Clayde",
                  lastName:  "Magarrafa",
     },                       
};

We changed copyUsers, but that change was also reflected on users, and that is because they share a reference.

Breaking reference between arrays or object literals.

Here is a way to break a reference: if the copy variable or the variable reference is assigned to a completely new value, then the reference will be broken, and a new reference-to-be will be created for each of the arrays. Now let's see:

reference = [{weekend: ["Saturday", "Sunday"]}];
console.log(reference);//prints=> [{weekend: ["Saturday", "Sunday"]}].
console.log(copy)// prints => ["Monday", "Tuesday", "Wednesday", "Thursday"].

users = {age: 23, occupation: "student"}
console.log(usersCopy);// prints=> {
   firstUser : "online",
  secondUser : { firstName: "Clayde",
                  lastName:  "Magarrafa",
     },                       
};// users and usersCopy are now totally different objects and are //stored in different addresses in memory.

The shared reference data between the variable reference and variable copy was broken; copy is still pointing to what the variable reference pointed to when it was created, and now reference points to a totally new value and have a new address in memory.

Conclusion

Simple data types variables have unique memory address, therefore they are passed by value and don't create a reference variable. Complex data type variables are passed by reference because during the variable assignment phase a reference object or object array is created, allowing for multiple variables to share a dwelling address in memory!