How to Insert an Item at a Specific Index in JavaScript

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

In this tutorial, we will go through different ways to insert an item at a given index in an array, including both mutable and immutable approaches.

The splice() method is the classic way to insert an item at a specific position. It modifies the original array in place. You specify the index, how many items to remove (zero, if you're only inserting), and the new value to add.

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

fruits.splice(1, 0, "banana");
console.log("Updated array:", fruits);

Updated array: ["apple", "banana", "cherry"]

If you're working in a context where mutating the original array is discouraged (like in React or functional programming), you can use slice() and the spread operator to create a new array with the new item inserted.

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

const index = 1;
const updatedFruits = [
  ...fruits.slice(0, index),
  "banana",
  ...fruits.slice(index)
];

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

Original array: ["apple", "cherry"]
New array: ["apple", "banana", "cherry"]

If you want full control or you're operating in a learning environment, you can write a custom function to insert an item manually. This approach can help you understand how array operations work under the hood.

function insertAt(array, index, value) {
  return [...array.slice(0, index), value, ...array.slice(index)];
}

const fruits = ["apple", "cherry"];
const result = insertAt(fruits, 1, "banana");

console.log("Inserted array:", result);

Inserted array: ["apple", "banana", "cherry"]

• splice(): Best when you're okay modifying the original array. Simple and efficient.
• Slice + Spread: Perfect for immutability, like in Redux or React state updates.
• Custom function: Great for learning or building specialized behavior into your application.

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