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.
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