Yevhen Klymentiev
dark
light
console
darkness
y.klymentiev@gmail.com
Reusable Snippets|Practical utility code for everyday use — custom-built and ready to share

getBrowserLanguage

Returns the browser's preferred language (e.g., "en", "en-US", "ru").

TypeScript
Copied!
1/**
2 * Returns the browser's preferred language (e.g., "en", "en-US", "ru").
3 *
4 * @param fallback - A fallback value if language is unavailable.
5 * @returns The language string or the fallback.
6 */
7export function getBrowserLanguage(fallback = 'en'): string {
8  if (typeof navigator === 'undefined') return fallback;
9
10  return navigator.language || fallback;
11}
  • Fallback Support

    Ensures a default language is always returned even if the browser's language is unavailable.

  • Environment-Aware

    Includes a guard clause to prevent execution in non-browser environments like Node.js.

  • Simple and Reliable

    Uses the standardized navigator.language property, which is widely supported across modern browsers.

  • Customizable Behavior

    Allows developers to define a custom fallback language, enhancing adaptability in internationalized applications.

Tests | Examples

TypeScript
Copied!
1test('getBrowserLanguage - returns navigator.language if available', () => {
2  const original = navigator.language;
3  Object.defineProperty(navigator, 'language', {
4    configurable: true,
5    get: () => 'fr-CA',
6  });
7
8  expect(getBrowserLanguage()).toBe('fr-CA');
9
10  Object.defineProperty(navigator, 'language', {
11    configurable: true,
12    get: () => original,
13  });
14});
15
16test('getBrowserLanguage - returns fallback if navigator is undefined', () => {
17  const original = global.navigator;
18  // @ts-ignore
19  delete global.navigator;
20
21  expect(getBrowserLanguage('ru')).toBe('ru');
22
23  global.navigator = original;
24});

Common Use Cases

  • Internationalization (i18n)

    Load locale-specific resources based on the user's browser preference.

  • Language-Based Redirects

    Automatically navigate users to localized versions of a website or app.

  • Default UI Language Settings

    Pre-select a language in dropdowns or form inputs during user onboarding.

  • Logging and Analytics

    Record the user's preferred language for diagnostic or demographic analysis.

Codebase: Utilities -> Platforms -> getBrowserLanguage | Yevhen Klymentiev