Find object by id in an array of JavaScript objects

Advanced control with findIndex()

let index = yourArray.findIndex(obj => obj.id === 'desiredId');


You got the object, but what if you need its location in the array? After all, knowing where you stand is half the battle. Here's where findIndex() jumps in. It fetches the index instead of the object.

Handling multiple matches

let allMatches = yourArray.filter(obj => obj.id === 'desiredId');


Sometimes, one just doesn't cut it. And when id is non-unique, or you're seeking a bunch of objects, filter() is your VIP pass to allMatches city.

Efficient property extraction

let properties = yourArray.filter(obj => obj.id === 'desiredId').map(obj => obj.foo);


Why carry the weight of an entire object when all you need is one shiny property? .filter() and .map() join forces here, like Batman and Robin, to get you just what you need - foo.

Polyfill for cross-browser support

if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    // Leave the implementation of this to the big guys
  };
}


Old dogs might not learn new tricks, but old browsers can. A polyfill for Array.prototype.find gives find() a warm hug of ES6 compatibility.

Creating a lookup table

let lookup = yourArray.reduce((acc, obj) => {
  acc[obj.id] = obj;
  return acc;
}, {});


For those who believe time > space, a lookup table gives you lightning-fast access to your objects. The lookup is your quicksilver at lookup[desiredId].

Crafting robust search algorithms

Ensuring unique identifiers

Before making a lookup table, check the ids on their uniqueness. Duplicates are as welcome as a porcupine in a balloon factory.

Libraries, your best pals

Already using Underscore.js or Lodash? Leverage their _.find method:

let item = _.find(yourArray, { id: 'desiredId' });


Arrow functions, the superheroes of clean, readable code, are the pillars of methods like .find():

let foundItem = yourArray.find(item => item.id === 'desiredId');
