Search Item in an Array Like a Pro in JS

As javascript developers, often times we use arrays and its manipulator functions to deal with arrays when data to render comes in array format.

One of the challenges appears when it comes to find a item in an array with a specific property, it can be id, name, slug, etc.

When this scenario comes up, it seems using a find() method more than enough to accomplish the task. (Thank god there is no for loop in this article 😆)

const Component = ({ itemList }) => {
  
  // ...

  const findItem = id => {
   return itemList.find(item => item.id === id); 
  }
  // ...
}

Pretty simple, pretty basic. This method also creates very easy-to-read and maintainable code which is another win. But if we are gonna add efficiency to the equation, find() method traverse through the whole array, that ends up O(n) time complexity. It is not a big deal with short lists, but when data getting larger and larger, then you should start to search a way to optimize your algorithm.

What if I tell you that same result can be achieved in O(1)? By creating an object map from array!

const Component = ({ itemList }) => {
  // ...
  const itemListObj = itemList.reduce((acc, item) => {
    return ({ ...acc, [item.id]: item })
  }, {});

  const findItem = id => itemListObj[id];
  // ...
}

We used another powerful array method reduce() which is introduced with ECMAScript 5 to create a object map from array. We took the id as a common property throughout the items and assumed it is unique. Finally with using itemsListObj[id] method, we are able to get desired item in O(1). No need to traverse the array 🥳

Yes I know we iterated through when we use reduce() but it is a one-time job. All other consecutive searches done in O(1).

Let me show the structures before and after applying reduce():

Before:

const itemList: [
  {
    age: "21",
    id: "1",
    name: "Tate"
  },
  {
    age: "22",
    id: "2",
    name: "Tyla"
  },
  {
    age: "23",
    id: "3",
    name: "Miley"
  }, 
  {
    age: "24",
    id: "4",
    name: "Dua"
  }
]

After:

const itemListObj = {
  1: {
    age: "21",
    id: "1",
    name: "Tate"
  },
  2: {
    age: "22",
    id: "2",
    name: "Tyla"
  },
  3: {
    age: "23",
    id: "3",
    name: "Miley"
  },
  4: {
    age: "24",
    id: "4",
    name: "Dua"
  }
}

Recap

Optimizing your code is a good practice and considering time complexities can boost performance x1000 and beyond. We used a hashmap technique while transforming array into object map in this post. Hashmaps are very special, as the time it takes to look up a key takes a constant amount of time, so it does not matter wether the array has 10 or 10 million entries (the time complexity is constant = O(1)). Thus, looking up in an hashtable is way better than searching inside of an array (which takes more time with more entries = O(n)).

Sources:

MDN

Stackoverflow

Thank you for reading this far. See you in the next chapter :)