The navigator object

JavaScriptJunior~3 min read

navigator is a property of the window object that represents the Browser Object Model (BOM), the interface through which JavaScript interacts with the browser rather than with the page. Through it code learns the characteristics of the browser and the device and gains access to system capabilities: geolocation, the camera, the clipboard.

Theory

TL;DR

navigator is an object inside window: window.navigator === navigator returns true.
It represents the BOM, the model of the browser, not the model of the document.
It gives information: browser type, OS, language, online status, cookies, cores, memory.
It gives capabilities: geolocation, clipboard, share, vibration, camera and microphone, Service Workers.
Many of its APIs require a user permission and a secure context (HTTPS).

Quick example

javascript

console.log(window.navigator === navigator); // true

console.log(navigator.userAgent);
console.log(navigator.language);
console.log(navigator.onLine);

This prints something like:

text

"Mozilla/5.0 (Windows NT 10.0; Win64; x64)..."
"uk-UA"
true

What `navigator` is

navigator is a property of the window object. It represents the Browser Object Model (BOM), the interface that lets JavaScript interact with the browser rather than with the page. Finding and changing elements is the job of document, while navigator is responsible for the environment in which that document is open.

javascript

console.log(window.navigator === navigator); // true

The main properties of `navigator`

Property	What it does
`navigator.userAgent`	a string describing the browser and the OS
`navigator.language`	the user interface language (`"en-US"`, `"uk-UA"`)
`navigator.languages`	an array of preferred languages
`navigator.platform`	the platform or OS (`"Win32"`, `"MacIntel"`, `"Linux x86_64"`)
`navigator.onLine`	`true` if there is a network connection
`navigator.cookieEnabled`	`true` if cookies are allowed in the browser
`navigator.hardwareConcurrency`	the number of logical CPU cores
`navigator.deviceMemory`	the amount of device RAM (in GB)
`navigator.vendor`	the browser vendor (for example, `"Google Inc."`)

The methods of `navigator`

Method	Description
`navigator.geolocation.getCurrentPosition()`	get the user's geolocation
`navigator.clipboard.writeText()` / `readText()`	work with the clipboard
`navigator.share()`	open the system share dialog (on mobile)
`navigator.vibrate()`	vibration on mobile devices
`navigator.mediaDevices.getUserMedia()`	access to the camera and microphone
`navigator.serviceWorker`	work with Service Workers (PWA, offline mode)
`navigator.permissions.query()`	check whether an API is allowed (for example, geolocation)

Usage examples

Check the browser:

javascript

if (navigator.userAgent.includes("Chrome")) {
  console.log("The user is in Chrome");
}

Check the connection:

javascript

if (!navigator.onLine) {
  alert("No internet connection!");
}

Get the current coordinates:

javascript

navigator.geolocation.getCurrentPosition(pos => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

This method asks the user for permission.

Copy text to the clipboard:

javascript

navigator.clipboard.writeText("Hello, world!");

Get the user's language:

javascript

console.log(`Your language: ${navigator.language}`);

Structure and summary

text

window
 |-- navigator
      |-- userAgent
      |-- language
      |-- geolocation
      |-- clipboard
      |-- mediaDevices
      |-- ...

Question	Answer
What it does	Provides information about the browser and the device
Where it lives	Inside `window` (`window.navigator`)
What you can learn	browser type, language, OS, online status
What you can do	get geolocation, copy to the clipboard, call share, use the camera
Typical example	`navigator.userAgent`, `navigator.onLine`, `navigator.geolocation.getCurrentPosition()`

So navigator is the object through which JavaScript learns the characteristics of the browser and the device and interacts with system capabilities: geolocation, the camera, the clipboard, PWAs and so on.

Common mistakes

Detecting the browser from navigator.userAgent. That string is easy to spoof and browsers deliberately mask it; checking for the capability itself (feature detection) is more reliable.
Treating navigator.onLine === true as proof of internet access. It only means there is a network connection, not that the server responds.
Using navigator.platform. The property is deprecated; the modern replacement is navigator.userAgentData.
Calling navigator.clipboard, geolocation or mediaDevices over HTTP. These APIs only work in a secure context (HTTPS or localhost).
Forgetting to handle the user denying permission: getCurrentPosition() takes a second callback for errors, and without it the code silently does nothing.
Expecting deviceMemory and hardwareConcurrency to exist everywhere. They are not supported in every browser and return rounded values.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.