method is usually used to add or remove items from an array. This method takes in 3 parameters, the index where the element id is to be inserted or removed, the number of items to be deleted, and the new items that are to be inserted. The only insertion can be done by specifying the number of elements to be deleted to 0. This allows only inserting the specified item at a particular index with no deletion.
Syntax:
array.splice(index, no_of_items_to_remove, item1 ... itemX);
Example: In this example, we will insert an element at the 2nd index of the array using the splice() method of JavaScript.
Javascript
function insertElement() {
let arr = [1, 2, 3, 4, 5];
[ 1, 2, -99, 3, 4, 5 ]
0
[ 1, 2, -99, 3, 4, 5 ]
2
[ 1, 2, -99, 3, 4, 5 ]
4
[ 1, 2, -99, 3, 4, 5 ]
6
[ 1, 2, -99, 3, 4, 5 ]
7
[ 1, 2, -99, 3, 4, 5 ]
8
Output
[ 1, 2, -99, 3, 4, 5 ]
Method 2: Using JavaScript for loop
The for loop can be used to move all the elements from the index (where the new element is to be inserted) to the end of the array, one place after its current place. The required element can then be placed at the index.
Syntax:
// Shift all elements one place to the // back until index for (let i = arr.length; i > index; i--) { arr[i] = arr[i - 1]; } // Insert the element at the index arr[index] = element;
Example: In this example, we will insert an element at the 2nd index of the array using the for loop of JavaScript.
Javascript
function insertElement() {
let arr = [1, 2, 3, 4, 5];
[ 1, 2, -99, 3, 4, 5 ]
0
[ 1, 2, -99, 3, 4, 5 ]
2
// Shift all elements one place to the // back until index for (let i = arr.length; i > index; i--) { arr[i] = arr[i - 1]; } // Insert the element at the index arr[index] = element;
8
// Shift all elements one place to the // back until index for (let i = arr.length; i > index; i--) { arr[i] = arr[i - 1]; } // Insert the element at the index arr[index] = element;
9
[ 1, 2, -99, 3, 4, 5 ]
0
[ 1, 2, -99, 3, 4, 5 ]
1
[ 1, 2, -99, 3, 4, 5 ]
7
[ 1, 2, -99, 3, 4, 5 ]
5
[ 1, 2, -99, 3, 4, 5 ]
6
[ 1, 2, -99, 3, 4, 5 ]
7
[ 1, 2, -99, 3, 4, 5 ]
8
Output
[ 1, 2, -99, 3, 4, 5 ]
Method 3: Using the
let newArray1 = oldArray.concat() let newArray2 = oldArray.concat(value0) let newArray3 = oldArray.concat(value0,value1) ....... ....... let newArray = oldArray.concat(value1 , [ value2, [ ...,[ valueN]]])
0 method
The JavaScript Array concat() Method is used to merge two or more arrays together. This method does not alter the original arrays passed as arguments but instead, returns a new Array.
You want to insert an item into an array at a specific index. For example, inserting an item at a specific index in a to-do list.
The Solution
There are various methods to insert an item into an array, broadly divided into those that change the original array and those that don’t.
Using the splice() Method
The splice() method is used to change an array by adding, removing, or replacing elements. This method modifies the original array.
const arr = ["walk the dog", "go shopping", "exercise"]; const index = 2; const value = "go to the pharmacy"; arr.splice(index, 0, value); console.log(arr); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
The first argument of the splice() method is the start index, which is the index at which to start changing the array. This is the only required argument. The second argument is the deleteCount. To add elements to an array, add each element as an additional argument. The splice() method returns an array of the deleted elements. If no elements are deleted, an empty array is returned.
If you are dealing with very large arrays, the splice() method is most likely to perform the best as it does not need to create a new array, unlike the other methods that are described below.
If you don’t want to modify the original array, you can also make a copy of the array before using the splice() method:
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
Using the
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
3 Method
The
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
3 method selects a portion of an array and returns a shallow copy of it. It does not modify the original array.
The
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
3 method has two optional arguments: The start argument is the zero-based index at which to start selecting a portion of the array. The
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
7 argument is the zero-based index at which to stop selecting a portion of the array. The
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
3 method extracts up to the
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
7 argument index, it does not include the array element at the
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
7 index.
The
const arr = ["walk the dog", "go shopping", "exercise"]; const arrCopy = [...arr]; const index = 2; const value = "go to the pharmacy"; arrCopy.splice(index, 0, value); console.log(arrCopy); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
3 method can be used along with spread syntax to insert an item into an array at a specific index:
const arr = ["walk the dog", "go shopping", "exercise"]; const index = 2; const value = "go to the pharmacy"; const newArr = [...arr.slice(0, index), value, ...arr.slice(index, arr.length)]; console.log(newArr); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
Using a Loop
You can also use a for loop to loop through each item in an array, add each item to a new array, and insert an item at a specific index:
const arr = ["walk the dog", "go shopping", "exercise"]; const index = 2; const value = "go to the pharmacy"; const newArr = []; for (let i = 0; i < arr.length; i++) { if (i === index) {newArr.push(value); } newArr.push(arr[i]); } console.log(newArr); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
Using
const arr = ["walk the dog", "go shopping", "exercise"]; const index = 2; const value = "go to the pharmacy"; const newArr = [...arr.slice(0, index), value, ...arr.slice(index, arr.length)]; console.log(newArr); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
2
You can create a custom function that uses
const arr = ["walk the dog", "go shopping", "exercise"]; const index = 2; const value = "go to the pharmacy"; const newArr = [...arr.slice(0, index), value, ...arr.slice(index, arr.length)]; console.log(newArr); // "walk the dog", "go shopping", "go to the pharmacy", "exercise"
2 to insert an element into an array at a specific index: