The Ultimate find() method in Javascript

If you ever worked with Javascript, you probably encountered a problem that requires you to find an item or check if an item exists in an array. In this article, I will show you how to check if an item exists in an array and return it by using a single method.

Let me start with the problem of checking if an item exists in an array. In Javascript, The Array.prototype.findIndex() method searches through an array, and if a match is found, it returns its index/position, otherwise returns -1. Depending on the returned results, it is trivial to check if an array includes our target item or not.

Throughout the article, I will use an array of users below to demonstrate the search operations.

const users = [
{ id: 1, username: 'mjthecoder },
{ id: 2, username: 'Jerry' },
{ id: 3, username: 'Davis' }
]

Now, given two users ids 3 and 4 respectively, how can you check if they exist in the array? Using the findIndex() method, the code for solving this problem will look like below.

console.log(users.findIndex(user => user.id === 3)) // 2 : FOUND
console.log(users.findIndex(user => user.id === 4)) // -1 : NOT FOUND

While checking if an item exists in the array can be done very well using findIndex(), there are some instances where you want both, the item in the array and its position of occurrence. How can you solve this problem?

Well, in Javascript you could the combination of two array methods, find() and findIndex() like shown by the code snippet below.

const position = users.findIndex(user => user.id === 3);
console.log(position) // 2
const user = users.find(user => user.id === 3);
console.log(user) // { id: 2, username: 'Davis' }

That worked pretty well, however, I think it is a little inefficient because we have to pass through the array two times. The first pass is for finding an index/position and the second pass is for getting an item itself. Can we do this in a single pass? Yes, and here is the solution.

Array.prototype.findOnce = function(callback) {
for (let i = 0; i < this.length; i++) {
let currentItem = this[i];
if(callback(currentItem, i, this)) {
return [i, currentItem];
}
}
return [-1, undefined];
}

Now, using the solution above, this is here is how we can find a user with an id of 3.

const [position, user] = users.findOnce(user => user.id === 3);console.log(position); // 2
consooe.log(user); // { id : 2, username: 'Davis' };

Just like find(), the findOnce() method takes in a callback function and returns an array containing the position of an item as the first element and the item itself as the second element. If an item is not found, the first element of a returned array will be -1, and the second element will be undefined.

The solution above adds findOnce() directly to the Javascript Array. prototype. Even though this way works pretty fine, but it is not recommended to add methods or properties directly to the built-in Javascript object prototypes. That being mentioned, here is how you could re-write the findOnce() method and reuse it across your codebase.

findOnce(arr, callback) {
for (let i = 0; i < arr.length; i++) {
let currentItem = arr[i];
if (callback(currentItem, i, arr)) {
return [i, currentItem];
}
}
return [-1, undefined];
}

Conclusion

This article shows how you can create a function that combines the behaviors of find() and findIndex() to perform efficient search operations in any Javascript array. If you find this article helpful please leave a comment or give it a clap.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Jordan

Software engineer based in Seoul, South Korea. I am interested in web development, competitive programming, database, REST APIs, and blockchain.