Platform under construction

Arrays & Collections

Advanced

Array Search & Sort

Search and sort methods help you find list items, test conditions and order data before rendering it.

const records = [
  { title: "CSS", score: 82 },
  { title: "HTML", score: 94 }
];

const best = records.find((record) => record.score > 90);

Arrays & Collections

Pick the method that matches the question you are asking.

Use find when you need the first matching item. Use findIndex when you need its position. Use some or every when you only need a boolean answer.

Sorting needs a comparator function for reliable numeric or custom ordering. Without a comparator, sort converts values to strings.

sort mutates the original array. If you need a sorted copy, use toSorted where available or copy first with spread.

find

Returns the first matching item or undefined.

findIndex

Returns the index of the first match or -1.

some / every

Boolean checks for any or all items.

sort

Orders the array and mutates it unless using a copy.

Examples

Array code should reveal whether it reads, mutates, transforms or summarizes.

Sorted copy with numeric comparator

const scores = [10, 2, 30];
const sortedScores = [...scores].sort((a, b) => a - b);

Default string sort for numbers

const scores = [10, 2, 30];

scores.sort();
console.log(scores); // [10, 2, 30] becomes string-sorted

Code patterns

Reusable examples for quick reference.

These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.

find object

Find the first record that matches a condition.

const records = [{ id: 1 }, { id: 2 }];
const record = records.find((item) => item.id === 2);

some check

Ask whether at least one item matches.

const scores = [72, 88, 91];

const hasHighScore = scores.some((score) => score >= 90);

numeric sort

Always provide a comparator for numbers.

const scores = [10, 2, 30];

scores.sort((a, b) => a - b);

sorted copy

Copy before sorting if original order matters.

const scores = [10, 2, 30];
const sorted = [...scores].sort((a, b) => a - b);

Rules that matter

The right collection method makes the intent obvious.

Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.

Use find for one item

It returns the item itself, not an array.

Use filter for many items

Do not use find when more than one match matters.

Use some and every for booleans

They communicate the question clearly.

Sort numbers with a comparator

Default sort is string-based.

Copy before sorting shared data

sort mutates the array.

Handle missing matches

find can return undefined and findIndex can return -1.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

Search and sort code becomes readable when the method name matches the intent.

Accessibility

Search and sort often control visible list order. Users need stable, predictable results and labels.

Production note

Production sorting should handle missing values, mixed casing and locale rules deliberately.

SEO note

Sorted content lists should be deterministic so crawlers and users see stable order.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Use findIndex to locate CSS.
Use some to check whether any score is below 80.
Reverse the sort order.

Practice assignment

Do this before moving to the next topic.

Find one item in an array.
Check whether some items match a condition.
Sort a numeric array with a comparator.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Array Search & Sort.