How to get the JavaScript browser type and version: How to use the navigator object

This article explains how to use the JavaScript navigator object to obtain the type and version of the browser the user is using.

How can I get the browser type and version?

By using the JavaScript navigator object, you can get the type and version of the browser the user is using.

What is a navigator object?

A JavaScript navigator object is an object that provides browser information. This object contains various information such as browser type and version.

The navigator object is an object that provides information about the web browser. The navigator object provides information such as:

These information can be obtained from JavaScript code. The navigator object is one of JavaScript’s built-in objects, and can be accessed from JavaScript code running on the browser using the global object window.navigator.

For example, you can retrieve the browser’s language settings by executing the code below.

const language = navigator.language;
console.log(language); // Output Example: "ja"

In this way, by using the navigator object, you can obtain browser information from JavaScript code running on the browser.

Main properties of navigator object

Below is a table summarizing the main properties of the navigator object and their descriptions.

By using these properties, you can retrieve browser information from JavaScript code. For example, you can get the userAgent property as follows.

How to get the browser type

To get the type of browser a user is using, use the userAgent property of the navigator object. Below is a sample code using userAgent.

const userAgent = navigator.userAgent;

if (userAgent.indexOf("Chrome") !== -1) {
  console.log("I use Chrome");
} else if (userAgent.indexOf("Firefox") !== -1) {
  console.log("I use Firefox");
} else if (userAgent.indexOf("Edge") !== -1) {
  console.log("I use Edge");
} else {
  console.log("Other browsers are used");
}

This code searches for the string contained in userAgent to determine the name of each browser.

How to get browser version

To get the version of the browser a user is using, use the appVersion property of the navigator object. Below is a sample code using appVersion.

const appVersion = navigator.appVersion;

console.log("The browser version is" + appVersion + " .");

This code retrieves the string contained in appVersion and displays the browser version.

Explanation using a sample program

Below is a sample program using userAgent and appVersion. These properties are used to retrieve information about the browser the user is using and display it on the screen.

const userAgent = navigator.userAgent;

if (userAgent.indexOf("Chrome") !== -1) {
  console.log("I use Chrome");
} else if (userAgent.indexOf("Firefox") !== -1) {
  console.log("I use Firefox");
} else if (userAgent.indexOf("Edge") !== -1) {
  console.log("I use Edge");
} else {
  console.log("Other browsers are used");
}

const browserVersion = appVersion.match(/(chrome|firefox|edge)\/(\d+)/i)[2];

const message = `I am using ${browserName} ${browserVersion}`;
console.log(message);

This code first uses userAgent to determine the name of the browser. And I am using appVersion to get the browser version and display it on the screen.

summary

We explained how to use the navigator object to obtain the type and version of the browser the user is using.

Obtaining browser information can be used for a variety of purposes, such as improving the display and operation of websites optimized for the browser.

The JavaScript navigator object is an indispensable object for web development as it provides browser information. 
However, obtaining information using this object affects user privacy, so it is important to handle it appropriately.