How to Insert an Item into an Array at a Specific Index in JavaScript

By the end of this page, you will understand how to insert an item into a JavaScript array at a specific position, why Array.prototype.splice() is the standard solution, how it changes the original array, and how to avoid common indexing mistakes.

In JavaScript, arrays do not have a built-in insert() method like some other languages. The standard way to insert one or more items at a specific index is to use splice().

splice() matters because arrays are ordered collections. In real programs, you often need to place data in the middle of a list instead of only adding to the beginning or end.

For example:

• inserting a new task into a sorted task list
• placing a menu item at a specific position
• inserting a row into table data
• updating UI state in frameworks that use arrays

The key idea is:

array.splice(startIndex, deleteCount, item1, item2, ...)

When used for insertion:

• startIndex is where insertion begins
• deleteCount is 0 because you do not want to remove anything
• remaining arguments are the items to insert

Example:

const arr = ["a", "b", "d"];
arr.splice(2, 0, "c");
console.log(arr); // ["a", "b", "c", "d"]

This inserts "c" at index 2 and shifts the later elements to the right.

Important: splice() mutates the original array. That means it changes the array in place rather than creating a new one.

Think of an array like a numbered row of boxes:

• box 0
• box 1
• box 2
• and so on

If you want to place a new item into box 2, JavaScript cannot just overwrite that spot if you want to keep the existing value. Instead, it slides everything from that position onward one step to the right.

splice() is the tool that says:

• go to this position
• remove this many items
• insert these new items there

For insertion only, you remove 0 items and place the new value into the gap.

Core syntax

array.splice(index, 0, item);

Insert one item

const fruits = ["apple", "banana", "orange"];
fruits.splice(1, 0, "mango");

console.log(fruits);
// ["apple", "mango", "banana", "orange"]

Explanation:

• start at index 1
• remove 0 items
• insert "mango"

Insert multiple items

const numbers = [1, 4, 5];
numbers.splice(1, 0, 2, 3);

console.log(numbers);
// [1, 2, 3, 4, 5]

Insert at the beginning

Consider this code:

const colors = ["red", "blue", "yellow"];
colors.splice(1, 0, "green");
console.log(colors);

Step by step:

1. colors starts as:

   ["red", "blue", "yellow"]
   

2. splice(1, 0, "green") means:

   • go to index 1
   • remove 0 items
   • insert "green"

3. Index positions before insertion:

   • 0 → "red"
   • 1 → "blue"
   • 2 →

UI lists

You may need to insert a new notification into the middle of a displayed list.

notifications.splice(2, 0, newNotification);

Menu building

A web app may insert an admin-only menu item at a specific position.

menuItems.splice(1, 0, { label: "Admin", path: "/admin" });

Sorted data

If you calculate where a new value belongs, you can insert it there.

const scores = [10, 20, 40];
scores.splice(2, 0, 30);
// [10, 20, 30, 40]

Form builders

Dynamic forms often store fields in arrays. Inserting a field at a chosen location is common.

fields.splice(insertIndex, 0, newField);

Command pipelines

In real projects, developers usually use array insertion in a few common patterns.

1. Validation before insertion

function insertAt(array, index, item) {
  if (!Array.isArray(array)) {
    throw new TypeError("Expected an array");
  }

  if (index < 0 || index > array.length) {
    throw new RangeError("Index out of bounds");
  }

  array.splice(index, 0, item);
  return array;
}

This protects code from invalid input.

2. Guard clauses

Developers often return early when insertion is not needed.

function addIfMissing(array, index, item) {
  if (item == null) return array;
  array.splice(index, 0, item);
  return array;
}

3. Immutable updates in state management

In React, Redux, or other state-based tools, mutating the original array is often avoided.

Using a non-existent insert() method

Broken code:

const arr = [1, 2, 3];
arr.insert(1, 99); // Error

Why it fails:

• JavaScript arrays do not have a built-in insert() method

Use this instead:

arr.splice(1, 0, 99);

Forgetting that arrays are zero-indexed

Broken expectation:

const arr = ["a", "b", "c"];
arr.splice(1, 0, "x");
console.log(arr);
// ["a", "x", "b", "c"]

If you expected "x" to appear after "b", the index was wrong. Index means the second position.

// Insert one item at index
arr.splice(index, 0, item);

// Insert multiple items at index
arr.splice(index, 0, item1, item2);

// Insert at beginning
arr.splice(0, 0, item);

// Insert at end
arr.splice(arr.length, 0, item);

Rules

• JavaScript arrays do not have a built-in insert() method
• Use splice() for insertion at a specific index
• splice() mutates the original array
• splice() returns removed items, not the updated array
• Arrays use zero-based indexing

splice() signature

array.splice(start, deleteCount, ...items)

• start: where to begin
• deleteCount: how many items to remove
• ...items: items to insert

Is there an insert() method for JavaScript arrays?

No. JavaScript arrays do not have a built-in insert() method. Use splice() instead.

How do I insert an item into an array without removing anything?

Use splice(index, 0, item). The 0 means remove zero elements.

Does splice() return the updated array?

No. It returns an array of removed items. The original array is modified directly.

How do I insert multiple items at one index?

Pass more values after deleteCount:

arr.splice(index, 0, item1, item2, item3);

Can I use jQuery to insert into an array?

You can, but you do not need to. Plain JavaScript splice() is the normal and simplest approach.

How do I insert into an array without mutating it?

Use slice() and spread syntax:

const result = [...arr.(, index), item, ...arr.(index)];

• JavaScript arrays — Arrays are the core data structure involved in insertion.
• Array.prototype.splice() — This is the main method used to insert, remove, or replace items.
• Array.prototype.slice() — Useful for creating non-mutating insertion patterns.
• push and unshift — These methods add items to the end or beginning of an array.
• Zero-based indexing — You need this to choose the correct insertion position.
• Mutable vs immutable updates — Important when deciding whether to change the original array.
• Spread syntax — Commonly used for immutable array insertion.
• JavaScript function helpers — Useful when wrapping splice() in a reusable insertAt() function.