Developer Interview Question: What is the Browser Object Model?

Don’t confuse the BOM with the DOM!

Photo by [Tim Gouw](https://cdn.hashnode.com/res/hashnode/image/upload/v1630753602152/AldKcsxqs.html) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral) Photo by Tim Gouw on Unsplash

One of the things every web developer should know is BOM and what exactly it is useful for.

The Browser Object Model (BOM) in JavaScript includes the properties and methods for JavaScript to interact with the web browser.

BOM provides you with window objects, that can be used for multiple things, for example, to show the width and height of the window, as well as open or close windows.

For instance, it includes the window.screen object to show the width and height of the screen.

In other words, it allows developers to talk to browsers other than just the content of the page by providing methods and properties for JavaScript as shown in the pic below:

[Source](https://cdn.hashnode.com/res/hashnode/image/upload/v1630753604154/QXU9OYhsX.png) Source

However, there is no global standard for BOM and therefore each browser has its own implementation of the same.

Moreover, it is worth noting that each tab in your browser has its own separate window object, therefore operations performed on one tab will be restricted to that tab itself.

What is the difference between BOM and DOM?

The most obvious difference is the name itself — DOM stands for Document Object Model whereas BOM stands for Browser Object Model.

DOM basically gives you access to the page by considering the entire page as a single document.

BOM, on the other hand, consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM.

Since the window object is the very core and root element, everything is attached to it. Hence it is redundant to reference it.

Example of BOM

The code snippet provided below writes the window size( in pixels) using the BOM.

<!DOCTYPE html>
<html>
   <body>
      <script>
         document.write("Inner width: " + window.innerWidth);
         document.write("Inner height: " + window.innerHeight);
      </script>
   </body>
</html>

Why don’t we need to reference the `window` object every time?

As stated earlier, since the window object is the very core and root element, everything is attached to it. Hence it is redundant to reference it.

window.document.getElementById("container");
document.getElementById("container");

Here, both the lines of code are exactly the same and it really doesn’t matter if you call the window object or not.

All the global variables and functions become properties and methods of the window object respectively.

Some of the important functions of BOM

The window object gives you access to some of the most common functionalities required when building sites.

//window dimenstions
const outerHeight = window.outerHeight;
const outerWidth = window.outerWidth;
const innerHeight = window.innerHeight;
const innerWidth = window.innerWidth;

//setting timers
const timeout = setTimeout(callback, delay); // delay in ms
const interval = setInterval(callback, delay); // delay in msclearTimeout(timeout);
clearInterval(interval);

//local storage
localStorage.setItem("lastname", "Smith");

You can find a much more comprehensive list here, which includes alert, screenLeft, history, parent, navigator, and other important methods.

Conclusion

BOM or Browser Object Model is crucial in web development and hence, becomes one of the most important things a web developer should know before heading to interviews.

It allows developers to use JavaScript to communicate with the window and as well provides some of the common functions like setting timers and intervals.

However, just knowing theoretical definitions is not enough and you must apply the knowledge.

Building side projects is a great way to challenge yourself but if you get bored building projects from scratch or want a more fun way of implementing your knowledge, check out this blog below. 7 Fun Games You Should Play To Up Your Coding Skills Not-so-typical methods to master various web technologies.javascript.plainenglish.io

I will be posting more such short and crisp articles surrounding JavaScript and web development concepts and this article is just the beginning.

I hope you enjoyed reading this article!