JavaScript Array Find Explained

The JavaScript Array Find Method: Made Easy!

In this blog, 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. In this article, we are going to break it down to its pieces and try to understand the JavaScript Array find() Method!

The purpose of the JavaScript Array Find Method

There are actually two parts to the find() method. There is find() and findIndex(). We will cover findIndex() in a separate article. The purpose of the find() method is, returning 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 kind of Linux flavors. (By the way, if you want to learn more about Linux check out my other project…)

const linuxDistros = [
  {
    name: "Manjaro",
    basedOn: "Arch Linux"
  },
  {
    name: "Mint",
    basedOn: "Debian"
  },
  {
    name: "Kali Linux",
    basedOn: "Debian"
  }
];

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)

The output of this code would be:

{ name: 'Manjaro', basedOn: 'Arch Linux' }

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

const findDistro = function(array, distroName) {
};

Now, this obviously 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) {
  });
};

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 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 basically 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;
  });
};

This returns the value of the first matching element in the array, if not 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)

On 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' }

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:

undefined

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();
  });
};

Conclusion

And there you have it. I hope this gives you a better understanding of how the JavaScript Array Find Method works. Leave any suggestions to the code in the comments below. Keep learning!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: