Find out what to use, and when to use it
“What’s the best way to do this?”
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?
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.
includes() when you only want to know if a value is part of an array or not.
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.
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);
// 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
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.
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.
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!