snippetjavascriptTip

Get elements from the start or end of a JavaScript array by condition

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptfromendconditionelementsgetthestartarray

Problem

We've previously covered how to get the first or last n elements of a JavaScript array. This time, we'll be looking at how to get elements from the start or end of an array based on a given condition.
Modern JavaScript is full of useful array methods, which help us avoid writing for...of loops, which I personally find to be a bit old-fashioned. At the core of the problem we want to solve is a very simple task - find the index of the first element in the array that doesn't meet the condition. This is exactly what Array.prototype.findIndex() is for.
Having found the index, we can use Array.prototype.slice() to get the elements from the start of the array up to that index. There's a small caveat, though. Array.prototype.findIndex() returns -1 if no element in the array meets the condition. This means that we need to check for that value and return the entire array if that's the case.
Getting elements from the end of the array is pretty similar. To find the index, we'll have to use Array.prototype.findLastIndex(). Additionally, we have to add 1 to the index, to account for the behavior of Array.prototype.slice().

Solution

const takeWhile = (arr, fn) => {
  const index = arr.findIndex(n => !fn(n));
  return index === -1 ? arr : arr.slice(0, index);
};

takeWhile([1, 2, 3, 4], n => n < 0); // []
takeWhile([1, 2, 3, 4], n => n < 3); // [1, 2]
takeWhile([1, 2, 3, 4], n => n < 5); // [1, 2, 3, 4]

Having found the index, we can use Array.prototype.slice() to get the elements from the start of the array up to that index. There's a small caveat, though. Array.prototype.findIndex() returns -1 if no element in the array meets the condition. This means that we need to check for that value and return the entire array if that's the case.
Getting elements from the end of the array is pretty similar. To find the index, we'll have to use Array.prototype.findLastIndex(). Additionally, we have to add 1 to the index, to account for the behavior of Array.prototype.slice().

Code Snippets

const takeWhile = (arr, fn) => {
  const index = arr.findIndex(n => !fn(n));
  return index === -1 ? arr : arr.slice(0, index);
};

takeWhile([1, 2, 3, 4], n => n < 0); // []
takeWhile([1, 2, 3, 4], n => n < 3); // [1, 2]
takeWhile([1, 2, 3, 4], n => n < 5); // [1, 2, 3, 4]

const takeRightWhile = (arr, fn) => {
  const index = arr.findLastIndex(n => !fn(n));
  return index === -1 ? arr : arr.slice(index + 1);
};

takeRightWhile([1, 2, 3, 4], n => n > 5); // []
takeRightWhile([1, 2, 3, 4], n => n > 2); // [3, 4]
takeRightWhile([1, 2, 3, 4], n => n > 0); // [1, 2, 3, 4]

Context

From 30-seconds-of-code: take-elements-by-condition-from-array-start-or-end

Revisions (0)

No revisions yet.