Find the last matched element - the bad, the good, and the better

In this article, we will discuss different approaches to find the last element of an array that matches a given condition in JavaScript, from using a regular for loop to more syntactic solution like inReversed(), find() and findLast(). We will also compare the performance of each approach and see which one is the most efficient.

Table of contents

• Table of contents
• The problem of finding the last matched element
• The bad - using toReversed and find
• The good - iterate with loop from the end
• The better - using Array.prototype.findLast()
• Summary

The problem of finding the last matched element

Let's say we have an array of objects and we want to look for the last element that matches a specific condition. For example, we have an array of fruits and we want to find the last fruit whose name starts with the letter 'p'.

const items = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'passion fruit' },
  { id: 4, name: 'orange' },
  { id: 5, name: 'watermelon', },
  { id: 6, name: 'kiwi' },
  { id: 7, name: 'grape' },
  { id: 8, name: 'mango' },
  { id: 9, name: 'pear' },
  { id: 10, name: 'strawberry' }
];

There are different ways to solve it (and I'm sure you are already thinking of one, at least). Let's explore them together, starting with toReversed() and find().

The bad - using toReversed and find

One straightforward way to find the last matched element is to reverse the array and then use the find() method to look for the first matched element in the reversed one.

items.toReversed().find(item => item.name.startsWith('p'))

This approach works, but it's not the most efficient one in performance. It requires two array iterations: creating a new array (reversed) and iterating over it until the first match is found. Also, it requires additional resource (a new array) to be created. Hence, it is a bad solution, especially for large arrays in JavaScript.

Let's see how we can improve it in the next section.

The good - iterate with loop from the end

This approach is a more classic one and less syntactic sugar looking than the previous one. For this approach, we will iterate over the array from the end using for loop and return the first element matched the given condition, as shown below:

function findLastMatchedElement(arr, condition) {
  for (let i = arr.length - 1; i >= 0; i--) {
    const item = arr[i];

    if (condition(item)) {
      return item;
    }
  }
}

With this implementation, we now can find the last matched element in the items array as follows:

findlastMatchedElement(items, item => item.name.startsWith('p'))

This approach is more efficient because it only requires exactly one loop iteration over the array, starting from the end, without any additional new array. Also, it stops as soon as the first match is found, which is exactly what we need. The only drawback is that it's a bit more verbose than the previous one.

So, is there a better way to do this? Let's find out in the next section.

The better - using Array.prototype.findLast()

Introduced in ES2022, the findLast() method works similarly to the find() method, but instead of returning the first condition-satisfied element, it returns the last one. Hence, to find our last matched element in the items array, we can use the findLast() method as follows:

items.findLast(item => item.name.startsWith('p'))

And that's all it takes. Using findLast() is more concise and readable than the previous approach, while maintaining the same efficiency. Also, findLast() is currently supported in modern browsers and Node 18+, so you can use it without any additional setup or polyfills. Similarly, we can use findLastIndex() to get the index of the last condition-statisfied element, instead of the element itself.

Summary

We have explored three different approaches to find an element that satisfies a given condition in an array, starting with chaining using inReversed() and find(), then performing a simple reverse loop, and finally using the findLast() method. Even though findLast() seems to be the most concise approach, it's essential to understand the performance implications of each method and choose the one that best fits your use case. And always remember KISS rule 😉!

👉 Learn about Vue 3 in TypeScript with my new book Learning Vue!

👉 If you'd like to catch up with me sometimes, follow me on X | LinkedIn.

Like this post or find it helpful? Buy me a coffee ☕ 🙌🏼