Find the last matched element - the bad, the good, and the better
Tags: typescript, frontend, tutorial, javascript
Published: 2024-05-07 08:18:18

---
title: "Find the last matched element - the bad, the good, and the better"
published: true
description: "Learn how to find the last matched element in an array using different approaches in JavaScript, from syntactic sugar to performance-efficient solutions"
cover_image: "https://res.cloudinary.com/mayashavin/image/upload/v1715069325/articles/typescript/last-matched-element.png"
canonical_url: "https://mayashavin.com/articles/find-last-element-array"
tags: ['TypeScript', 'frontend', 'tutorial', 'JavaScript']
---

_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](#table-of-contents)
- [The problem of finding the last matched element](#the-problem-of-finding-the-last-matched-element)
- [The bad - using toReversed and find](#the-bad---using-toreversed-and-find)
- [The good - iterate with loop from the end](#the-good---iterate-with-loop-from-the-end)
- [The better - using Array.prototype.findLast()](#the-better---using-arrayprototypefindlast)
- [Summary](#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'.

```js
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.

```js
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:

```js
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:

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast) 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:

```js
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](https://www.oreilly.com/library/view/learning-vue/9781492098812/)!_

👉 _If you'd like to catch up with me sometimes, follow me on [X](https://x.com/MayaShavin) | [LinkedIn](https://www.linkedin.com/in/mayashavin)._

Like this post or find it helpful? [Buy me a coffee ☕](https://www.buymeacoffee.com/vtlrkh6) 🙌🏼