DEV Community: Aditya Vivek Thota

How does your web browser run Javascript?

Aditya Vivek Thota — Mon, 26 Sep 2022 15:36:00 +0000

A quick summary

Photo by Claudio Schwarz on Unsplash

Questions on web browsers are frequently asked in interviews. For example, the process of loading a webpage in a browser from the moment a URL is entered is one of the most asked interview questions.

Here, let’s talk specifically about how JavaScript (JS) runs.

JS is a client-side scripting language. This means your browser (aka the client) runs it. How?

Every browser comes with a JS Engine which also acts like a virtual machine that helps us run the code.

Did you know that different browsers use different JS engines?

👉🏻 Chrome uses V8

👉🏻 Edge uses Chakra

👉🏻 Firefox uses Spider monkey

Here’s a simplified summary of what happens:

The JS engine locates the script/JS code, checks the syntax, and parses it into an Abstract Syntax Tree (AST). Think of it as a tree-like representation of the code. This step is done by a “ parser ”.
The AST is converted into bytecode and run by an interpreter. In the case of the V8 engine, the interpreter is called “ ignition ”.
The bytecode and the profiling data generated while running it is passed to a Just in time (JIT = compilation during runtime) compiler that can produce highly optimized machine code.
In the case of the V8 engine, the compiler is called “ Turbofan ”.
In the case of Chakra and Spider monkey, there are some differences in these steps and they use two optimizing compilers.

The rest of the steps and architecture in most JS engines are similar.

I hope you got a good overview.

Here are some links for more in-depth exploration:

This content was first published by me here.

How do web browsers work? A super-simplified summary

Aditya Vivek Thota — Sun, 25 Sep 2022 09:22:42 +0000

Explained in 4 mins 💡

What really happens when you type medium.com into the web browser and press enter? How is the website loading all the information and images?

Let’s find out.

I will explain this by telling you a small story.

The title of this story is Browser-Man 🦸 : Across the Internet.

One day, your friendly neighborhood Browser-Man received a request from a little kid. The kid loved reading blogs and wanted to visit medium.com to read more but he can’t do it by himself. He sought the help of Browser-Man, who needs to go and find where medium.com is, get the information it holds and then show it to the little kid.

Browser-Man has a superpower. He can communicate across the Internet, a multiverse of websites where almost anything and everything is possible. Browser-Man knows that medium.com is somewhere on the internet. The internet has its own version of Nick Fury who knows the address of all things on the internet. His name is DNS Fury. Browser-Man fires a signal to the DNS Fury saying, “Hey, can you tell me where medium.com is?”

DNS Fury looked into his address book and replied, “Yo, this is the address: 162.159.152.4".

Browser-Man sets up a connection to this address and sends a request.

“Hi there! A little kid here wants access to you. Send me your data and I will show it to them”

The address where medium.com is hosted receives and checks this request. If all looks good, it will send a response, “Cool! Here’s my data”.

Browser-Man successfully gets the data and then he looks into it and decides on how to show it to the little kid. Alas, the data looks very complicated with so many words, tags, images, etc. Browser-Man has something that can help him with this- The Rendering Engine. He uses it to successfully render the user interface page to show to the little kid.

Post credit question: **How does your web browser run JavaScript?**
Browser-Man will be back to answer that. #StayTuned

Ok, that’s a super oversimplification of how it happens, but you get the point, I hope. Let us reiterate the flow and I’ll point out a few additional points that are important. Some basic understanding of the internet, network, and web keywords are needed to understand the below details.

The user types URL into the browser address bar. The URL contains the domain name (like medium.com), the protocol to use (https) and the resource to fetch ~say a specific webpage.
The browser needs the IP address of this domain to send a request. If it is already there in a cache (like browser cache, OS cache, network cache), it picks it up from there. Else, the browser contacts the DNS (Domain Name System) server and this happens :P

