How to Search in an Array of Objects with Javascript

This is a very common issue that comes up. Assume the target array is of the form like below :

var __POSTS = [ { id: 1, title: 'Apple', description: 'Description of post 1' }, { id: 2, title: 'Orange', description: 'Description of post 2' }, { id: 3, title: 'Guava', description: 'Description of post 3' }, { id: 4, title: 'Banana', description: 'Description of post 4' } ];

Method 1 — Using the Classic "For" Loop - Old, Unrecommended

You can iterate through the array using a for loop

// Search for post with title == "Guava" var __FOUND = -1; for(var i=0; i<__POSTS.length; i++) { if(__POSTS[i].title == 'Guava') { // __FOUND is set to the index of the element __FOUND = i; break; } } // On success __FOUND will contain the index of the element // On failure it will contain -1 console.log(__FOUND); // 2

Method 2 — Using Array.find()

Array.find() is a fairly new function that has been added in Javascript. It takes a callback function as parameter and executes that function once for each element present in the array, until it finds one where the function returns a true value. If the element is found it returns the value of the element, otherwise undefined is returned.

var __FOUND = __POSTS.find(function(post, index) { if(post.title == 'Guava') return true; }); // On success __FOUND will contain the complete element (an object) // On failure it will contain undefined console.log(__FOUND); // { id: 3, title: 'Guava', description: 'Description of post 3' }

The return value may sound a little confusing. The theory says that it returns the element whereas in the code a true value is returned on success.
The reason is that the true value is used internally. The true value denotes that match has been found and there is no need to go further to the next elements in the array. On getting a true return value from the callback function, find() returns the value of that element in the array (an object in this case).

However it would have been better if the return value would just be the index of the matched element instead of the whole element. For this Array.findIndex() is used.

Method 3 — Using Array.findIndex(), Probably the Best Way

Array.findIndex() is similar to Array.find() but it returns the index of the matched element.

var __FOUND = __POSTS.findIndex(function(post, index) { if(post.title == 'Guava') return true; }); // On success __FOUND will contain the index of the element // On failure it will contain -1 console.log(__FOUND); // 2

A Word of Note

Array.find() and Array.findIndex() may be not present in all mobile browsers (at the time of writing this article). However Mozilla provides pollyfills — code snippets that you can add at the top of your scripts. If the methods are not available natively in the browser, these polyfills will act like the original functions. See the polyfills for Array.find() and Array.findIndex().

You may be a little disappointed by the non-compatibility issue and may be tempted to use the for loop method. But I strongly advise you to use the newer find() and findIndex() methods. It is your way forward as a Javascript developer.