How to Update an Item at a Specific Position in JavaScript

This reference explains an individual array operation. For the learning sequence, start with JavaScript arrays and array transformations.

In JavaScript, arrays help you manage collections of values — like fruits, tasks, or products. But what if one of those values needs to change? Maybe a user edited their name or you need to mark a task as completed. Updating an item at a specific position is a simple, direct task — and one of the most common things you'll do when working with data. This tutorial walks you through various ways to modify an array element by its index, using practical examples that are clear and beginner-friendly.

This is the most straightforward way to update a value. Since arrays are zero-indexed in JavaScript, you can use the index directly with bracket notation to assign a new value to an existing item.

const fruits = ["apple", "banana", "cherry"];

fruits[1] = "blueberry";
console.log(fruits);

["apple", "blueberry", "cherry"]

Instead of hardcoding the index, you can store it in a variable. This is helpful when the position is determined dynamically — for example, through user interaction or calculations in a loop.

const tasks = ["Clean", "Cook", "Read"];
let position = 2;

tasks[position] = "Write";
console.log(tasks);

["Clean", "Cook", "Write"]

If you want to avoid mutating the original array — for example, in React or functional programming — you can use map() to create a new array with the updated value. This is a clean and declarative way to make changes.

const items = ["Item 1", "Item 2", "Item 3"];
const updateIndex = 1;

const updatedItems = items.map((item, index) =>
  index === updateIndex ? "Updated Item 2" : item
);

console.log(updatedItems);

["Item 1", "Updated Item 2", "Item 3"]

• Bracket notation with direct index: Use this when the update is simple and you’re okay modifying the original array.
• Bracket notation with variable: Useful for updates where the index is calculated or derived from logic.
• map() method: Best when working in a functional style, especially in frameworks like React, where immutability is preferred.

Check whether the operation changes the original array, and test empty inputs and missing matches. Compare related operations in the reference library.