Update Array at Index (Immutable)

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Return a new array with one index updated, leaving the original array untouched. This is the core immutable update pattern used in reducers, React state updates, and UI list editing, and it prevents accidental mutation.

Arguments

arr: any[] — The input array.
index: number — The index to update.
value: any — The new value to write.

Returns

any[] —

A new array with the update applied (or a copy if out of range).

Examples

updateAt([1, 2, 3], 1, 9); // => [1, 9, 3]

updateAt([1, 2], 5, 9); // => [1, 2]

Solution

Overview

This is an immutable update helper: clone the array, update one index, and return the new array. It mirrors reducer patterns used in UI state management. Returning a new array every time avoids accidental mutation and keeps equality checks predictable for change detection and memoization.

Approach: Clone then assign

Create a shallow copy with slice or spread, validate the index, update the value on the copy, and return the copy. If the index is out of range, return the untouched copy for stability. This keeps the original input unchanged and makes the function safe for shared state.

export default function updateAt(arr, index, value) {
  if (!Array.isArray(arr)) throw new TypeError('Expected array');
  const copy = arr.slice();
  if (index < 0 || index >= copy.length) return copy;
  copy[index] = value;
  return copy;
}

export default function updateAt<T>(arr: T[], index: number, value: T): T[] {
  if (!Array.isArray(arr)) throw new TypeError('Expected array');
  const copy = arr.slice();
  if (index < 0 || index >= copy.length) return copy;
  copy[index] = value;
  return copy;
}

Notes & Pitfalls

Pitfalls

Don't mutate the original array in-place.
Be explicit about out-of-range indices.
Returning the original array would break immutability expectations.

Edge cases

Empty array returns a new empty array.
Negative or too-large index returns an unchanged copy.
Index 0 and last index should work normally.

Techniques

Array copying with `.slice()`.
Immutable update patterns.

Common mistakes on this challenge

Immutable update contract is not fully respected
The function should always return a new array and preserve original input.
- Start with a shallow copy (`arr.slice()`) and modify only the copy.
- Return unchanged copy when index is out of range.
- Throw `TypeError` when input is not an array.

Resources

MDN – Array.prototype.slice()

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide