Searching for Array elements with JavaScript Array methods

Joycee Catamora
Sep 24 · 4 min read
Image for post
Image for post

Why waste time writing long for loops if you can use Instance methods. This will make our code shorter and will clearly state our intention. For loops will surely do the same but it would sometimes make our code ambiguous to read and harder to maintain.

I have segregated the methods into groups to make things easier to grasp. The first group will return one element when the condition is passed while the second group will return all instances.

You can find the sample codes thru this link.

This method returns the value of the first element that matches the testing condition.

In this example, we will look for a book that has the title ‘Understanding ECMAScript 6’ and will retrieve all the details included in this object.

If the condition is met then it will return an item, otherwise undefined is returned.

Let’s check this first example below.

Image for post
Image for post

There’s another way of writing this:

Image for post
Image for post

And here’s an even shorter version of it:

Image for post
Image for post

This method is essentially the same as the find method however, this time it returns the index of where the element was found.

And when nothing is found, it will return -1. Let’s see another example below.

Here, we have an array of cities and we’re looking for the index of ‘Keiv’.

Image for post
Image for post

Now, let’s try to pass a city name that is not in the array.

Image for post
Image for post

This method checks if an array contains the element you were searching for and returns true or false. It is a very simple but powerful method.

To do this, we can simply place .includes after calling the array, as such:

Image for post
Image for post

includes method also takes an index as the second parameter. It will then check for a value in the array starting from the provided index and returns a result. If the second parameter is greater than the index of where the item is located, it will return false.

Image for post
Image for post

This method takes the array and returns a new array that only contains the elements that match the condition.

Let’s see the example below to understand this further.

In this example, we want to get all flowers under the ‘Shrubs’ category.

Image for post
Image for post

Another way is to define a callback function before using it.

Image for post
Image for post

find: will go through elements within the array, then returns the first value that makes it return true.

filter: will filter the element through the function, return all the values that satisfy the condition.

findIndex: will look for the item and return its index starting from where you want it to search.

includes: returns true if the array has the item you’re looking for, otherwise false.

Image for post
Image for post
Which method will you use to return the index of the yellow door above?

There could be multiple ways of searching among elements in JavaScript array, but we always have to consider the code’s readability, maintainability, and the performance of each method. These array instances are powerful little methods that we could use to fix our problems.

Do you find this blog helpful? Don’t forget to leave some feedback in the comment section.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store