How does Array.prototype.with() let you replace one array element immutably, and where would that pattern actually help?

Q: How does Array.prototype.with() let you replace one array element immutably, and where would that pattern actually help?

**Target Audience:** Engineers preparing for JavaScript immutable-data-pattern interview questions. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. ## 1. Why This Even Matters — A Story First Imagine a printed photograph versus a photo-editing app with an undo history. Editing the printed photo directly means the original is gone the moment a change is made. The editing app instead produces a brand-new version every time, leaving every earlier version completely intact for comparison or rollback. `Array.prototype.with()` is the editing-app approach applied to arrays: it hands back a new array with one element swapped, while the original array sits there, completely untouched, exactly as it was before. ## 2. The Core Idea 📌 **Interview term:** `Array.pr

Tricky JavaScript Scenario #46: Array.prototype.with

The problem

Question presented to candidate: "How does Array.prototype.with() work, what does it return compared to something like arr[index] = value or splice, and when would you actually reach for it in real code?"

What a strong answer should cover:

with(index, value) returns a brand-new array with the element at index replaced by value; the original array is left completely unchanged, both its reference and its contents.
This contrasts with direct index assignment (arr[i] = value) and splice(), both of which mutate the original array in place and return either the removed elements (splice) or nothing meaningful.
with() supports negative indices, counting back from the end, the same way at() does.
An out-of-range index, positive or negative, throws a RangeError rather than silently no-op-ing or growing the array.
Real use case: state-management code (Redux reducers, React state updates) that must return a new reference so change detection works correctly -- with() replaces the "spread then mutate a nested array" pattern, which is a common source of accidental mutation bugs.

Clarifying questions expected:

"Is this specifically about the ES2023 change-array-by-copy methods, or should I compare it against the full set of array mutation methods too?"
"Should I talk through a concrete state-management bug this method avoids?"

Code / implementation expected: Yes -- a runnable comparison of with() against splice()-based mutation and a copy-then-assign approach, plus a demonstrated state-management bug it avoids.

es2023
tricky
real-world

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript immutable-data-pattern interview questions. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text.

1. Why This Even Matters — A Story First

Imagine a printed photograph versus a photo-editing app with an undo history. Editing the printed photo directly means the original is gone the moment a change is made. The editing app instead produces a brand-new version every time, leaving every earlier version completely intact for comparison or rollback. Array.prototype.with() is the editing-app approach applied to arrays: it hands back a new array with one element swapped, while the original array sits there, completely unto

The solution is hidden so you can try first

7 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptArray.prototype.with(): immutable replacement vs splice/mutation, plus a real reducer bug (run directly)