Web Development

Sorting Arrays in JavaScript: A Careful Mental Model

How JavaScript array sorting works, why compare functions matter, and how to avoid string-order surprises and mutation bugs.

Sorting arrays in JavaScript means ordering items with sort, usually by passing a compare function. Without one, values are converted to strings, which surprises beginners sorting numbers. Also remember that sort mutates the array, so copy first when original order matters.

What is the mental model?

Sorting is where JavaScript politely reminds you to read the reference. The default behavior is useful for strings, but not for every data shape. Numbers, dates, names, and nested fields each need an intentional compare rule.

Beginners often get stuck because the tutorial jumps straight to a snippet. A snippet is helpful only after you know the boundary it is crossing. Is this client state or server state? Is this a language feature or a framework convention? Is the AI assistant writing a patch, or is it making a design decision you still need to own?

That boundary is the whole lesson. Once you name it, the tool becomes less mysterious and the mistakes become easier to debug.

How do you use it without guessing?

For numbers, use (a, b) => a - b for ascending order. For objects, compare the field you mean to sort by. If you need to keep the original array unchanged, copy with [...items].sort(...) before sorting.

Keep this small checklist beside the editor:

Always ask whether default string sorting is intended.
Use compare functions for numbers and objects.
Copy before sorting if another part of the app needs original order.
Keep compare functions small and predictable.

If an AI tool is involved, make it show its work in the same way you would ask a teammate. Ask for the assumption, the changed files, and the test surface. A generated answer that cannot name its boundary is not ready to merge.

What mistakes show up early?

The classic mistake is sorting [1, 2, 10] and wondering why 10 appears between 1 and 2. That is string ordering. Another mistake is mutating an array that React state or another function expected to remain stable.

The fix is usually not more abstraction. It is a smaller example, a named input, and one check you can run after changing it. That habit scales from a JavaScript array method to a React Native input to a multi-agent coding workflow.

Lab Notes. Start with the boundary. Then choose the tool. If the boundary is blurry, make the example smaller until it becomes visible.

How should you check your work?

Test your sort with numbers like 1, 2, and 10, plus duplicate values. For objects, test missing fields. Sorting bugs are easier to catch with intentionally awkward examples.

A good beginner exercise ends with something observable: a failing test turns green, a type error disappears for the right reason, a component handles an edge case, or the AI-generated diff is small enough to review. That is how you keep learning from the tool instead of outsourcing the lesson.

For adjacent reading, see Vibe Coding IDEs, Claude Code Agent, and Kotlin Project Structure for Beginner Android Apps. Different stack, same habit: isolate the boundary before you expand the project.

What is the smallest useful exercise?

Pick one tiny change and make the boundary visible. Change one input, one function, one component, or one prompt. Then run the relevant check and explain the result in plain language. This keeps the lesson tied to code you can inspect instead of advice you can only nod at later. Save the before state, the after state, and the command you used to verify it. That habit turns a short tutorial into a reusable debugging note.

Sources

Array, MDN Web Docs. MDN reference for JavaScript arrays and array methods.
JavaScript Guide, MDN Web Docs. MDN guide to JavaScript grammar, types, functions, arrays, and promises.