The way to interact with a web app is through its UI. And what makes the UI functional is JS. This article is an attempt to understand the way things work in your browser behind the screen. How does the current score visible on your favourite sports website live-reloads automatically, how does the website remember you and does not require a login each time you arrive.

Many of the functionalities we commonly deal with while working on a browser are not even provided by the JS language. They are instead provided by the browser itself, to the JS code.

Let's dive in.

---

The window object

The window object is a root object that the browser provides to the JS code, which contains everything the code might require from the browser's end. It's basically an object representation of the browser window itself on which you are working :) which also contains the methods to control it. It also serves as the global object for the JS code. A function that is not the member of any class or any object in JS is by default accessible on the window object:

function sum(a,b) {
  return a+b;
}

console.log(window.sum(1,2)); // 3

---

Functionalities like making network requests, storing information on the client-side etc. are made available to the JS code via Web APIs.

---

The Web APIs

DOM (Document Object Model)

The DOM is basically a tree representation of the HTML content of your webpage, which can be modified. This is accessible via the document property of the window object or you can just write document. Try console.log(window.document) or console.log(document) in your dev console. It will show an HTML markup like below:

The document object also provides the methods to modify the DOM objects. For example:

• Querying (Finding) the elements: getElementById, getElementsByClassName, getElementsByTagName etc.
• Updating the elements: document.body.style.background = "blue";

According to the DOM, every HTML element is an object. The nested elements are children of the enclosing ones, hence this is a logical-tree like structure.

BOM (Broswer Object Model)

The BOM represents the objects provided by the browser for everything else than the DOM. E.g: setTimeout, alert, confirm, prompt, location, navigator etc

---

The Web APIs such as the ones above, are the functionalities that the browser provides to the JS Code. Next we discuss the flow how our JS code runs in the browser.

Please note, JS is a single threaded, non-blocking, asynchronous scripting language. We first the discuss non blocking aspect.

When was the last time you remember you were working on a webpage and it "stalled" for some ~5 seconds after you clicked the "Submit" button to save the data you changed?

I already know your answer, and that would be: You never experienced such a situation on any website. The reason: JS is non blocking, which means you can simultaneously be making an XHR request, and playing around with the UI.

A very valid question is: JS is single threaded, how come can we perform actions simultaneously with it? The answer is: This ability is provided by the host environment on which JS runs, in our case it is the client's web browser. And specifically this is made possible by what is known as an Event Loop, along with its friends: Task Queue, Microtask Queue and Web APIs. All the four friends are part of the browser along with the JS Runtime Environmentt.