Array Manipulation Patterns

Chunk an Array into Fixed Sizes

Splitting an array into fixed-size groups is a recurring need for pagination, batch API calls, and grid layouts. This snippet covers a one-line slice loop, a generator variant for streaming large inputs, and the edge cases (size <= 0, non-integer size, non-multiple lengths) that bite production code. Drop it in as a tiny utility and stop reaching for lodash for one helper.

Flatten a Nested Array

Flattening a nested array is a one-line job most of the time, but pre-built `Array#flat` is shallow by default and the depth parameter has surprises. This snippet starts with the modern built-in, adds a recursive deep-flatten that works in any environment, and ends with the iterative stack version that avoids stack-overflow on pathological inputs. Three flavours, one mental model.

Shuffle an Array (Fisher-Yates)

The naive `array.sort(() => Math.random() - 0.5)` looks fine until you measure it: the distribution is heavily biased and some pairs swap with much higher probability than others. The Fisher-Yates shuffle is the standard correct answer in O(n) time with uniform output. This snippet shows the in-place version, a non-mutating wrapper, and an empirical demo of why the popular `sort`-based trick is biased.

Group an Array by a Key

Grouping records by a derived key is one of the most common data-shaping tasks in JavaScript: bucketing users by role, orders by status, logs by date. This snippet shows a portable `Map`-based helper, a plain-object variant, and the modern `Object.groupBy` API that landed in Node 22 and recent browsers. It also covers the multi-key composite-key trick for grouping by tuples like `[city, role]`.

Partition an Array by a Predicate

Calling `array.filter(p)` and `array.filter((x) => !p(x))` works but walks the input twice and runs the predicate twice per element, which is wasteful and (for non-pure predicates) plain wrong. A single-pass `partition` returns the matched and unmatched buckets in one go. This snippet covers a clean fold-based implementation, an N-way `partitionBy` for multi-class splits, and a streaming variant that lazily partitions an iterable without materialising the full input.

Zip Multiple Arrays

Python users miss `zip(a, b)` and the Lodash crowd reaches for `_.zip`, but JavaScript can do this cleanly with one helper. This snippet covers the basic two-array zip, an N-array variadic version, the unzip inverse, and a `zipWith` that lets you fold pairs into custom shapes (records, objects, weighted sums). It also clarifies the truncate-to-shortest vs. fill-with-undefined trade-off.

Flatten a Nested Data Object

Analytics events, form payloads, and config files often arrive as deeply nested objects, but databases, query strings, and CSV exporters want a flat key-value map. This snippet builds a recursive flattener that produces dot-path keys, extends it to handle arrays with bracket notation, and adds the inverse `unflatten` so the round-trip is lossless. Drop it next to your event tracker or form serializer.

Insert, Update, Remove Items by Index

Index-based mutations are where most array bugs come from: `splice` mutates in place and is easy to misuse, while `slice` plus spread gives you a copy without mutating the input. This snippet contrasts the mutable and immutable forms for the four common index operations (remove by index, update by index, insert at index, remove all matching a predicate). Keep mutation explicit at the call site so reviewers know whether the original array survives.

Merge and Sort Two Arrays

Merging two arrays of numbers is the kind of task whose right answer depends entirely on whether the inputs are already sorted. This snippet shows three patterns: a simple concat-then-sort for small or unsorted inputs, the classic two-pointer linear merge for already-sorted inputs, and an in-place variant that fills a preallocated buffer for hot paths. Pick by input shape and size, not by habit.

Reversing an Array (Iterative, Recursive, Copy)

Reversing an array is a one-liner if you do not mind mutating the input, and a slightly different one-liner if you do. This snippet covers the built-in `reverse()` mutating call alongside the immutable `toReversed()` and spread alternatives, the two-pointer in-place swap that interviewers ask about, and a recursive form for the recursion lesson. Production code should pick one of the first-accordion forms; the others are for understanding.

JavaScript Array Method Output Traces

Six traces drilling on in-place vs returning array methods: `reverse`, sparse arrays, `indexOf`, `filter(Boolean)`, default lexicographic `sort`, and `copyWithin`.

Array Cross-Reference and Lookup Challenges

Six lookup-and-filter drills: id-to-id matching with Sets, random sampling without duplicates, valid-only filtering, numeric-only extraction, value-by-row matching, and rest-parameter multipliers.

JavaScript Take-Out-and-Rest Array: Two Approaches Quiz

Two seeded approaches to build a map of each-element-to-the-rest (reduce + filter and forEach + filter), plus two companions on slice + concat and a complexity discussion.

JavaScript Group Students by ID: Two Approaches Quiz

Two seeded approaches to group an array of student records by id (reduce + dict and the `in` operator), plus two companions on Map and Object.groupBy.

JavaScript Largest Difference Without Sort: Two Approaches Quiz

Two seeded approaches to compute the largest pairwise difference in an array without sorting (single-pass min/max and the brute-force nested loop), plus two companions on prefix tracking and a negative-numbers twist.

JavaScript Array Occurrences Count: Two Approaches Quiz

Tally how many times each value appears in an array, two ways (reduce + dict and Map-based counter), plus two companions on Object.create(null) safety and case-insensitive string tallies.

JavaScript Missing Numbers Finder: Two Approaches Quiz

Find missing integers between the min and max of an array, two ways (sort + gap-walk and Set diff over min..max), plus companions on the consecutive-1..n case and detecting duplicates.

JavaScript find vs filter for Student Lookup Quiz

Two seeded approaches to look up students by name: `find` returns the first match, `filter` returns every match. Two companions cover return-type pitfalls and short-circuit semantics.

JavaScript Square and Join Digits: Two Approaches Quiz

Two seeded ways to square each digit of an integer and concatenate the results (string split with map and join, plus a while-loop modulo extraction), with two companions on negative numbers and on returning a string.