The Location object

As a part of the global window object, you'll find the Location object. In this case, the location basically refers to the current URL, sometimes referred to as the address of the website. So for instance, when reading this, you are visiting a location that uses the domain javascript-tutorial.com, but there's more than just the domain.

In fact, the location for this page contains multiple elements, which can be extracted using the properties and methods found on this object. Let's dig into them.

Location properties

The Location object comes with several interesting properties, many of them relating directly to parts of the current URL.

location.hash

The hash property refers to the part of the URL (if present) that comes after the hash (#) character. This part of the URL can be used to refer to a specific position/element on a page. Here's an example of a URL with a hash part:

https://javascript-tutorial.com/getting-started/hello-world/#aelm8481

The hash part is what comes at the end, more specifically the "#aelm8481" part. If you try opening this URL in your browser, you will see that it automatically scrolls to the summary of the article - that's because I refer directly to the summary headline by using its ID of "aelm8481".

If you do open this URL, you can use the hash property to access the hash part of the URL, like this:

alert(window.location.hash);

If a hash is specified in the URL, it will be returned by the above code, including the # character. If not, an empty string will be returned.

location.host

The host property will return the domain part of the URL, but also the port, if a specific port is used. Most web requests are made through port 80 or 443, so they are considered default, but if another port is used, it will be included after a colon character, like this:

javascript-tutorial.com:8081

But as mentioned, the port is usually omitted, as you can see from this example:

// Example: javascript-tutorial.com:443
alert(window.location.host);

location.hostname

If you want the domain name, but without the port (no matter if its specified or not), then use the hostname property instead of the host - it will always just contain the domain name:

// Example: javascript-tutorial.com
alert(window.location.hostname);

location.href

The location.href property will return the entire, current URL as a string, with all the elements specified by the part-properties, like host, hash, search and so on. Here's an example:

// Example: https://javascript-tutorial.com/javascript-for-web-the-bom/the-location-object/
alert(window.location.href);

Please notice that this property is not read-only - you can set it as well, which will cause a navigation to the URL you provide. Here's an example:

// Navigate to the starting page of the current website
window.location.href = "/";

Be aware that this works best for navigation between pages within the current website. If you try to navigate to another domain, you may run into security-related browser restrictions.

location.pathname

This property will return the path of the current URL, which is basically the part after the domain/port part but before the search/query string. Here's an example:

// Example: /javascript-for-web-the-bom/the-location-object/
alert(window.location.pathname);

If there's no path (because you are currently visiting the front/index page of the website), an empty string will be returned.

location.port

This property will give you the port of the current URL, if specified. However, since one of the default ports is normally used for HTTP(S) requests, this property will usually just return an empty string:

// Example: 443
alert(window.location.port);

location.protocol

This property will return the protocol scheme used to reach the current URL. For web requests, this will usually be through the HTTP protocol, meaning that protocol property will return either "http:" for regular requests or "https:" for secure requests. Notice that a colon is automatically added:

// Example: https:
alert(window.location.protocol);

location.search

The search property will give you the search part of the URL, more often referred to as the query or the query string. Its what comes after the ? character, if anything. The name "search" probably refers to the fact that this was commonly used to hold the keyword(s) searched for by the user in a search engine, like this:

https://google.com/?s=programming

The search/query string can contain multiple key/value pairs, but when you access them from the search property, you will get back a simple string, prefixed with the ? character. If nothing is specified in the query part of the URL, this property will return an empty string:

// Example: ?search=programming&u=1
alert(window.location.search);

Location methods

With all the interesting properties covered, let's discuss the methods of the Location object.

location.assign()

Use the location.assign() method to navigate to a new URL, like this:

window.location.assign("/");

You can pass a relative URL (like in this example), or an absolute URL, like this:

window.location.assign("https://www.google.com");

Notice that when you use the assign() method, the current URL is stored in the browser history before navigating to the new URL, meaning that after the navigation, the user can press the Back button to return to the previous URL. This is in contrast to the location.replace() method, which we'll discuss below.

location.reload()

The reload() method will do pretty much what you would expect it to: It will reload/refresh the current page. By default, it doesn't take any parameters:

window.location.reload();

However, some browsers (e.g. Firefox) allows a boolean parameter, which will tell the browser if it should bypass the cache and fetch all contents from the server again or not:

// Bypass cache
window.location.reload(true);

location.replace()

The replace() method can be used like the assign() method to navigate to a new URL. However, the replace() method doesn't save the current URL to history, so the user can't navigate back to the URL from before the navigation. This should be used for situations where the current URL is no longer relevant to the user. The syntax is the same as for the assign() method:

window.location.replace("https://www.google.com");

Summary

The Location object allows you to work with the current location/URL with several useful properties and methods. We talked about all the most relevant members, but be sure to check the documentation for the complete list.