Spread / Rest Operator
js-spread-rest
Code Snippets
Pick a Subset of Object Keys
Picking a whitelist of fields from an object is a daily chore for API responses, form submissions, and analytics events. This snippet covers the canonical Object.fromEntries filter, a typed-friendly variant that drops missing keys, and a generic helper that picks by predicate. Stop hand-rolling it for every endpoint and reach for the version that fits your data.
Omit Keys from an Object
Stripping a few sensitive or transient keys before logging, persisting, or returning an object is the inverse of `pick` and just as common. This snippet covers the rest-destructuring one-liner for fixed key sets, an iterative version for dynamic blacklists, and a deep variant that walks nested objects. Pick whichever fits your data shape and keep the others as reference.
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.
Cloning an Array (Shallow and Deep)
Most array clones in product code are shallow, which is exactly what `[...arr]`, `Array.from`, and `slice()` give you. The trap is nested data: shallow copies share inner references, so mutating a nested object inside the copy mutates the original. This snippet walks the modern shallow forms, the older idioms still in the wild, the `structuredClone` deep-copy answer for nested data, and an object-shaped sibling for contrast.
Question Banks
Object Transformation Challenges
Six object-shape problems: building a tree from a flat array, valid-key extraction, chainable methods, stats reshaping, recursive leaf walking, and deep equality.
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 Immutable Object Key Removal: Two Approaches Quiz
Two seeded approaches to remove an object key without mutation (spread + delete, reduce + filter), plus two companions on destructure-and-drop and a deep-clone caveat.
JavaScript Spread Operator Refactor: Two Explanations Quiz
Refactor a manual `sum(nums[0], nums[1], nums[2])` call with the spread operator, two equivalent shapes (spread shortcut and the older `apply(null, nums)` form), plus companions on rest parameters and array-spread vs concat.
JavaScript Merge Two Objects: Three Approaches Quiz
Three seeded ways to merge two plain objects (spread, `Object.assign`, and a manual `for...in` copy), plus two companions on shallow-vs-deep semantics and on which approaches mutate the target.
