January 28, 2022

Blog @ Munaf Sheikh

Latest news from tech-feeds around the world.

findLast() and findLastIndex() array methods — Lyty.dev BlogLyty.dev Blog

The findLast() and findLastIndex() array methods are here! We all know about JavaScript find() and findIndex() array methods that accept a test function and return the first found element and element index respectively. Unless you don’t make use of this function as a JavaScript developer, you would have also thought about a way to find last element and the last element index in JavaScript. Let’s look at how to do that.

Finding The Last Element and Element Index Using reverse()

Earlier than now, there are no specific array methods to find last index and last element index in JavaScript, so, one way to do this is to make use of the reverse() array method to reverse the order of the elements in the array, then use the find() and findIndex() method respectively. See the examples below:

Find Last Element

const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const lastGreaterThan5 = arrayElements.reverse().find((element) => element.length > 5); 
console.log(lastGreaterThan5); // "Orange"

Find Last Element Index

const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const reversedIndexGreaterThan5 = arrayElements.reverse().findIndex((element) => element.length > 5); // 0
const lastIndexGreaterThan5 = (arrayElements.length - 1) - reversedIndexGreaterThan5; 
console.log(lastIndexGreaterThan5); // 4

The first example was straightforward, reversing the array and returning the first match element according to the test function. However, in the second example which finds the last element index, we had to perform a little more calculation in order to get the accurate result. This is because we needed the last element index according to the array’s original order, not the reversed order. Finding just the reversed array element index will result in 0 because this is the reversed element index, we had to subtract the found index from the array length to get the accurate index.

const lastIndexGreaterThan5 = (arrayElements.length - 1) - reversedIndexGreaterThan5; // 4

Finding The Last Element with findLast() array method

The new findLast() array method now lets you find the last element in an array, without any further logic.

const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const lastGreaterThan5 = arrayElements.findLast((element) => element.length > 5); // "Orange"

Live Example

View examples in DIY editor

Finding The Last Element Index with findLastIndex() array method

The new findLastIndex() array method now lets you find the last element in an array, without any further logic.

const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const lastIndexGreaterThan5 = arrayElements.findLastIndex((element) => element.length > 5); // 4

Live Example

View examples in DIY editor

Browser Support

findLast() and findLastIndex() methods were proposed in the ECMAScript Draft and are now in stage 3. Google announces the full support for findLast() and findLastIndex() methods in Chrome 97.  Below is the image from CanIUse, showing the map of the findLast() and findLastIndex() browser support. As at the time of this writing, Chrome 97 and Edge 97  are both included.


Source link