JavaScript Remove from Array

By Arvind Rai, September 16, 2019
This page will walk through how to remove elements from JavaScript Array. We will provide examples to remove elements from start of the Array, from end of the Array, removing elements from given index and clearing Arrays completely. We will use following Array methods in our example.
pop(): Removes the last element from an Array.
shift(): Removes the first element from an Array.
splice(): Changes the content of an Array by adding or removing elements.
filter(): Creates a new Array from given Array elements that passes the given condition.

Remove from End of Array with pop()

pop() removes the last element from an Array and returns that removed element. Find the examples.
console.log('--- String ---');
var countries = ['India', 'China', 'Russia'];
var deletedElement = countries.pop();
console.log(deletedElement); //Russia
console.log(countries); //[ "India", "China" ]
countries.pop();
console.log(countries); //[ "India" ]

console.log('--- Number ---');
myNums = [25, 50, 75];
myNums.pop();
console.log(myNums); //[ 25, 50 ]
myNums.pop();
console.log(myNums); //[ 25 ]

console.log('--- Object ---');
var students = [
  {name: 'Arjun', age: 20},
  {name: 'Bheem', age: 25},
  {name: 'Nakul', age: 23}
];
students.pop();
students.forEach(student => console.log('Name: ' + student.name + ', Age: ' + student.age)); 
Output
--- String --- 
Russia 
Array [ "India", "China" ]
Array [ "India" ]

--- Number ---
Array [ 25, 50 ]
Array [ 25 ]

--- Object ---
Name: Arjun, Age: 20
Name: Bheem, Age: 25 

Remove from Start of Array with shift()

shift() removes the first element from an Array and returns that removed element. Find the examples.
console.log('--- String ---');
var countries = ['India', 'China', 'Russia'];
var deletedElement = countries.shift();
console.log(deletedElement); //India
console.log(countries); //[ "China", "Russia" ]
countries.shift();
console.log(countries); //[ "Russia" ]

console.log('--- Number ---');
myNums = [25, 50, 75];
myNums.shift();
console.log(myNums); //[ 50, 75 ]
myNums.shift();
console.log(myNums); //[ 75 ]

console.log('--- Object ---');
var students = [
  {name: 'Arjun', age: 20},
  {name: 'Bheem', age: 25},
  {name: 'Nakul', age: 23}
];
students.shift();
students.forEach(student => console.log('Name: ' + student.name + ', Age: ' + student.age)); 
Output
--- String ---
India
Array [ "China", "Russia" ]
Array [ "Russia" ]

--- Number ---
Array [ 50, 75 ]
Array [ 75 ]

--- Object ---
Name: Bheem, Age: 25
Name: Nakul, Age: 23 

Remove for Index of Array with splice()

splice() method changes the content of an Array. splice() can add elements at given index and can replace and remove the elements from an Array. Find the splice() method signature.
var arrDeletedItems = array.splice(start, deleteCount, items...) 
The items argument is optional. splice() method will add items at given start index and delete given deleteCount number of elements at that index. If delete count is 0, the element at that index will be shifted right.
As we know that items argument is optional, splice() method can be used to remove elements from Array at given index without adding any item. Look into the code snippet.
var countries = ['India', 'China', 'Russia', 'France'];
var arrDeletedItems = countries.splice(1, 2);
console.log(arrDeletedItems); //[ "China", "Russia" ]
console.log(countries); //[ "India", "France" ] 
splice(1, 2) means that start from index 1 and delete 2 elements. Find some more examples.
console.log('--- String ---');
var countries = ['India', 'China', 'Russia', 'France'];
var arrDeletedItems = countries.splice(2, 1); 
console.log(arrDeletedItems); //[ "Russia" ]
console.log(countries); //[ "India", "China", "France" ]

console.log('--- Number ---');
myNums = [25, 50, 75];
myNums.splice(0, 1);
console.log(myNums); //[ 50, 75 ]

console.log('--- Object ---');
var students = [
  {name: 'Arjun', age: 20},
  {name: 'Bheem', age: 25},
  {name: 'Nakul', age: 23}
];
students.splice(1, 1);
students.forEach(student => console.log('Name: ' + student.name + ', Age: ' + student.age)); 
Output
--- String ---
Array [ "Russia" ]
Array(3) [ "India", "China", "France" ]

