How to Replace Part of an Array in JavaScript

Replace Part of an Array in JavaScript

In JavaScript, arrays are dynamic and flexible, which makes them perfect for editing in place. One common operation is replacing part of an array—whether that means changing a single value, swapping out multiple elements, or transforming parts of the array based on conditions.

This tutorial covers beginner-friendly methods to replace parts of an array using splice(), direct index assignment, and map(). Each technique serves a unique purpose and works best depending on whether you're replacing one item, many items, or based on conditions. We'll look at all three with clear examples and console outputs.

Method 1: Using splice() – Replace by Position and Count

The splice() method is a powerful tool for inserting, removing, or replacing items directly in the array. You provide a start index, a count of how many items to remove, and the new items to insert. This directly modifies the original array.

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

fruits.splice(1, 2, "kiwi", "mango");

console.log("Updated fruits:", fruits);

Updated fruits: [ 'apple', 'kiwi', 'mango', 'date' ]

Method 2: Using Index Assignment – Direct Replacement

If you already know the exact index of an item you want to replace, direct assignment is the simplest method. Just reference the array at that index and assign a new value. This method is quick and efficient for changing single elements.

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

items[2] = "Updated Item 3";

console.log("Modified items:", items);

Modified items: [ 'Item 1', 'Item 2', 'Updated Item 3', 'Item 4' ]

Method 3: Using map() – Conditional Replacement

The map() method is ideal when you want to replace items based on a condition. It creates a new array without modifying the original. This is great for clean transformations and functional programming patterns.

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

const updatedFruits = fruits.map(fruit => fruit === "banana" ? "peach" : fruit);

console.log("Original:", fruits);
console.log("Updated:", updatedFruits);

Original: [ 'apple', 'banana', 'cherry', 'banana' ]
Updated: [ 'apple', 'peach', 'cherry', 'peach' ]

When Should You Use Each Method?

Use splice() when you need to surgically remove and replace multiple items by position—it’s your go-to for in-place changes. Opt for index assignment when working with single known positions, especially in static arrays. And reach for map() when you want to conditionally transform values without modifying the original array.

Final Thoughts

Replacing part of an array is a fundamental skill that will show up in almost every JavaScript project—whether you’re modifying a to-do list, updating product data, or personalizing content. The key is choosing the method that best matches your use case.

Practice all three: splice() for bulk edits, index access for precision changes, and map() for clean, functional transformations. When used wisely, these tools help you write code that’s not only powerful—but easy to understand and maintain.