The Navigator Object

You will be able to use the JavaScript navigator object to read safe browser and device details, and choose feature detection when deciding whether an API is supported.

What it is

The navigator object is a built-in browser object, accessible as window.navigator or simply navigator. It describes the browser environment: language, online status, hardware hints, and some capabilities. Think of it as a read-only profile of the current browser, not a reliable identity of the user or device. Related terms include user agent, feature detection, browser fingerprinting, and the Geolocation API.

Why it matters

• Localization: navigator.language can suggest a default UI language.
• Network hints: navigator.onLine can show whether the browser currently has network access.
• Capability checks: properties such as navigator.geolocation let you detect whether an API exists.
• Performance tuning: navigator.hardwareConcurrency can guide how many workers to create.
• Input adaptation: navigator.maxTouchPoints can hint whether touch input is available.

Syntax or steps

1. Access a property with navigator.propertyName.
2. Read simple values such as navigator.language.
3. Check optional APIs with if ("geolocation" in navigator).
4. Provide a fallback when a property is missing, restricted, or approximate.

Example

const browserInfo = {
  language: navigator.language,
  languages: navigator.languages,
  online: navigator.onLine,
  cores: navigator.hardwareConcurrency,
  touchPoints: navigator.maxTouchPoints
};

console.log(browserInfo);

if ("geolocation" in navigator) {
  console.log("Geolocation API is available.");
} else {
  console.log("Geolocation API is not available.");
}

This code creates an object containing several navigator values and logs it to the browser console. navigator.language returns a string such as "en-US". navigator.languages returns an array of preferred languages. navigator.onLine returns a boolean. navigator.hardwareConcurrency returns an approximate number of logical processor cores. navigator.maxTouchPoints returns a number. The final check uses in to test whether the geolocation property exists before assuming the API is supported.

Common mistakes

• Trusting navigator.userAgent too much. User agent strings can be spoofed, simplified, or changed by browsers. Use feature detection instead of parsing the string for decisions.
• Assuming navigator.onLine means the internet works. It only reports the browser's network state. A server request can still fail. Use a real request when connectivity matters.
• Using deprecated or legacy properties. navigator.platform, navigator.appName, and navigator.vendor are unreliable for modern decisions. Prefer supported capability checks.
• Collecting unnecessary device details. Reading many properties can enable fingerprinting. Only request information your feature truly needs.

When to use it

The closest alternative to reading navigator details is feature detection. Use navigator for environment hints, but use feature detection when deciding whether code can run.

Practice

Guided exercise: Open your browser console and run console.log(navigator.language, navigator.languages, navigator.onLine);. Expected output is a language string, an array of language strings, and a boolean.

Challenge: Write code that logs "Touch device likely" when navigator.maxTouchPoints is greater than 0, and logs "Mouse or keyboard likely" otherwise. Hint: use an if statement with navigator.maxTouchPoints > 0.

Quick check

Question: Why is if ("geolocation" in navigator) better than checking navigator.userAgent for geolocation support?

Answer: It tests whether the API actually exists in the current browser, while the user agent only reports a browser name and version that may be inaccurate or spoofed.

Summary

The navigator object gives useful hints about the browser and device, such as language, online status, and available APIs. Use it for safe environment information, but prefer feature detection and real network checks when correctness matters.