“What’s the best way to do this?”

This is a question I’m sure you have asked yourself a hundred times using JavaScript. And that’s because this language has so many different ways of doing anything.

If you’re working with arrays, you will often have to search through them. But what’s the best way to do that?

What if you need to know if a value is present in an array? What if you want to filter something out of your collections?

Turns out that in this sea of information, JavaScript has 4 amazing methods to do anything you may need when searching through your arrays.

Let’s start.

Use includes()

The includes() method returns a boolean telling you if the passed-in parameter exists or not in an array.

const fruits = ['🥝', '🍓', '🍑']
console.log(fruits.includes('🍉')) // returns false
console.log(fruits.includes('🍑')) // returns true

In my example, I’ve used this method to ask the question: “Hey array, do you contain this value, yes or no?”

An extra important thing to note about this method is that it doesn’t implicitly perform type coercion on the value you pass in. So basically, it won’t modify the type of parameter you pass in to confront values.

const numbers = [1, 2, 3, '4']
console.log(numbers.includes(4)) // returns false, no type coercion is performed
console.log(numbers.includes('4')) // returns true

As you can see, a strict comparison is performed here, so the number 4 won’t be converted to the string '4'to test the condition.

Conclusion: use includes() when you only want to know if a value is part of an array or not.

Use indexOf()

This method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['🥝', '🍓', '🍑', '🍌', '🫐']
console.log(fruits.indexOf('🍌')) // returns 3

In this example, the indexOf method returns 3, which is the first index at which I can find the value 🍌 in my array of fruits.

In case the element the value you pass in is not part of the array you’re searching through, -1 is returned

Conclusion: use this method to find a value in an array, and get its index for later use.

Use find()

This method returns the first occurrence of an element in an array if that element satisfies a condition you pass in.

For example, if you wanted to find the first adult by age in an array, you could use this method like this:

const peopleAges = [10, 12, 21, 18, 38];

const firstAdult = peopleAges.find(age => age > 18);

console.log(firstAdult);
// expected output: 21

You can see how, in my example, I passed in an arrow function that returns a comparison test for me to find the desired value in the peopleAges array. Once that value is found, it’s returned inside firstAdult.

If this wasn’t the case, and no age would have satisfied my testing condition, I would have simply got undefined returned back to me.

Conclusion: use this method if you need the first item from an array that satisfies a condition you specify.

Use filter()

This method returns a new array containing all the values you filtered from another, initial array, based on a condition you specify.

const ages = [25, 41, 37, 12, 10, 18, 14]
const canDrive = ages.filter(age => age >= 16)

console.log(canDrive) // returns [25,41,37,18]

In this example, I wanted to get all the people who were legally able to drive based on their age. So I used the filter method passing in a function returning my condition criteria.

Conclusion: use this method to search multiple values inside an array and store them in a convenient way.

Finally

JavaScript provides so many ways of writing your code, and it can be hard to find out when to use a specific language feature.

Thanks to this guide, searching through your arrays will now be just a matter of choosing between the method that is most suited to your case!

— Piero