How to sort an array?

We have a list of user ages like [9, 21, 100, 5]. A junior developer wrote ages.sort() to display them in ascending order, but the UI is showing [100, 21, 5, 9]. What is happening under the hood here, and how would you fix it?

Imagine you are building a React component that displays a list of products. You receive the products array from props, sort it by price using products.sort(...), and render it. However, you notice that this is causing unexpected side effects elsewhere in the app where the same product list is used. Why is this happening, and how would you safely sort the array?

We are building a dashboard table where users can sort transactions. They want to sort primarily by 'Status' (e.g., Pending, Completed), but within each status, they want the transactions sorted by 'Date' descending. How would you write a comparator function to handle this multi-key sorting, and why does the stability of JavaScript's sort algorithm matter here?

You are rendering a real-time log viewer in the browser that receives hundreds of new log entries per second. If you run a full .sort() on the entire array every time a new log arrives, the UI stutters. How would you optimize this? What alternative approaches or data structures would you consider instead of sorting the whole array on every render?

We have a client-side application that needs to sort a dataset of 500,000 complex objects by multiple dynamic fields. Doing this on the main thread freezes the UI. How would you architect this sorting mechanism to keep the UI responsive? Walk me through the tradeoffs of using Web Workers, offloading to the backend, or implementing incremental/virtualized sorting.

You are designing a reusable data-table library for your company's design system. The table needs to support sorting on arbitrary columns, including mixed types (e.g., alphanumeric strings, null/undefined values, localized strings with accents, and dates). How would you design a robust, extensible sorting utility that handles these edge cases gracefully while maintaining high performance?

Our enterprise application is expanding to support 15 different locales, including languages with complex collation rules like Swedish, German (phonebook vs. dictionary order), and Japanese. Our current naive .sort() implementation is causing sorting bugs in non-English locales. How would you approach refactoring our global frontend architecture to handle localized sorting at scale, and what are the performance implications of using Intl.Collator across large datasets?

We are migrating a massive legacy codebase from an older JavaScript engine (which used an unstable QuickSort-based sorting algorithm) to a modern runtime using Timsort. Some legacy business logic implicitly relied on the unstable sorting behavior, and we're seeing subtle data discrepancies post-migration. How would you design a strategy to detect, isolate, and resolve these sorting-related regressions across hundreds of micro-frontends without rewriting every sort call?