Learn some helpful array methods that enable you to search through elements in an array: indexOf, includes(), find(), and filter().
When programming, you’ll regularly use arrays to store data. There are a handful of helpful array methods you can use to access and work with the data within them. (Learn about the basics of the arrays here and looping through arrays here). In this tutorial, we’ll go over a few methods you can use to search for elements within an array.
The includes()
method is helpful if you want to know if an element is in an array. This method returns a true
or false
value based on if a specific element is in the array or not. Here’s the basic structure of the includes()
method.
The element to find is a required parameter and is the element you are looking for. The starting index parameter is optional and specifies which index to start looking for the element. The default of the includes()
method is to start searching at index 0, meaning it searches the entire array.
Let’s look at an example. Let’s say you’re a birdwatcher and you have an array that stores all of the different birds you have spotted.
One day, you excitingly spot a cedar waxwing and want to know if you’ve seen this bird before. You could use the includes()
method to check if it’s in your array:
It’s important to note that the includes()
method checks for the exact value of the element. This means that birds.includes("Cedar Waxwing");
would return false
because the element in the array uses all lower case letters.
The indexOf()
method is helpful if you want to know the index of a specific element. This method returns the index of the specified index or a -1
if the element is not in the array. An important note is that if an element appears more than once in the array, the indexOf()
method returns the index of the first occurrence. You can also use the lastIndexOf()
method, which searches from the end of the array to the beginning, to find the last occurrence of the element.
Continuing with our bird example, let’s say you want to know when you saw the red-winged blackbird in your birding journey. You can use this method to determine its index:
Similar to includes()
, the element must be an exact match, and there is an optional second parameter for the starting search index.
Check out the coe editor below to see these examples in action!
The find()
method is different than the includes()
and indexOf()
methods in that it returns a value based on a condition specified by a callback function. Similar to the indexOf()
method, find()
returns the first element in an array that satisfies the condition of the function. If no element meets the function condition, it returns undefined
. The basic structure looks like this:
Let’s say we wanted to find a bird whose name starts with “carolina.” We could use this find()
method:
Note that this code will print carolina wren
and will leave out carolina chickadee
. This is because find()
only returns the first value that meets the condition of the testing function.
What if we wanted to find all of the birds that start with “carolina”? We could use the filter()
method! The filter()
method is just like the find()
method except that it returns all of the elements that meet the function requirements in the form of an array. If no elements meet the condition, it returns an empty array.
This code returns an array with each element that starts with the string "carolina"
.
Explore these examples in the code editor below.
birds
array and see how that impacts the ouput. Use the following array to complete the tasks below:
primes
array).37
.