Q132: Intl Formatting and Locale Aware UI

What Interviewers Want To Evaluate

This question checks whether you understand internationalization primitives in JavaScript. Interviewers want Intl.DateTimeFormat, Intl.NumberFormat, Intl.Collator, locale negotiation, currency formatting, pluralization, sorting, timezone display, and why hard-coded formatting fails.

Senior answers should connect Intl to product quality, accessibility, localization, and data correctness.

Short Interview Answer

The Intl APIs provide locale-aware formatting and comparison for dates, numbers, currencies, lists, plurals, relative time, and sorting. Instead of hard-coding formats like MM/DD/YYYY or string-building currency, use Intl.DateTimeFormat, Intl.NumberFormat, Intl.Collator, and related APIs. Locale-aware UI matters because users expect different date order, separators, currencies, plural rules, calendars, and sorting behavior.

Detailed Interview Answer

Internationalization is not only translation. It includes formatting and cultural expectations.

Examples:

date order
time format
decimal separators
currency placement
plural rules
sorting
text direction
calendar and numbering systems

JavaScript's Intl namespace handles many of these concerns.

Date Formatting

const formatter = new Intl.DateTimeFormat("en-IN", {
  dateStyle: "medium",
  timeStyle: "short",
});

formatter.format(new Date());

This avoids hard-coded date formatting.

Time Zone Formatting

const formatter = new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Kolkata",
  dateStyle: "full",
  timeStyle: "short",
});

The same instant can be shown in a selected time zone.

This is useful for schedules, dashboards, audit logs, and remote teams.

Number Formatting

const formatter = new Intl.NumberFormat("en-IN");

formatter.format(1234567);

This handles grouping separators according to locale.

For India, grouping can appear differently from US formatting.

Currency Formatting

const price = new Intl.NumberFormat("en-IN", {
  style: "currency",
  currency: "INR",
}).format(1999);

Never build currency display with string concatenation if user-facing accuracy matters.

Currencies differ in:

symbol
decimal digits
placement
rounding expectations
spacing

Percent Formatting

new Intl.NumberFormat("en-US", {
  style: "percent",
  maximumFractionDigits: 1,
}).format(0.1234);

This gives locale-aware percentage display.

Locale-Aware Sorting

Intl.Collator compares strings according to locale.

const collator = new Intl.Collator("en", {
  sensitivity: "base",
});

names.sort(collator.compare);

Naive sorting can produce surprising results with accents, casing, and local alphabets.

Relative Time

const rtf = new Intl.RelativeTimeFormat("en", {
  numeric: "auto",
});

rtf.format(-1, "day"); // "yesterday"

This helps activity feeds and notifications.

Plural Rules

Different languages have different plural categories.

const rules = new Intl.PluralRules("en");

rules.select(1); // "one"
rules.select(2); // "other"

Pluralization should be handled through localization systems, not basic count === 1 checks everywhere.

Formatter Reuse

Creating formatters repeatedly can be wasteful in hot paths.

For lists or tables, create a formatter once and reuse it.

const currencyFormatter = new Intl.NumberFormat(locale, {
  style: "currency",
  currency,
});

rows.map((row) => currencyFormatter.format(row.total));

Locale Source

Locale can come from:

user profile
browser settings
route prefix
organization settings
explicit product setting
Accept-Language header

The product should define precedence.

Common Mistakes

A common mistake is hard-coding US date formats.

Another mistake is formatting currency without a currency code.

Another mistake is sorting translated strings with plain .sort().

Senior Trade-Offs

Use Intl for formatting primitives. Use a localization framework for translation, message interpolation, pluralized messages, routing, and content management.

Intl solves formatting, not the entire localization workflow.

Code or Design Example

function createFormatters(locale, currency, timeZone) {
  return {
    money: new Intl.NumberFormat(locale, {
      style: "currency",
      currency,
    }),
    date: new Intl.DateTimeFormat(locale, {
      dateStyle: "medium",
      timeZone,
    }),
    names: new Intl.Collator(locale, {
      sensitivity: "base",
    }),
  };
}

This centralizes locale-aware behavior.

Debugging Workflow

When formatting bugs appear:

check selected locale
check selected time zone
check currency code
check formatter options
check browser/runtime Intl support
check hard-coded separators
check string sorting
check plural rules
test multiple locales

Interview Framing

Explain that Intl handles locale-aware formatting and comparison. Give date, currency, and sorting examples.

Revision Notes

Use Intl for locale-aware dates, numbers, currencies, relative time, plural rules, and string comparison.

Key Takeaways

Good frontend quality includes respecting how users read dates, amounts, names, and messages in their locale.

Follow-Up Questions

1. What problem does Intl solve?
2. How do you format dates with Intl?
3. Why is hard-coded currency formatting risky?
4. What does Intl.Collator do?
5. Why does locale-aware sorting matter?
6. What does Intl.RelativeTimeFormat do?
7. Why are plural rules complex?
8. Where should locale come from?
9. Why reuse formatter instances?
10. What does Intl not solve?

How I Would Answer This In A Real Interview

I would say Intl provides built-in locale-aware formatting and comparison. Then I would show date, currency, and collator examples, and explain that localization also needs message translation and product-level locale strategy.