Last Updated:

Deleting an Array Element in JavaScript

As you know, JavaScript is not a strongly typed language. This suggests that arrays can store values of different types. However, as elsewhere in any language, you can dynamically add and remove elements to arrays. Dynamic means at the time of program execution.

To do this, there are a number of functions in JS that not only delete elements in the array, but also clear memory. Newer versions of the language provide more functionality for manipulating arrays and allow you to delete even a few elements.

Pitfalls of removing elements from the array

Deleting elements using the operators "delete", "arr=undefined/null" - the memory of the array will not be freed! When you create an array, either through the new operator, or in a short way, it has a specific length that can be recognized by using the length property operator stored in Array.prototype.

Assigning a new element to an array through the "=" operator adds an element to the end of the array and increments its length by 1 if the new element is indexed to 1 greater than the last.

But, what happens if you force an element to delete using the delete statement or set it to undefined? It turns out that its length will remain the same. The deleted item is saved and its value is set to undefined.

Example:

let arr_1 = [«a», «b», «c», «d»];
let arr_2 = [new Object(), 2, 3, 4];

arr_1.length; \\ number of elements 4
arr_2.length; \\ 4

delete arr_1[0]; \\ delete the first element
of the arr_2[0] = null; \\ delete the object in the first element

arr_1[0]; \\ undefined
arr_2[0] \\ null

arr_1.length; \\ 4 ???
arr_2.length; \\ 4 ???

It would seem that the first elements of both arrays were deleted, but the length remained the same. In arr_1 we removed only the value of the element, it still takes up memory, but its value became undefined. In arr_2, an empty object has been deleted, even if it is empty, arr_2[0] refers to the memory where it is located. By setting it to null, we only deleted the empty object, the reference remained in the array.

Functions to completely remove elements from an array

Array.prototype has a number of functions that allow you to manipulate array memory. When the first element is deleted, its memory is completely freed up, and the array is shifted back. Thus, after deletion, the second element becomes the first, and the length becomes 1 less.

When the last element is deleted, the array does not shift, but the length also becomes less by 1. Let's look at a few functions that give this result.

Pop() function

This function removes the last element from the array and returns the deleted element. The length of the array becomes less by 1.

Example:

let arr = [«England», «USA», «France»];
arr.length; \\ 3
arr.pop();
arr.length; \\ 2
alert(arr); \\ England, USA

The function does not accept any parameters.

Shift() function

Deletes the first item and returns it. The array shifts to the left, making the second element the first. The length becomes less by 1.

Example:

let arr = [«apple», «orange», «strawberry»]; \\ length = 3
arr.shift(); \\ length = 2
alert(arr[0]); \\ orange, но в начале было apple

No parameters are required for the function.

Splice() function

Depending on the settings, the feature both removes items and adds them. Can delete and add multiple items at the same time. Returns an array of deleted items.
Function format: splice(index, num_of_elements, item1, item2, inemn...).

The first parameter specifies at which index to start deleting\adding items. The second parameter is equal to the number of elements, the third (item1, item2, inemn... ) replaces the elements or adds new ones and stores in them the values specified in the parameters.

Example:

let animasl = ["lion", "cat", "wolf", "horse"];
animals.splice(3, 0, "mouse", "tiger");\\ add new elements to the end of the array
alert(animals); \\ lion, cat, wolf, horse, mouse, tiger

animals splice(1,4); Remove all elements, starting with the second, the third parameter is not required
alert(animals); \\lion

As you can see, the function has a high flexibility and allows you to operate with both one and several elements.

Delete items in scatter

It often happens that it is necessary to remove several elements from the array, standing not one after another, but in different places. However, JavaScript does not provide such features. But there is a way out - use the map(func) function, added in EcmaScript 6.

This function does something to each element of the array and returns a new modified array that can be stored in a variable of the original array. To understand how to remove multiple elements of an array that are in different parts of an array, you should understand this with an example.

Example of using map():

let arr = [2, 3, 4, 5];

function check_odd(num){ \\ function as an argument to the map()
function if(num % 2 == 0) return; \\ if the number is divisible without a remainder, it is considered even and remains in the array
arr.splice(arr.indexOf(num), 1); \\ otherwise the element is deleted

}

arr.map(check_odd); \\execute the check_odd function for each element of the
alert(arr) array; \\ displays the modified array equal to 2, 4

As you can see from the example above, the map(fun) function runs a function in its fun argument for each element in turn. This function checks each numeric value of an array by division without a residue, which is equal to an even number, and stores this number in the array.

Odd numbers are removed using the splice() function. It follows that by using array conditions and brute force, you can delete items in a scatter rather than in turn.

Total

An array is a static structure for storing data. You cannot delete an item without a function—the value will be erased and the item will remain. Deleting an element using the shift() function shifts the array to the left—the second element becomes the first, and the indexes of the others are 1 smaller.

You can delete multiple elements at the same time from anywhere in the array by using the splice() function. To remove multiple elements that are scattered at the same time, you should use either the map(fun) function or loop through each element of the array.