Deleting Values from JavaScript Arrays: Methods and Examples

In JavaScript, dele­ting values from an array is a common task. There may be­ various scenarios where the­ removal of specific values be­comes necessary within a program. Fortunate­ly, JavaScript provides several built-in functions spe­cifically designed to efficie­ntly handle such situations.

When it comes to deleting values from an array, some of these inbuilt functions automatically rearrange the array index after deletion, while others solely remove the value without reordering the index. Understanding and utilizing these functions appropriately can significantly enhance your JavaScript coding skills.

In this tutorial, I will show you how to use these functions to efficiently delete values from an array, while maintaining the array’s integrity.

Let’s delve into JavaScript and learn how to delete values from an array using inbuilt functions.

 

---

Table of Content

1. pop() – Remove last value from JavaScript Array
2. shift() – Remove first value from JavaScript Array
3. delete – Remove value by index
4. splice()
5. Conclusion

---

1. pop() – Remove last value from JavaScript Array

This method removes and returns the removing value from the last.

Syntax –

array-name.pop();

Example 

var names_arr = ["Yogesh","Sonarika","Vishal","Anil"];
console.log('Return : ' + names_arr.pop() );

for(var key in names_arr){
     console.log("index : " + key + " , name : " + names_arr[key]);
}

Output

Return: Anil
index : 0 , name : Yogesh
index : 1 , name : Sonarika
index : 2 , name : Vishal

---

2. shift() – Remove first value from JavaScript Array

It also returns the removing value as pop() but it removes from the first instead of the last. After deletion, it adjusts the indexes.

Syntax –

array-name.shift();

Example 

var names_arr = ["Yogesh","Sonarika","Vishal","Anil"];
console.log('Return : ' + names_arr.shift() );

for(var key in names_arr){
     console.log("index : " + key + " , name : " + names_arr[key]);
}

Output

Return : Yogesh
index : 0 , name : Sonarika
index : 1 , name : Vishal
index : 2 , name : Anil

---

3. delete – Remove value by index

The delete operator in JavaScript removes the value of a specified index in an array without deleting the index itself. As a result, the length of the array remains unchanged.

When executed successfully, the delete operator returns true.

Syntax – 

delete array-name[ index ];

Example

var num_arr = [ 54, 23, 42, 12 ];
console.log( 'Return : ' + delete num_arr[ 2 ]  );
for(var key in num_arr){
     console.log('index : ' + key + ' , num : ' + num_arr[key]);
}

Output

Return : true
index : 0 , num : 54
index : 1 , num : 23
index : 3 , num : 12

---

4. splice()

It removes, replaces, and append value in the Array. It returns the value of the removing index and a new Array after modification.

Syntax –

array-name.splice(removing index, number of values [, value1,value2,... ]);

This method takes 3 parameters –

1. The first parameter is the index of the removing item.
2. The number of items is being removed. For example – you have specified 2 in this case this removes the index value and the next one also.
3. It is an optional parameter from here you can set new values.

---

Delete all other values after the given index

For this only specify the index from there you want to delete all after it.

var names_arr = ["Yogesh","Sonarika","Vishal","Anil"];
var index = names_arr.indexOf('Vishal');
console.log("Remove : " + names_arr.splice(index) );

for(var key in names_arr){
     console.log("index : " + key + " , name : " + names_arr[key]);
}

Output

Remove : Vishal, Anil
index : 0 , name : Yogesh
index : 1 , name : Sonarika

---

Delete particular Index

Specify the second parameter for only deleting the single value or multiple values.

var names_arr = ["Yogesh","Sonarika","Vishal","Anil"];
var index = names_arr.indexOf('Vishal');
console.log("Remove : " + names_arr.splice(index, 1) );

for(var key in names_arr){
     console.log("index : " + key + " , name : " + names_arr[key]);
}

Output

Remove : Vishal
index : 0 , name : Yogesh
index : 1 , name : Sonarika
index : 2 , name : Anil

---

Replace the value

For replacing the value at the given index I am specifying the third parameter.

var names_arr = ["Yogesh","Sonarika","Vishal","Anil"];
var index = names_arr.indexOf('Vishal');
console.log("Remove : " + names_arr.splice(index, 1, "Mayank") );

for(var key in names_arr){
    console.log("index : " + key + " , name : " + names_arr[key]);
}

Output

Remove : Vishal
index : 0 , name : Yogesh
index : 1 , name : Sonarika
index : 2 , name : Mayank
index : 3 , name : Anil

---

5. Conclusion

We have explored various methods to remove values from an array in JavaScript. Each method serves a specific purpose based on your requirements. If you need to remove values while preserving the index structure, splice() functions are effective choices.

If you only want to remove the value without rearranging the index, then delete operator can be utilized. This allows for reusing the index by assigning a new value. By understanding these approaches, you can confidently manipulate arrays and remove unnecessary values in your JavaScript programs.

If you found this tutorial helpful then don't forget to share.