Once the browser has the IP Address, it will establish a connection with the server hosted at that IP address and send the request to get the required data.
The browser gets the data in HTML format which it needs to parse and put into a Document Object Model (DOM). DOM is basically an internal representation of HTML data used to render the page.
Similarly, a CSSOM tree is built, which includes all the CSS and styling data required to render the page. Both parsing and rendering are done by the rendering engine. The process of displaying content on the UI is literally called Painting.
The browser engine helps process these actions between the UI and rendering engine.
There’s a lot more happening behind the scenes. JavaScript parsing, running these scripts, data storage, and so forth.
Also, how does the browser bring interactivity to life? Scripts can be used to modify the elements of the DOM to do the same.

Let’s catch up on some finer details in a future blog. This is your one-shot revision to how browsers run, a famous interview question asked by many firms out there.

I write this blog post for my own revision and retention too. In case you need clarity on something or find some errata in my understanding, feel free to let me know and I’ll update accordingly.

There is an amazing blog about how websites render and paint the UI you can read for more in-depth info.

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

You can read this other blog to revise the networking side of this process.

What happens when you type a URL into your browser? | Amazon Web Services

This blog post was first published by me on Medium here.

A quick revision of some important JavaScript array functions using practical examples

Aditya Vivek Thota — Tue, 29 Mar 2022 04:02:40 +0000

Reduce, Filter, Includes, Map, ForEach

One of the fundamental things we do in frontend development is to fetch the data from an API, do some operations or check for something in it and then display it on the UI.

This data is generally read as a JSON or an array of JSON. Some of the most common operations we try to perform on this data are as follows:

Extracting values meeting certain conditions using the Filter function.
Computing a value across an array using the Reduce function.
Modifying, creating, or comparing objects/values by iterating over the array using Map or ForEach.
Perform some operations with data to get some required results that are to be displayed on the UI.

Let’s take an example to quickly understand how to properly use these Javascript functions. Let’s say we are trying to build some UI dashboard showing cryptocurrency data that we get from Coinbase’s public APIs. Below is the kind of real data you might actually deal with in many different use cases.

