title | shortTitle | type | language | tags | cover | excerpt | dateModified | |
---|---|---|---|---|---|---|---|---|
Remove the first or last n elements from a JavaScript array |
Remove first or last n array elements |
story |
javascript |
|
metropolitan-window |
Master JavaScript array element removal with these simple techniques. |
2023-12-24 |
As discussed previously, there are multiple ways to remove an element from an array, depending on your needs. This time around, we'll take a look at how to remove elements from the beginning or end of an array.
Array.prototype.shift()
and Array.prototype.pop()
are the two mutative methods available for removing a single element from the beginning or end of an array, respectively. Both methods mutate the original array and return the removed element.
const arr = ['a', 'b', 'c'];
const first = arr.shift(); // 'a'
const last = arr.pop(); // 'c'
console.log(arr); // ['b']
If you need to remove multiple elements from the beginning or end of an array, you can use Array.prototype.splice()
or Array.prototype.slice()
. The main difference between the two is that Array.prototype.splice()
mutates the original array, while Array.prototype.slice()
returns a new array.
We'll be focusing mainly on Array.prototype.slice()
, as mutating the original array is usually not desirable.
In order to remove n
elements from the beginning of an array, you can use Array.prototype.slice()
with a positive start index and no end index. This will return a new array with the first n
elements removed.
const drop = (arr, n = 1) => arr.slice(n);
drop([1, 2, 3]); // [2, 3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []
Conversely, in order to remove n
elements from the end of an array, you can use Array.prototype.slice()
with a start index of 0
and a negative end index. This will return a new array with the last n
elements removed.
const dropLast = (arr, n = 1) => arr.slice(0, -n);
dropLast([1, 2, 3]); // [1, 2]
dropLast([1, 2, 3], 2); // [1]
dropLast([1, 2, 3], 42); // []
A more advanced use-case is removing elements from an array based on a condition. While Array.prototype.filter()
is designed to do just that, it falls short when you want to remove all elements encountered until the condition is met.
Before using Array.prototype.slice()
, we first need to locate the first element matching the predicate function. This can be done using Array.prototype.findIndex()
. Once we have the index, we can use Array.prototype.slice()
to return a new array with the appropriate elements removed.
const dropUntil = (arr, func) => {
const index = arr.findIndex(func);
return arr.slice(index >= 0 ? index : arr.length);
}
dropUntil([1, 2, 3, 4], n => n >= 3); // [3, 4]
Similarly, we can remove elements from the end of an array based on a condition. This time around, we'll use Array.prototype.findLastIndex()
to locate the last element matching the predicate function. Once we have the index, we can use the same technique as before to return a new array with the appropriate elements removed.
const dropLastUntil = (arr, func) => {
const index = arr.findLastIndex(func);
return arr.slice(0, index >= 0 ? index + 1 : arr.length);
}
dropLastUntil([1, 2, 3, 4], n => n < 3); // [1, 2]