I am currently available for freelance/contract work. Book a meeting so we can talk about your project.

Quickly finding objects in large arrays

Posted on

If we can identify objects in an array by a unique property, we can turn the array into a lookup object instead. The unique value of that property becomes a key and the full object becomes its value.

If we know what value of the property we’re looking for, we no longer have to walk through the entire array to find it. We can instead get to the object using the object’s square bracket syntax, which is a much faster operation.

// this array holds objects that all have name- and type-properties
const array = [
  { name: "Bulbasaur",  type: "Grass/Poison" },
  { name: "Charmander", type: "Fire"         },
  { name: "Squirtle",   type: "Water"        },
  { name: "Pikachu",    type: "Electric"     },
]
 
// to get the type for a name, we need to .find() the element first
array.find((pokemon) => pokemon.name === "Charmander").type
// ⇒ "Fire"
 
// this lookup object uses the unique names as keys
const lookupObject = {
  Bulbasaur:  { name: "Bulbasaur",  type: "Grass/Poison" },
  Charmander: { name: "Charmander", type: "Fire"         },
  Squirtle:   { name: "Squirtle",   type: "Water"        },
  Pikachu:    { name: "Pikachu",    type: "Electric"     },
}
 
// lookups work with bracket notation, which is faster than .find()
lookupObject["Charmander"].type
// ⇒ "Fire"
// this array holds objects that all have name- and type-properties
const array = [
  { name: "Bulbasaur",  type: "Grass/Poison" },
  { name: "Charmander", type: "Fire"         },
  { name: "Squirtle",   type: "Water"        },
  { name: "Pikachu",    type: "Electric"     },
]
 
// to get the type for a name, we need to .find() the element first
array.find((pokemon) => pokemon.name === "Charmander").type
// ⇒ "Fire"
 
// this lookup object uses the unique names as keys
const lookupObject = {
  Bulbasaur:  { name: "Bulbasaur",  type: "Grass/Poison" },
  Charmander: { name: "Charmander", type: "Fire"         },
  Squirtle:   { name: "Squirtle",   type: "Water"        },
  Pikachu:    { name: "Pikachu",    type: "Electric"     },
}
 
// lookups work with bracket notation, which is faster than .find()
lookupObject["Charmander"].type
// ⇒ "Fire"
Debug
none
Grid overlay