JavaScript Remove Item from Array by Index

We can store multiple values ​​in a variable by using a javascript array. Sometimes, we need to remove the item from the array based on its index. So we can do it using several techniques in JavaScript. In this article, we will see some common ways to remove an item from an array by index.

Why we should remove an item by index?

Because it allows you to selectively delete an item from an array without changing the indexes of the remaining items. So, it is a useful operation that allows you to selectively delete an item without changing the indexes of the remaining items, efficiently manage memory, and simplify code. This can be useful in many scenarios, like:

• If we remove the array element by index we keep the original order of the array. For example, If we remove the last element of the array by index, the remaining elements are not affected. If we remove the middle element of the array by index, the indexes of the remaining items will be shifted.
• When we remove an item from an array by index, the memory allocated to that item can be freed up. It is important if you are working with large arrays.

3 Ways to remove an item from an array by index

Follow these simple methods to remove your array item by index:

1. Using splice() method

The splice() is used to remove the elements or replace the existing elements. To remove an item by index, we need to pass two arguments to the ‘splice’ method, the index of the element to be removed, and the number of elements to be removed.

const names = ['John', 'Roy', 'Smith', 'Stokes'];
names.splice(1, 1);
console.log(names);

// Output: ['John', 'Smith', 'Stokes']

In this code:

• We have created an array called ‘names ‘ with 4 elements.
• To remove the 2 elements ‘Roy‘, we need to pass the index value 1 and removed value 1 to the ‘splice()’ method. The index always starts from 0, so the index of the first element is 0, and the second element is 1, that’s why we passed the value 1.
• Finally, logged the array ‘names’. The ‘splice’ method removed the element ‘Roy’ from an array and successfully executed it.

2. Using slice() method

In this method, the slice() method returns a new array containing a portion of the original array. To remove an element by index, we should call the ‘slice()’ method twice and concatenate the two resulting arrays, one before the index and one after the index.

The syntax for using slice() to remove an element from an array is:

const newArray = array.slice(0, index).concat(array.slice(index + 1));

Ex:

const names = ['John', 'Roy', 'Smith', 'Stokes'];
const Newnames = names.slice(0, 2).concat(names.slice(3));
console.log(Newnames);

// Output: ['John', 'Roy', 'Stokes']

In this code:

• We have created a constant ‘Newnames’ to remove the 2nd index element from the array ‘names’.
• Then we initialized the first operation as ‘names.slice(0, 2)‘, which takes a subset of the “names” array starting from the first element to the second.
• The second operation is “names.slice(3)“, which takes a subset of the “names” array starting from the fourth element (index 3) until the end of the array.
• Finally, the two subsets are concatenated together using the “concat()” method to create the new array “Newnames”. This new array contains all elements of the “names” array except for the third element.

3. Using filter() method

We can also remove elements from the array by indexing using the ‘filter()’ method. The syntax is :

const newArray = array.filter((element, index) => index !== i);

Here, i is the index of the element to be removed. The array ‘newArray’ contains all the elements from the original array except for the element at the specified index.

Ex:

const names = ['John', 'Roy', 'Smith', 'Stokes'];
const newArray = names.filter((_, i) => i !== 0);
console.log(newArray);

In this code:

• We have created a new constant ‘newArray’ to remove the 0th index element from the array ‘names’ using ‘filter()’ method.
• The filter() method creates a new array with all elements that pass the test implemented by the provided function. In this case, the provided function is a callback function that takes two arguments: _ and i. The _ argument is a placeholder for the current element in the array that we don’t actually use, and i is the index of the current element.
• The callback function checks whether the index of the current element is not equal to ‘0’ or not. If the index is not ‘0’, the function returns true and the element is included in the new array. If the index is ‘0’, the function returns false, and the element is excluded from the new array.
• Finally, the newArray variable is assigned this new filtered array.

Conclusion

I hope this method will help you a little bit. If you have any doubts about this method, you can comment below. I recommend method 1 using splice() method to remove item from an array by index in JavaScript.