5 ways to find a value in an array of objects in Javascript

In JavaScript, arrays are a commonly used data structure for storing multiple values. Arrays can contain various types of data, including objects. Sometimes, we may need to search for a specific value in an array of objects. This can be a challenging task, especially when the array contains a large number of objects. To solve this problem, we can use various techniques such as looping through the array, built-in array methods, or third-party libraries. In this topic, we will explore different approaches to find a value in an array of objects in JavaScript.

Photo by Markus Winkler on Unsplash

if we have an array of users objects

const users = [
  {
    id: 1,
    name: 'John',
    isActive: true
  },
  {
    id: 2,
    name: 'Mike',
    isActive: false
  },
  {
    id: 3,
    name: 'Maria',
    isActive: true
  }
]

if we want to find and return the user that has a specific, this can be done in multiple ways.

1) For .. in

loops over the users array indexes, and returns the user object if found or null.

function findUser(name) {
  for (let i in users) { //loops over array indexes
    if (users[i].name === name) { //case sensitive
      return users[i]
    }
  }
  return null
}

console.log(findUser('Mike')) // { id: 2, name: 'Mike', isActive: false }

2) For..of

loops over the users array objects, and returns the user object if found or null.

function findUser2(name) {
  for (let user of users) {
    if (user.name === name) { // case sensitive
      return user
    }
  }
  return null
}
]
console.log(findUser('Mike')) // { id: 2, name: 'Mike', isActive: false }
console.log(findUser('Mik')) // null

3) Array.prototype.find()

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

function findUser(name) {
  return users.find((user) => user.name === name)
}
console.log(findUser('Mike')) //{ id: 2, name: 'Mike', isActive: false }
console.log(findUser('Mik')) // undefined

if we need to return the user that is not active:

function findUser() {
  return users.find((user) => !user.isActive)
}
console.log(findUser()) //{ id: 2, name: 'Mike', isActive: false }

4) Array.prototype.filter()

return A shallow copy of a portion of the given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. If no elements pass the test, an empty array will be returned.

Array.filter() returns an array of all the objects that pass the test implemented by the provided function, if we want to return only the first user we can return index 0 of the returned array.

function findUsers(name) { // returns all the users with the provided name or empty array
  return users.filter((user) => user.name === name) 
}

function findUser(name) { // returns the first user with the provided name
  return users.filter((user) => user.name === name)?.[0] 
}
console.log(findUsers('Mike')) // [ { id: 2, name: 'Mike', isActive: false } ]
console.log(findUsers('Mik')) // []

console.log(findUser('Mike')) // { id: 2, name: 'Mike', isActive: false }
console.log(findUser('Mik')) // undefined

5) for loop

function findUser(name) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].name === name) {
      return users[i]
    }
  }
  return null
}
console.log(findUser('Mike')) // { id: 2, name: 'Mike', isActive: false }
console.log(findUser('Mik')) // null

clap if this was helpful

Other Articles

“Top 10” HTTP Status Code explained you need to know as a Front End Developer

Introduction to React Server Components 🚀

HackerRank Certified 🥇Javascript(Basic) Question Solved ✅

Thanks for reading😊 Show some support and follow Me on Twitter 🌍 and Medium.