You can use the splice() method to add element to array at specific index in JavaScript. Learn more about how to use it with examples below.
Add Element To Array At Specific Index In JavaScript With Array.splice()
The splice() method can replace/remove existing elements or add elements to a JavaScript array. It modifies the array in place, in contrast to methods like slice(), which creates a shallow copy of the array and performs operations on it instead.
The full syntax of Array.splice() is as follows:
splice(start, deleteCount, item1, item2, itemN)
Only start is the required parameter. This index indicates where splice() should begin to modify the array. If you only provide this argument, the splice() method will delete all the elements from that position to the end of the array:
Example:
const sites = ['LearnShareIT', 'Quora', 'GitHub', 'Reddit'];
sites.splice(1);
console.log(sites);Output:
[ 'LearnShareIT' ]In the above example, the index 1 points to the second element because JavaScript uses zero-based indexing. As a result, splice() removes everything from that element to the end, and we end up with only the element left on the array.
If the start parameter has a value equal to or bigger than the length of the array, splice() will set it to exactly the length, and no element will be removed.
Example:
const sites = ['LearnShareIT', 'Quora', 'GitHub', 'Reddit'];
sites.splice(5);
console.log(sites);Output:
[ 'LearnShareIT', 'Quora', 'GitHub', 'Reddit' ]You can also use negative indexes with splice(), telling it to count from the end of the array.
To control the number of elements you want to remove from the array, use the optional deleteCount parameter. If it is set to negative or zero values, splice() will remove no elements.
Use this integer parameter with the start index if you want to remove only certain elements. This example asks splice() to remove two elements, starting from the second element:
const sites = ['LearnShareIT', 'Quora', 'GitHub', 'Reddit'];
sites.splice(1, 2);
console.log(sites);Output:
[ 'LearnShareIT', 'Reddit' ]To add instead of deleting elements from the array, use the item1,…,itemN parameters. The splice() method will add them to the start position to the array.
Keep in mind that you aren’t allowed to omit the deleteCount parameter above when specifying these elements. If you don’t want to remove any element, just set it to 0:
const sites = ['LearnShareIT', 'Quora', 'GitHub', 'Reddit'];
sites.splice(1, 0, 'Stack Overflow');
console.log(sites);Output:
[ 'LearnShareIT', 'Stack Overflow', 'Quora', 'GitHub', 'Reddit' ]The script above tells the splice() method to add the element ‘Stack Overflow’ to the second position in the array. Since no deletion is requested (deleteCount is set to 0), the elements from that index will get pushed to the end.
This example shows you you can add multiple elements to an existing JavaScript array:
const sites = ['LearnShareIT', 'Quora', 'GitHub', 'Reddit'];
sites.splice(1, 0, 'Stack Overflow', 'Hacker News');
console.log(sites);Output:
[
'LearnShareIT',
'Stack Overflow',
'Hacker News',
'Quora',
'GitHub',
'Reddit'
]It is important to note that the splice() method does have a returned value. It is an array containing all the elements that have been removed from the array. If no deletion operation occurs, an empty array will be returned:
const sites = ['LearnShareIT', 'Quora', 'GitHub', 'Reddit'];
removed = sites.splice(1, 1, 'Stack Overflow', 'Hacker News');
console.log(removed);Output:
[ 'Quora' ]Summary
The Array.splice() method can add element to array at specific index in JavaScript. Additionally, you can use it to remove certain elements before the addition operation takes place. Remember that this method makes direct modifications to JavaScript arrays.
Note: check out this guide if you notice duplicate elements in an array and want to remove them.
Maybe you are interested:
- Check if an array doesn’t include a value
- Add a Key/Value pair to all Objects in Array in JavaScript
- Get the last element of an array in Javascript
My name is Robert. I have a degree in information technology and two years of expertise in software development. I’ve come to offer my understanding on programming languages. I hope you find my articles interesting.
Job: Developer
Name of the university: HUST
Major: IT
Programming Languages: Java, C#, C, Javascript, R, Typescript, ReactJs, Laravel, SQL, Python