--- Number ---
Array [ 50, 75 ]

--- Object ---
Name: Arjun, Age: 20
Name: Nakul, Age: 23 
In case we want to delete element by value, then first we need to find the index of that value and then use splice() method. Find the example.
function removeElement(val, arr) {
  var index = arr.indexOf(val);
  if (index >= 0) {
    arr.splice(index, 1);
  }
}

var countries = ['India', 'China', 'Russia', 'France'];
removeElement('China', countries);
console.log(countries); //[ "India", "Russia", "France" ] 

Remove from Array with filter()

filter() creates a new Array from given Array elements that passes the given condition. Find the code snippet.
var countries = ['India', 'China', 'Russia', 'France'];
var outputArray = countries.filter(country => country.endsWith('a'));
console.log(outputArray); //[ "India", "China", "Russia" ] 
In the above code, the condition is that country name must end with 'a'. So the output array will not contain those countries whose name does not end with 'a'. There will be no change in calling Array.
Find some more examples.
console.log('--- String ---');  
var countries = ['India', 'China', 'Russia', 'France'];
var outputArray = countries.filter(country => country.startsWith('I') || country.startsWith('R'));
console.log(outputArray); //[ "India", "Russia" ]

console.log('--- Number ---');
var myNums = [1, 2, 3, 4, 5, 6, 7, 8];
var oddNums = myNums.filter(num => num % 2 == 1);
console.log(oddNums); //[ 1, 3, 5, 7 ]

console.log('--- Object ---');
var students = [
  {name: 'Arjun', age: 15},
  {name: 'Bheem', age: 25},
  {name: 'Nakul', age: 23}
];
var olderStudents = students.filter(student => student.age >= 18);
olderStudents.forEach(student => console.log('Name: ' + student.name + ', Age: ' + student.age)); 
Output
--- String ---
Array [ "India", "Russia" ]

--- Number ---
Array(4) [ 1, 3, 5, 7 ]

--- Object ---
Name: Bheem, Age: 25
Name: Nakul, Age: 23 

Remove from Array with delete Operator

JavaScript delete operator removes a property from an object and becomes undefined. When deleting Array elements using delete operator, that element is no longer in Array but the Array length is not affected. When we access that deleted element, we get undefined. Find the code snippet.
var countries = ['India', 'China', 'Russia'];
delete countries[1];
console.log(countries.length);  // 3
console.log(countries); //[ "India", undefined, "Russia" ] 
Find more examples.
console.log('--- String ---');  
var countries = ['India', 'China', 'Russia'];
delete countries[2];
console.log(countries.length);  // 3
console.log(countries); //[ "India", "China", undefined ]

console.log('--- Number ---');
var myNums = [1, 2, 3, 4, 5];
delete myNums[1];
delete myNums[3];
console.log(myNums.length);// 5
console.log(myNums); //[ 1, undefined, 3, undefined, 5 ]

console.log('--- Object ---');
var students = [
  {name: 'Arjun', age: 15},
  {name: 'Bheem', age: 25},
  {name: 'Nakul', age: 23}
];
delete students[1];
students.forEach(student => console.log('Name: ' + student.name + ', Age: ' + student.age)); 
Output
--- String --- 
3
Array(3) [ "India", "China", undefined ]

--- Number ---
5
Array(5) [ 1, undefined, 3, undefined, 5 ]

--- Object ---
Name: Arjun, Age: 15
Name: Nakul, Age: 23 

Clear Array Completely

We can remove all elements from Array in following way.
1.
var countries = ['India', 'China', 'Russia'];
countries = [];
console.log(countries); //[ ] 
2.
var countries = ['India', 'China', 'Russia'];
countries.length = 0;
console.log(countries); //[ ] 
3.
var countries = ['India', 'China', 'Russia']; 
countries.splice(0, countries.length);
console.log(countries); //[ ] 
4.
var countries = ['India', 'China', 'Russia']; 
while(countries.length) {
  countries.pop();
}
console.log(countries); //[ ] 
5.
var countries = ['India', 'China', 'Russia']; 
while(countries.length) {
  countries.shift();
}
console.log(countries); //[ ] 

Reference

JavaScript Array
POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us