JavaScript Remove from Array
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.
Contents
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));
--- 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));
--- 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...)
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));
--- String --- Array [ "Russia" ] Array(3) [ "India", "China", "France" ] --- Number --- Array [ 50, 75 ] --- Object --- Name: Arjun, Age: 20 Name: Nakul, Age: 23
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" ]
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));
--- 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" ]
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));
--- 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); //[ ]
var countries = ['India', 'China', 'Russia']; countries.length = 0; console.log(countries); //[ ]
var countries = ['India', 'China', 'Russia']; countries.splice(0, countries.length); console.log(countries); //[ ]
var countries = ['India', 'China', 'Russia']; while(countries.length) { countries.pop(); } console.log(countries); //[ ]
var countries = ['India', 'China', 'Russia']; while(countries.length) { countries.shift(); } console.log(countries); //[ ]