JavaScript works closely with web browsers and its objects. Using browser objects, you can process HTML elements on a page, or interact with users. Browser Object Model contains all the objects, methods, properties, events that JavaScript uses to interact with the browser.

The main role in the Browser Object Model is given to the Window object, because it represents a browser. Each browser tab contains a separate window object. Other objects include Location, History, Document, Navigator, Screen. These objects help to work with links, URLs, the console, the browser, frameworks, etc. 

window as global object

Window is a global object, so when calling its methods or properties, the word window can be skipped. For example, you can write:

alert(...);
decodeURI(...);

instead of a longer record:

window.alert(...); 
window.decodeURI(...);

Essentially, a window is a global program object that can provide variables or functions from anywhere in the program. The concept of global objects is quite relative, as the area of visibility of these variables is still limited.

In addition to the fact that JavaScript has many built-in global objects, it is possible to define global variables yourself. When we declare global variables or functions, these objects are automatically added to the window object and become available in the program as a property in the window object. 

If you declare a variable or function with var, these objects will have properties of the global object:

var x = 1;
alert(window.x);    // 1

By the way if you refer to the current window in the browser, it is not necessary to write “window”. Because a browser refers to the current window by default:

var x = 1;
console.log(x);           // 1
console.log(window.x);    // 1

But this does not apply to declaration of objects using let and const: 

let y = 1;
console.log(window.y);    // undefined
const z = 1;
console.log(window.z);    // undefined

Global variables and var in general are not recommended to use. Firstly, global objects make the namespace crowded. As a result the process of finding variables becomes harder and longer. 

Secondly, you can forget that you have already declared a variable and declare it again. In case the first variable is local, everything is okay. But if it was global, the variable would be overwritten. That is the old variable will be destroyed. 

In addition every Internet user has access to these variables because they are global and can view or even modify them. But if you still need to declare an object available to the entire program, it is better to write it directly to a global object:

window.person =
{
    surname: "Smith"
};
console.log(person.surname);    // Smith
console.log(window.person.surname);   // Smith

Window location

In short, the location gets or sets the URL of the window and its components. To access location, you need a link to the location property of the window or document object.

To get the URL of the current page write:

console.log(window.location);

Or sometimes it is necessary explicitly convert Location to string:

console.log(window.location.toString());

These two entries will also be correct if you remove the word “window” because it is a global object. In case the location object is inactive, the result will be null.

Window.location is considered an object to read Location only. However, you can use it to redirect the browser to another page, set the value to this object. That is, we can write: 

location = "http://…"

or

location.href = "http://…"

Properties

The location object has a number of properties such as hash, host, href, hostname, pathname, protocol, assign, port, search, ets. All of them are strings.

  • location.hash - returns a string that contains a ‘#’ followed by the fragment identifier of the URL (#2);

  • location.host - returns the hostname, ':' and port (www. … .com);

  • location.href -  returns the URL of the current page (https://www. … .com/);

  • location.hostname - returns the domain of the current URL (www. … .com);

  • location.pathname - returns the current page path and file name (/en-US/search);

  • location.protocol - returns the web protocol (http or https);

  • location.port - port number of current URL (‘ ’);

  • location.search - returns the query string of the URL (?q=URL);

  • location.origin - returns the protocol, host and port of URL (https://www. … .com);

  • location.username - returns the username before the domain name;

  • location.password - returns the password specified before the domain name.

Location methods

There are also methods in location objects, used to manipulate or change the location object. 

Assign methods load a new document. The assign() method accepts a URL as a parameter, navigates to it immediately, and makes an entry in the browser’s history stack.

location.assign("http://…");
location = "http://…";

The replace() method replaces the current URL address of the page, and loads another web page. This method is something similar to the assign() method but it doesn’t create a new entry in the history. 

location.replace('http://...' + value);

The reload() method will be useful for reloading the current page in a dynamic way. The method can be called both with an argument and without it. If you specify logical true as the parameter, the method reloads the page from the server. 

If you specify false as a parameter or not specified, the browser can reload the page from its cache. In this case the page will reload in the most efficient way: if nothing changes from reloading the page, the browser will not reload.

location.reload(true);

And the toString() method returns a string which contains the entire URL value. This method does not change the value, but only reflects it in its entirety. If you change the properties in window.location, the document will be reloaded in a similar way as in the assign method. 

window.location vs document.location

In general, window.location, like document.location, is sent to the same location object. Both are used to get the current address of the page or to readdress browsers to a new page or window. But these two concepts are not fully identical. 

The difference is compatibility with browsers. The window.locationobject can read/write in all browsers, while the document.location is read-only in some browsers and read/write in others. So it is common to prefer window.location for cross-browser safety.

On the other hand if you want to navigate to an isolated frame from a child frame, you can only do so with document.location and not with window.location.