Using object-access instead of Array.find when dealing with lots of data - Javascript Recipe

A repeating thing we do with a large list is try and find a particular item.

For instance, you get a customers list from an API and at various points, you try and extract one particular customer:

let customers = [
  { id: 'asdf', name: 'john', age: 28, city: 'denver' },
  { id: 'lkjh', name: 'bob', age: 25, city: 'kyoto' },
  { id: 'qwer', name: 'angela', age: 44, city: 'mumbai' },
];

let customerIdToFind = 'asdf';

const result = customers.find((cust) => cust.id === customerIdToFind);
// { id: 'asdf', name: 'john', age: 28, city: 'denver' }

There are times when I do this a lot across the app. So instead of trying to find by iterating over a list, I convert the customers list into an object where the key is the id and the value is the customer object.

const convertToObject = ({ key, list = [] }) => {
  if (!list || !list.length || !key) return undefined;
  const kvals = list.map((item) => item[key]).filter((v) => v !== undefined);
  return Object.fromEntries(
    kvals.map((kval) => [kval, list.find((item) => item[key] === kval)])
  );
};

let customers = [
  { id: 'asdf', name: 'john', age: 28, city: 'denver' },
  { id: 'lkjh', name: 'bob', age: 25, city: 'kyoto' },
  { id: 'qwer', name: 'angela', age: 44, city: 'mumbai' },
];

let customersAsObject = convertToObject({
  key: 'id',
  list: customers,
});

/* 
customersAsObject = {
  'asdf': { id: 'asdf', name: 'john', age: 28, city: 'denver' },
  'lkjh': { id: 'lkjh', name: 'bob', age: 25, city: 'kyoto' },
  'qwer': { id: 'qwer', name: 'angela', age: 44, city: 'mumbai' },
}
*/

This makes it easy to "access" a particular customer at O(1) time instead of O(N) time.

let customers = [
  { id: 'asdf', name: 'john', age: 28, city: 'denver' },
  { id: 'lkjh', name: 'bob', age: 25, city: 'kyoto' },
  { id: 'qwer', name: 'angela', age: 44, city: 'mumbai' },
];

let customersAsObject = convertToObject({
  key: 'id',
  list: customers,
});

let customerIdToFind = 'asdf';

const result = customersAsObject[customerIdToFind];
// { id: 'asdf', name: 'john', age: 28, city: 'denver' }

Typically, I convert the customers list right at the time of getting the data from the API (or any other service) and pass the object around across the app.