Get N elements from the start or end of a JavaScript array
JavaScript, Array · Jul 9, 2023

A very common scenario when working with arrays is to get a subset of elements from the start or end of the array. Depending on the use-case and the desired result, there are a few variants of this operation that might fit your needs.
Get the first N elements of an array
Starting simple, you might want to get the first N elements of an array. Using Array.prototype.slice()
you can easily achieve this by passing 0
as the starting index and n
as the ending index.
const take = (arr, n = 1) => arr.slice(0, n);
take([1, 2, 3], 0); // []
take([1, 2, 3], 2); // [1, 2]
take([1, 2, 3], 5); // [1, 2, 3]
As you can see from these examples, Array.prototype.slice()
is versatile enough to handle values of n
that would be well outside the array. This means that if the value of Array.prototype.length
is less than or equal to n
, all elements in the array will be retrieved.
Negative values are a little odd, as you will end up getting all values between 0
and the n
th to last element. If you want to avoid that behavior, you could simply add some code to validate that n
is greater than or equal to 0
and throw an error otherwise.
Get the last N elements of an array
Getting the last N elements of an array is pretty similar. Passing a negative index to Array.prototype.slice()
is all that's necessary to make this work.
const takeRight = (arr, n = 1) => arr.slice(-n);
takeRight([1, 2, 3], 2); // [2, 3]
takeRight([1, 2, 3], 0); // [1, 2, 3] - Huh?
takeRight([1, 2, 3], 5); // [1, 2, 3]
While this works in most cases, passing a value of 0
for n
will result in the retrieval of all array elements. You can mitigate this by using Array.prototype.length
to always pass two positive values to Array.prototype.slice()
.
const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
takeRight([1, 2, 3], 2); // [2, 3]
takeRight([1, 2, 3], 0); // []
takeRight([1, 2, 3], 5); // [2, 3] - Huh?
This variant ends up breaking in case n
is greater than the length of the array, which isn't great. Instead of overly complex solutions, including a ternary operator (?
) in the original variant should be more than enough.
const takeRight = (arr, n = 1) => n === 0 ? [] : arr.slice(-n);
takeRight([1, 2, 3], 2); // [2, 3]
takeRight([1, 2, 3], 0); // []
takeRight([1, 2, 3], 5); // [1, 2, 3]
Again, negative values will result in an odd behavior, so you might want to add some validation code to prevent that.
Written by Angelos Chalaris
I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.
If you want to keep in touch, follow me on GitHub.