How to search for a substring or object in an array in Javascript

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

https://developer.mozilla.org/

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.