Index

JavaScript
JavaScript Examples
CSS
CSS Examples

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

Location protocol property in JavaScript

JavaScript | Location protocol property: In this tutorial, we are going to learn about the location protocol property in JavaScript.
Submitted by Siddhant Verma, on November 27, 2019

JavaScript | Location protocol property

A protocol by definition simply implies a set or working rules that must be adhered to. A network protocol thus defines rules for communication between network devices. You must be familiar with a lot of protocols already such as the infamous http (hypertext transfer protocol), the ftp (file transfer protocol) for transferring files between a client and a server on a computer network smtp, https, etc. In JS, the protocol is a property attached to the location object.

Example

Let's open a new chrome tab and see this in action,

console.log(location);
console.log(location.protocol);

Output

Location {href: "chrome-search://local-ntp/local-ntp.html", ancestorOrigins: DOMStringList, origin: "chrome-search://local-ntp", protocol: "chrome-search:", replace: ƒ, …}
https:

Return Value

The protocol property returns the protocol of the current URL. According to MDN docs, it is a DOMString containing the host, that is the hostname, a ':', and the port of the URL. On the homepage of google chrome, we get a different protocol because they use a different custom protocol for their search engines. Okay, let's see a simpler example. Go to any normal website, for example, includehelp.com and inside the dev console type in,

location.protocol;

Output

"https:"

The URL follows an https: protocol hence returns us a string containing the name of that protocol (in this case, https) along with a colon. If you simply type in the location object you will see various other properties associated with it. However, you can easily notice that the location object gets you the properties of the current location that your URL indicates. If you navigate to different pages you'll see different values of these properties following the URL or the website you're visiting.