Remove items from array in JavaScript
You can remove all items from an array with a specific value in JavaScript by changing or not the original array.
Without changing the original array
function removeAllItems(arr, v) {
return arr.filter((el) => el !== v);
}
const arr = [5, 6, 5, 4];
let temp;
temp = removeAllItems(arr, 6);
console.log(temp); // [5, 5, 4]
temp = removeAllItems(temp, 6);
console.log(temp); // [5, 5, 4]
temp = removeAllItems(temp, 5);
console.log(temp); // [4]
console.log(arr); // [5, 6, 5, 4]
You can also do it with arrow functions:
const removeAllItems = (arr, v) => arr.filter((el) => el !== v);
Changing the original array
You can change an array with splice, splice(start, deleteCount)
:
- The
start
is the index at which to start changing the array. - The
deleteCount
is the number of elements to remove in the array.
function removeAllItems(arr, value) {
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] === value) arr.splice(i, 1);
}
return arr;
}
const arr = [5, 6, 5, 4];
removeAllItems(arr, 6); // returns [5, 5, 4]
removeAllItems(arr, 6); // returns [5, 5, 4]
removeAllItems(arr, 5); // returns [4]
console.log(arr); // [4]
How not to do it
Changing the original array can be faster than generating a new array. But changing an array while you are looping through it can be dangerous. Try to see what is wrong below
// removing with a loop that goes up
function f1(arr, value) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === value) arr.splice(i, 1);
}
return arr;
}
// removing with a foreach
function f2(arr, value) {
arr.forEach((i, idx) => {
if (i === value) arr.splice(idx, 1);
});
return arr;
}
f1([5, 5, 4], 5); // returns [5, 4] instead of [4]
f2([5, 5, 4], 5); // returns [5, 4] instead of [4]
Why is this happening? Because when you remove the item, all the next indexes decrease by 1. So you cannot increment the index after removing an item.
How to do it looping up
// removing with a loop that goes up
function f1(arr, value) {
for (let i = 0; i < arr.length; ) {
if (arr[i] === value) {
arr.splice(i, 1);
} else {
i++; // only increment if you didn't remove an item.
}
}
return arr;
}
f1([5, 5, 4], 5); // returns [4]
Questions
What's the output of A?
function f(arr, v) {
return arr.filter((el) => el !== v);
}
f([6, 6, 3], 6); // A
What's the output of A?
function f(arr, v) {
return arr.filter((el) => el !== v);
}
f([7, 7, 8], 9); // A
What's the output of A?
const f = (arr, v) => arr.filter((el) => el !== v);
f([4, 4, 3], 4); // A
What's the output of A?
function f(arr, value) {
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] === value) arr.splice(i, 1);
}
}
let x = [0, 0, 5];
f(x, 0);
console.log(x); // A
What's the output of A?
function f(arr, value) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === value) arr.splice(i, 1);
}
return arr;
}
f([7, 7, 4], 7); // A
What's the output of A?
function f(arr, value) {
arr.forEach((i, idx) => {
if (i === value) arr.splice(idx, 1);
});
return arr;
}
f([11, 11, 12], 11); // A
What's the output of A?
function f(arr, value) {
for (let i = 0; i < arr.length; ) {
if (arr[i] === value) {
arr.splice(i, 1);
} else {
i++;
}
}
return arr;
}
f([5, 5, 4], 5); // A