Following up my recent post which explains how to find a substring in a string in JavaScript, this post will be dealing with searching for a string or an object in an Array. It’s pretty common to have to search through an array to find a particular item when you’re working with JavaScript. For years the way to do this would be to use a for loop to iterate through each item, compare the strings, and then do something when you found a match. However with the release of ECMAScript 6 in 2015 some new methods were introduced which make searching for a substring in an array much easier. In this post we will look at each of these in more detail – Array.includes()
, Array.indexOf
, Array.find()
and you will also be able to find an object in an Array by its property value.
Using Array.includes() in Javascript
Array.includes()
is a case sensitive search that will return a true when it finds the first instance of the item you’re searching for in the array.
const drinksOrder = ['beer', 'wine', 'coke']; const doesOrderContainWine = drinksOrder.includes('wine'); console.log(doesOrderContainWine); // true
Using Array.indexOf() in Javascript
Array.indexOf() can be used to find out if an array contains an element, just like Array.includes() above. However it is less readable so personally I use .includes wherever possible. Array.indexOf() also tells us what position the element is in (the first position if there are more than 2 of the same item), so I have included examples of both here.
const drinksOrder = ["beer", "coke", "wine"]; const doesOrderContainWine = drinksOrder.indexOf("wine") >= 0; const position = drinksOrder.indexOf("wine"); console.log(doesOrderContainWine); // true console.log("Position of wine in the order :" + position); //2
Using Array.find() in Javascript
Array.find() is described like this in the pfficial documentation:
The
https://developer.mozilla.org/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.
It is especially useful if you’re trying to find an object in an Array by the value of one of its properties, and it can be used in different ways by providing a different testing function. In this example we want to find an object by it’s name property:
const farmAnimals = [ { name: "horse", quantity: 3 }, { name: "cat", quantity: 1 }, { name: "cow", quantity: 15 }, ]; let theCat = farmAnimals.find((animal) => animal.name === "cat"); let theChicken = farmAnimals.find((animal) => animal.name === "chicken"); console.log(theCat); //returns the first found object console.log(theChicken); //returns undefined, as not found
As you can see from the image below if Array.find does find a match then it returns the object it found. If it does not find a match then it returns undefined.