JavaScript Location API

Deconstructing the URL of a webpage to get a specific piece of information out of it is not a rare thing to do. In fact, it's used very often on websites that operate on hash-based navigation.

Being able to effectively retrieve different parts of a document's URL, displayed in the browser's address bar, is an important skill developers must be equipped with. And for that, knowledge of the Location object available on window is a must.

Let's explore it...

Before we can make sense of the interface provided by the location objects, it's important to first understand what is a URL composed of.

If that is clear, making intuition of location would be peaches and cream. Believe it!

For example, https://www.codeguage.com/ is a URL. In this case, it points to the home page of the website codeguage.com.

As you may already be aware of, the World Wide Web is full of billions of other URLs — well, it might be way above trillions now. There is just no end to them!

Each URL serves to take the user to a given resource, which is stored at some physical location on our very own planet Earth — typically on a specialized computer configured to host and deliver resources, commonly referred to as a server.

A URL is much like a physical address to, let's say, a home. A mail service follows the address in order to reach the home, and subsequently deliver the desired product.

URLs follow a sophisticated, but intuitive, syntax that clearly paves the way to fetch the underlying resource. They are composed of multiple atomic pieces, each providing with a certain segment of the whole address to the resource on the web.

Below shown is a simple illustration:

scheme://host:port/path?query_string#hash

Let's see what each of these segments means:

1. The scheme, also referred to as the protocol, specifies whether the website is loaded over an encrypted connection (https) or not (http). These days, more and more websites are turning to https simply because of its benefits.
2. The host refers to the domain name of the website that the underlying resource belongs to.
3. The port specifies the port number of the domain. Usually, it's 80 for http and 403 for https.
4. The path is the physical path to the file on the server. These days, in some cases — in fact, in many cases — the path is artificially made up to replace ugly URLs, thanks to URL rewriting. Such a path doesn't have any physical existence of its own.
5. The query string is a means of sending data to the server as part of a GET request. It begins with a question mark (?) and consists of parameters separated by an ampersand sign (&).
6. The hash, also referred to as the anchor, or fragment, is the ending part of the URL including the hash symbol (#). It was originally provided as a means for specifically referring to a given section in an HTML document with the respective id (recall that id selectors in HTML also begin with a hash). However, these days it has grown to become more useful than just that — it's used along with AJAX to navigate web applications without the need to reload the whole page.

So these are the individual components that make up a URL.

With this information in mind, it's time to see what does location has to offer us in extracting out these components from the current document's URL.

The location property on the global window object in JavaScript points to a location object that holds information regarding the current webpage's URL.

The information is exposed as individual properties of the object, all of which contain string values.

The properties of location are listed as follows:

1. href — holds the complete URL of the current page.
2. protocol — holds the protocol of location.href, including the : character after the protocol.
3. host — holds the host of location.href.
4. hostname — holds just the name of the host of location.href.
5. port — holds the port number of location.href.
6. pathname — holds the path of location.href, including the / character.
7. search — holds the query string of location.href.
8. hash — holds the hash of location.href, including the # character.

Apart from these properties, the location object also provides with a couple of methods to work with:

They are listed as follows:

1. assign() — redirects to the provided URL.
2. reload() — refreshes the current webpage.
3. replace() — replaces the current history entry with the provided URL, and then redirects to that URL.
4. toString() — alias for location.href.

Of these four, replace() and toString() are fairly new and therefore have a relatively inconsistent browser support.

Alright, so at this point, hopefully, the properties and methods of location are clear to you. But how to use them to our benefit?

Well, that's a good question.

Let's answer it for each of the utilities shown above...

The href property on location returns the whole URL of the current document.

Shown below is a simple example, where we merely log location.href:

console.log(location.href);

This is just basic stuff.

The location.hash property returns the hash/anchor part of the URL saved in location.href.

One thing to keep in mind is that location.href includes the hash symbol (#).

Shown below is a simple example.

Suppose that the following script is executed on a webpage whose URL is mentioned in the comment at the start of the script:

// suppose that this script is executed at:
// https://www.codeguage.com/#hello

console.log(location.hash);

If the URL doesn't have any hash in it, then location.hash would return the string '#'.

For instance, if we execute the same code as above on this page, we'd get '#' logged, given that the URL in the browser's address bar is unchanged and doesn't include an anchor following from any action on the webpage.

// suppose that this script is executed on this page with the URL
// https://www.codeguage.com/courses/js/misc-location

console.log(location.hash);

The location.search property returns the query string of the URL saved in location.href.

Similar to location.hash, it includes the ? symbol that denotes a query string, but there is an exception to this. That is, if the URL stored in location.href doesn't contain a query string, location.search returns '', NOT '?'.

Shown below is a simple example.

As always, we visit a webpage with a query string in its URL, and then display location.search to see what does it return.

// suppose that this script is executed at:
// https://www.codeguage.com/?a=10

console.log(location.search);

If the URL doesn't have any query string in it, location.hash returns '?'.

For instance, if we execute the following code, we'd get '' logged following from the evaluation of the ternary operator (?:), given that the URL in the browser's address bar is unchanged. This is because location.search resolves to an empty string (''):

// suppose that this script is executed on this page with the URL
// https://www.codeguage.com/courses/js/misc-location

console.log(location.search === '' ? "''" : location.search);

As we saw above, location.pathname returns the path of the URL i.e. the segment after the hostname and before the query string and hash.

Note that pathname includes the starting / character.

Consider the following code, where we log location.pathname for this very document:

// suppose that this script is executed at:
// https://www.codeguage.com/courses/js/misc-location

console.log(location.pathname);

If the current URL contains a query string or an anchor, location.pathname would still return the desired portion of the URL, i.e. the path, as demonstrated below:

// suppose that this script is executed at:
// https://www.codeguage.com/courses/js/misc-location?a=10#b

console.log('Full URL:', location.href);
console.log('Path:', location.pathname);

Compared to the properties of location explored above, protocol, host, hostname and port are used relatively quite less often.

Hence, we don't go in each one separately.

Below, we demonstrate them all together for a given webpage:

// suppose that this script is executed at:
// http://localhost:80/

console.log('Protocol:', location.protocol);
console.log('Host:', location.host);
console.log('Hostname:', location.hostname);
console.log('Port:', location.port);

As can be seen, location.host is composed of location.hostname and location.port with a ':' in between.

Want to redirect the current tab to a new URL using JavaScript? Well, the location.assign() method was provided just for that.

Here's its syntax:

location.assign(url)

It takes in a string argument url providing it with the fully-qualified URL to redirect the current window to, and then does exactly that — redirects the window to that very URL.

An example follows:

<button>Go to codeguage.com</button>

var button = document.querySelector('button');

button.onclick = function() {
   location.assign('https://www.codeguage.com/');
};

Click the button above, and witness your current window being redirected to our home page.

Frankly speaking, regardless of how frequently used this feature is, it is super cool.

Don't you think so?