The JavaScript Array Find Method – Made Easy!

In this article, we break down topics that we found particularly hard while learning Web Development on our own. One of the things that were a bit harder for me to understand was the JavaScript Array Find Method. We will break it down into its pieces and try to understand the JavaScript Array find() Method!

Table of Contents

1. How do you search an Array in JavaScript?
2. The purpose of the JavaScript Array Find Method
3. JavaScript Array Find Method Example
4. Modifying the Code for Case Sensitivity
5. Conclusion

ℹ️ This article has a corresponding Replit repository that you can copy and play around with. Create a free Replit account and click on the Fork Repl button below. This is the best way to practice programming!

How do you search an Array in JavaScript?

There are a couple of different ways to search an array in JavaScript. The most common method is the array.prototype.indexOf() method. This array method returns the first index that matches the given value or -1 if no match is found.

Another way to search an array is to use the array.prototype.includes() method. This method returns true if the given value is present in the array, or false if not.

Finally, you can also use the array.prototype.find() method. This method returns the first element that matches the given predicate function, or undefined if no match is found. Whichever method you choose, searching an array in JavaScript is relatively straightforward.

The purpose of the JavaScript Array Find Method

There are actually two parts to the find() method. There is find() and findIndex(). The purpose of the find() method is to return the value of the first element of an array that matches the search criteria.

That means that you are actually searching for strings or numbers (values) instead of an index. Let’s look at an example below.

JavaScript Array Find Method Example

Let’s assume we have an array of objects of different kinds of Linux flavors:

const linuxDistros = [
  {
    name: "Manjaro",
    basedOn: "Arch Linux"
  },
  {
    name: "Mint",
    basedOn: "Debian"
  },
  {
    name: "Kali Linux",
    basedOn: "Debian"
  }
]Code language: JavaScript (javascript)

Now let’s assume we want to find a specific distribution by searching for its name. And I mean the actual name, so it’s a string value. To do that, we can utilize the find() method!

const findDistro = function(array, distroName) {
  return array.find(function(item) {
    return item.name === distroName;
  });
};
const distro = findDistro(linuxDistros, "Manjaro")
console.log(distro)Code language: JavaScript (javascript)

The output of this code would be:

{ name: 'Manjaro', basedOn: 'Arch Linux' }Code language: plaintext (plaintext)

So let’s break it down! We’ll go through the code line by line.

const findDistro = function(array, distroName) {
}Code language: JavaScript (javascript)

Now, this is our function declaration with two arguments: The array itself and a yet anonymous argument called distroName.

Next, we create the JavaScript array find() function:

const findDistro = function(array, distroName) {
  return array.find(function(item) {
  });
}Code language: PHP (php)

Now we are actually adding the array.find() method to our code. The find() method consists of a callback function that takes an argument. You can name that argument whatever you want.

We call it item, it is just a placeholder name, but item is basically the value that is returned from the iteration through our array. Therefore we compare this value to our distroName, and return it once it has found our search string. This Callback function is the same as a for loop you would use to iterate through the array.

Finally, we check if distro.name is equal to our search string distroName:

const findDistro = function(array, distroName) {
  return array.find(function(item) {
    return item.name === distroName;
  });
}Code language: JavaScript (javascript)

This returns the value of the first matching element in the array. If no match is found, undefined will be returned.

Let’s finally print out the results of our search and have a look at the complete code:

const linuxDistros = [
  {
    name: "Manjaro",
    basedOn: "Arch Linux"
  },
  {
    name: "Mint",
    basedOn: "Debian"
  },
  {
    name: "Kali Linux",
    basedOn: "Debian"
  }
];
const findDistro = function(array, distroName) {
  return array.find(function(item) {
    return item.name === distroName;
  });
};
const distro = findDistros(linuxDistros, "Manjaro")
console.log(distro)Code language: JavaScript (javascript)

At the end of the code, we are simply creating a variable called distro that calls the function with its two arguments: the array and the string we want to search for in our array object.

Once again, the result of this code is:

{ name: 'Manjaro', basedOn: 'Arch Linux' }Code language: plaintext (plaintext)

Modifying the Code for Case Sensitivity

You probably can see where this could become a problem already. The string value we enter for our search is case sensitive, so if we would search for “manjaro” instead of “Manjaro“, we would get the following result:

undefinedCode language: plaintext (plaintext)

Gladly, there is an easy workaround to fix that: the toLowerCase() method (or toUpperCase(), whichever you prefer!). We just need to modify the second return portion of the code as follows:

const findDistro = function(array, distroName) {
  return array.find(function(item) {
    return item.name.toLowerCase() === distroName.toLowerCase();
  });
}
const distro = findDistro(linuxDistros, "manjaro")
console.log(distro)Code language: JavaScript (javascript)

Conclusion

JavaScript arrays are one of the most versatile data structures available. They allow you to store and manipulate various data types and come with a built-in set of methods for performing common operations.

The JavaScript Array Find method is particularly useful for finding specific items in an array. It allows you to search an array for an element that meets a certain criterion and returns the first element that matches that criterion. For example, you could use the Array Find method to find the first element in an array that is greater than 10.

While the Array Find method is a powerful tool, it is important to remember that it only returns the first element that matches the criterion. If you need to find all elements that meet the criterion, you will need to use a different method, such as Array Filter. However, the JavaScript Array Find Method is hard to beat for finding a single element in an array.

🔥 Learn JavaScript Programming – Beginner Friendly!
🔨 JavaScript Basics
👉 JavaScript alert()
👉 Difference between Let and Const
🔸 JavaScript Arrays
👉 JavaScript Array Filter
👉 JavaScript Array Find
👉 JavaScript forEach (Arrays)
👉 JavaScript Slice (Arrays)
👉 JavaScript Spread Operator
🔸 JavaScript Strings
👉 JavaScript Slice(Strings)
👉 JavaScript Includes
🌐 Web Development with JavaScript
👉 Store User Input in a variable with JS
⚙️ JavaScript Specifics
👉 Sorting Numbers in JS
👉 JavaScript Fetch API
👉 toLocaleDateString in JavaScript