**First API**
Sample JSON response from Coinbase's currency API.
(https://api.coinbase.com/v2/currencies)
Note: This is just a sample. Actual response is much larger.

This API returns a list of currencies and their ids 

{
  "data" : [
    {
      "id" : "AED",
      "name" : "United Arab Emirates Dirham",
      "min_size" : "0.01000000"
    },
    {
      "id" : "AFN",
      "name" : "Afghan Afghani",
      "min_size" : "0.01000000"
    },
    {
      "id" : "ALL",
      "name" : "Albanian Lek",
      "min_size" : "0.01000000"
    },
    {
      "id" : "AMD",
      "name" : "Armenian Dram",
      "min_size" : "0.01000000"
    },
  }
}

Here’s another API that gives the exchange rate for the corresponding currency code with Bitcoin.

**Second API**
Sample JSON response from Coinbase's exchange rate API
https://api.coinbase.com/v2/exchange-rates?currency=BTC

{
  "data" : {
    "currency" : "BTC",
    "rates" : {
      "AED" : "36.73",
      "AFN" : "589.50",
      "ALL" : "1258.82",
      "AMD" : "4769.49",
      "ANG" : "17.88",
      "AOA" : "1102.76",
      "ARS" : "90.37",
    }
  }
}

What kind of things we might need to do with this data?

Using Filter and Includes

Filter can be used whenever you want to check if some condition is satisfied for each item in the array and if yes, put them in a new array.

In our example, we want to get the currency code objects of a list of predetermined currencies from the entire list and you want to use those currency codes alone to render something.

// These currencies could be configured elsewhere.

requiredCurrencies = ['US Dollar', 'Indian Rupee', 'Japanese Yen']

Now, we would want to filter the currency codes from the big JSON list (first API) where the currency belongs to our required list.

Here, we assume data is the array of JSONs we get in the API response object.

filteredData = data.filter((item) => requiredCurrencies.includes( item.name))

// Filtered data output
[
    {
        "id": "INR",
        "name": "Indian Rupee",
        "min_size": "0.01000000"
    },
    {
        "id": "JPY",
        "name": "Japanese Yen",
        "min_size": "1.00000000"
    },
    {
        "id": "USD",
        "name": "US Dollar",
        "min_size": "0.01000000"
    }
]

The arrow notation is a convenient way to write inline functions like the one above. Also, notice the use of array.includes() function. It will return true if the given array contains the value we pass to it.

In our case, if the currency name is in the required currencies, the filter function will add that currency object to the filteredData.

Alternatively, if you want to use a return statement in the arrow notation, you can use curly braces.

filteredData2 = data.filter((item) => 
    {
        console.log('test');
        return requiredCurrencies.includes(item.name)
    });

This approach is applicable to any situation where you plan to return a value while using arrow notation.

Using Map and ForEach

Now, we want to create an array of label-value pairs from the data. Let the label be the currency name and the value be the current BTC exchange rate for that currency.

We may need such label-value pairs to pass it on to a dropdown select box or some radio/checkbox options.

Let’s assume currencies is the JSON array of all currency codes and rates is the JSON array of the exchange rates for the corresponding currency codes (check the second API). We can get our label value pairs as follows.

LabeledData = currencies.map((item) => {
    return {
        label: item['name'],
        value: rates[item.id]
        }
});

So, array.map executes a function and returns a value for each item of the array. These values are stored in a new array. Here’s what the mapped LabeledData looks like (Showing only the first few items).

[
    {
        "label": "United Arab Emirates Dirham",
        "value": "3.673"
    },
    {
        "label": "Afghan Afghani",
        "value": "88.499983"
    },
    {
        "label": "Albanian Lek",
        "value": "111.05"
    },
    {
        "label": "Armenian Dram",
        "value": "488.092713"
    },
    {
        "label": "Netherlands Antillean Gulden",
        "value": "1.80142"
    },
    {
        "label": "Angolan Kwanza",
        "value": "450.646"
    },
    {
        "label": "Argentine Peso",
        "value": "110.698001"
    },
]

This can now be conveniently passed on to a component like a select box or used in some UI rendering. ForEach() can also be used in the exact same way, the difference being, it modifies the original array with returned values and no new array is created.

Using Reduce

Let’s say we have a portfolio JSON which consists of all the cryptocurrencies owned by a user. We want to calculate and show the net worth of their crypto portfolio in USD. Assume you have the USD exchange rate for each cryptocurrency within this JSON.

(Values are dummy values)

portfolio = [
    {
        "label": "BTC",
        "quantity": 3,
        "rate": 200,
    },
    {
        "label": "ETH",
        "quantity": 5,
        "rate": 100,
    },
    {
        "label": "LUNA",
        "quantity": 2,
        "rate": 50,
    },
    {
        "label": "SOL",
        "quantity": 10,
        "rate": 10,
    },
]

Simple observation tells us this.

netWorth = sum(quantity * rate)
netWorth = 3*200 + 5*100 + 2*50 + 10*10 = $ 1300

The same operation can be performed on an array using the reduce() function as follows.

initial = 0; //Declare an initial value

netWorth = portfolio.reduce((netValue, item) => netValue + item.quantity*item.rate, initial);

// This computes to networth = 1300

This way, you can compute a single value across the array. The function also takes an initial value to start with.

Summary

array.filter((item) => some condition); is used to extract items from an array meeting specific conditions.
array.includes(value) returns True if the value is present in the given array.
array.map((item) => some function); executes the given function on each item of the array and the corresponding results are stored in a new array.
array.forEach((item) => some function); does the same thing as array.map but it modifies the existing array and does not create a new one.
array.reduce((value, item) => some function/operation, initialValue); executes the given function for each item in the array and passes on the return value to the next iteration. This way, the return value can be accessed and updated at each iteration giving a final value at the end of the loop.