JavaScript Navigator languages Property

What You’ll Learn

navigator.languages returns an ordered array of BCP 47 language tags. Learn preference order, how it relates to navigator.language, Intl fallback formatting, languagechange, five examples, and try-it labs.

Introduction

Many users prefer more than one language: English first, then Spanish, then French. A single tag is not enough when your site ships several locales and needs a smart fallback chain.

navigator.languages returns that preference list as an array of BCP 47 strings. The first entry is the most preferred language — and MDN notes it matches navigator.language.

Understanding the languages Property

Think of it as an ordered “wishlist” of languages the user likes.

• Array of BCP 47 tags — e.g. ["en-US", "zh-CN", "ja-JP"].
• Preference order — index 0 is the top choice.
• Link to language — navigator.language === navigator.languages[0] (typically).
• Intl fallback — pass the array to Intl constructors for locale negotiation.
• languagechange — fires on window when preferences change.
• Accept-Language — HTTP header usually lists similar locales (with q values).

📝 Syntax

General form of the property:

navigator.languages

Value

• An array of strings (BCP 47 language tags), most preferred first.

Common patterns

// MDN-style listing:
console.log(navigator.language);   // e.g. "en-US"
console.log(navigator.languages);  // e.g. ["en-US", "zh-CN", "ja-JP"]

// Intl with preference-based fallback:
const date = new Date("2012-05-24");
const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

// React when the user changes preferred languages:
window.addEventListener("languagechange", () => {
  console.log(navigator.languages);
});

Examples Gallery

Examples follow MDN navigator.languages patterns. Prefer Try It Yourself to inspect your preference list and Intl fallback behavior.

console.log(navigator.language);
console.log(JSON.stringify(navigator.languages));
console.log("count: " + navigator.languages.length);

en-US
["en-US","zh-CN","ja-JP"]
count: 3
(your list will vary — sometimes only one tag)

const first = navigator.languages[0];
console.log("languages[0]: " + first);
console.log("language: " + navigator.language);
console.log("same?: " + (first === navigator.language));

languages[0]: en-US
language: en-US
same?: true

const date = new Date("2012-05-24");
const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);
console.log(formattedDate);

5/24/2012
(format varies by the first locale Intl can use)

function matchLocale(supported, fallback) {
  const prefs = navigator.languages.map((t) => t.toLowerCase());
  for (const tag of prefs) {
    if (supported.includes(tag)) return tag;
    const primary = tag.split("-")[0];
    if (supported.includes(primary)) return primary;
  }
  return fallback;
}

console.log(matchLocale(["en", "fr", "es", "ja"], "en"));

en
(or fr / es / ja if those appear earlier in your preference list)

function report() {
  return {
    languages: navigator.languages,
    language: navigator.language
  };
}

console.log(JSON.stringify(report()));

window.addEventListener("languagechange", () => {
  console.log("updated: " + JSON.stringify(report()));
});
// Change browser language settings to see the event (when supported).

{"languages":["en-US"],"language":"en-US"}
(listener registered — change browser language to see updates)

🚀 Common Use Cases

• i18n fallback chains — try fr-CA, then fr, then en.
• Intl formatting — pass the array for preference-aware locale selection.
• Content negotiation — mirror what Accept-Language roughly describes.
• Live updates — refresh UI copy on languagechange.
• Defaults with overrides — seed a language picker from the preference list.

📝 Notes

• Baseline Widely available (MDN, since about October 2017).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• navigator.language is the first element of the returned array.
• Privacy modes may shorten the list — do not assume a complete preference profile.
• Related: locks, language, JavaScript hub.

💡 Best Practices