Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Adding an element at a given position of the array in Javascript
In this article, we are going to learn how to add an element at a given position of the array in JavaScript. An array is a special variable that can hold more than one value. JavaScript provides several ways to insert an element at a specific index, including the built-in splice() method and the spread operator approach.
Syntax
The most common way to insert an element at a given position is using the splice() method −
array.splice(index, 0, element);
Here, index is the position where the element should be inserted, 0 means no elements are removed, and element is the value to insert.
You can also use the spread operator to create a new array with the element inserted −
const result = [...array.slice(0, index), newItem, ...array.slice(index)];
Using splice() Method
The splice() method modifies the original array by inserting elements at the specified index. The first argument is the index, the second argument is the number of elements to remove (0 for insertion), and the third argument onwards are the values to insert.
Example
In the following example, we insert "Feb" at index 1 in the months array −
<!DOCTYPE html>
<html>
<head>
<title>Insert using splice()</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p id="output"></p>
<script>
var months = ['Jan', 'March', 'April', 'June'];
document.getElementById("output").innerHTML = "Before: " + months;
months.splice(1, 0, 'Feb');
document.getElementById("output").innerHTML += "<br>After: " + months;
</script>
</body>
</html>
The output of the above code is −
Before: Jan,March,April,June After: Jan,Feb,March,April,June
Using Spread Operator
The spread operator approach creates a new array without modifying the original. It slices the array into two parts at the given index, places the new element in between, and combines them.
Example
In the following example, we insert "zero" at the beginning of the array −
<!DOCTYPE html>
<html>
<head>
<title>Insert using Spread Operator</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p id="output"></p>
<script>
const items = ["one", "two", "three", "four"];
const insert = (arr, index, newItem) => [
...arr.slice(0, index), newItem, ...arr.slice(index)
];
const result = insert(items, 0, "zero");
document.getElementById("output").innerHTML = "Original: " + items;
document.getElementById("output").innerHTML += "<br>New array: " + result;
</script>
</body>
</html>
The output of the above code is −
Original: one,two,three,four New array: zero,one,two,three,four
Notice that the original array remains unchanged when using the spread operator approach.
Using a Custom insert() Function
You can also add a custom insert() method to the Array prototype that handles edge cases like inserting at the beginning, end, or middle of the array −
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom insert() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p id="output"></p>
<script>
Array.prototype.insert = function(data, position) {
if (position >= this.length) {
this.push(data);
} else if (position <= 0) {
this.unshift(data);
} else {
for (let i = this.length; i >= position; i--) {
this[i] = this[i - 1];
}
this[position] = data;
}
}
let arr = [1, 2, 3, 4];
arr.insert(-2, 2);
document.getElementById("output").innerHTML = "Result: " + arr;
</script>
</body>
</html>
The output of the above code is −
Result: 1,2,-2,3,4
The custom function uses push() when the position exceeds the array length, unshift() when the position is 0 or less, and manually shifts elements for positions in the middle.
Comparison of Methods
| Method | Modifies Original? | Best For |
|---|---|---|
splice() |
Yes | Simple insertion at any index |
| Spread operator | No (creates new array) | Immutable / functional style |
Custom insert()
|
Yes | Edge-case handling with boundary checks |
Conclusion
JavaScript provides multiple ways to add an element at a specific position in an array. The splice() method is the most straightforward built-in approach and modifies the original array. The spread operator creates a new array, making it ideal for immutable patterns. For custom logic with boundary handling, a prototype-based insert() function can also be used.
626 Views
