Difference between location.host and location.hostname in JavaScript

JavaScript's Location object provides access to the current URL's components. One can think of this object as a read-only window into the current location.

There are two properties of the Location object that are often confused: host and hostname.

Location.host

The host property returns the hostname, port number, and protocol of the current URL. For example, if the current URL is "http://example.com:8080/path/to/page.html", the value of host would be "example.com:8080".

Advantages of using location.host

There are also a few advantages to using location.host over location.hostname.

First, it is more specific. If you need the port number or protocol, you can be sure that it will be returned by the host property.

Second, it is more concise. If you only need the hostname, you can use the shorter hostname property. But if you need the port number or protocol as well, you can use the host property and get all of the information in one go.

Third, it is more future-proof. If a new URL component is added, it will likely be included in the host property. This is not necessarily the case with the hostname property.

location.hostname

The hostname property, on the other hand, only returns the hostname part of the current URL. For example, if the current URL is "http://example.com:8080/path/to/page.html", the value of the hostname would be "example.com".

Advantages of using location.hostname

There are a few advantages to using location.hostname over location.host.

First, it is more readable. When you are looking at a URL, you are generally more interested in the hostname than the port number or protocol.

Second, it is more consistent. The hostname is a required part of a URL, while the port number and protocol are optional. This means that not all URLs will have a host property, but they will all have a hostname.

Third, it is more resilient. If you change the port number or protocol of a URL, the hostname will still be the same. This is not the case with the host property.

When to use each?

Generally speaking, you should use location.hostname unless you specifically need the port number or protocol.

The reason is that the hostname is the "human-readable" part of the URL, while the host property also includes the port number and protocol. Most of the time, these extra pieces of information are not needed.

There are a few exceptions, however. One example is if you need to construct a new URL using the current URL as a base. In this case, you would need to use location.host in order to preserve the port number and protocol.

Another exception is if you are using a URL shortener. In this case, you would want to use location.host in order to preserve the original URL's hostname.

Difference between location.host and location.hostname in JavaScript

The following table highlights the major differences between location.host and location.hostname in JavaScript −

Basis of comparison	location.host	location.hostname
Definition	The host property returns the hostname, port number, and protocol of the current URL	The hostname property, on the other hand, only returns the hostname part of the current URL
Example	If the current URL is "http://example.com:8080/path/to /page.html", the value of the host would be "example.com:8080	If the current URL is "http://example.com:8080/path /to/page.html", the value of the hostname would be "example.com".
When to use?	You should use location.host if you specifically need the port number or protocol.	You should use location.hostname unless you specifically need the port number or protocol.
Readability	The host property also includes the port number and protocol making it less readable.	The hostname is the "human-readable" part of the URL.

Conclusion

In most cases, you should use location.hostname over location.host. It is more readable, more consistent, and more resilient. There are a few exceptions, however, such as when you need to construct a new URL or when you are using a URL shortener.