4 methods commonly used to search in JavaScript

Tram Ho

In Javascript there are many ways to search for elements in Array. The simplest way is to use a loop. But with ES6 + there are many methods to iterate in Arrray and search within words more easily.

Here are the Array methods that can be used:

  • Array.includes
  • Array.find
  • Array.indexOf
  • Array.filter


The .includes() method returns a boolean value that is a perfect way to check if an element exists in an array, or if it returns true or false . The syntax is as follows

Now as you can see in the example above, we only have one parameter – valueToFind. This is the value to match in the array. The option from Index is a number, indicating which index you want to start searching (the default is 0, so the whole array is searched). So, because in the example above, the thick-scaled item had the index 0, the following would be false : alligator.includes ('thick scales', 1); since it started searching from index 1 onwards.

Now, there are a few important things to note. This methdod .includes () uses very strict comparisons. That means, from the example above, the following would return false : alligator.includes ('80 '); That’s because even though 80 == ’80’ is true, 80 === ’80’ is false – different types have won pass rigorous comparisons.


How is the .find () method different from .include ()? If in the example above, we just changed the text, including the text, where an error can be found, we will get this error:

Because the find method requires a function be passed. Because the find method is not using a simple comparison operator like includes() . Instead, it will pass each element to your function and check and return either true or fasle . So even though this works: alligator.find (() => 'thick scales'); , you might want to include your own comparison operator in the function so that it returns anything relevant.

This simple function in the find method we examine each element of the array, with alias of el , we assigned it and stopped when it found the first element to be true. In case true has a property of length less than 12 ( numbers have no property of length). Of course you can make this function complicated as needed, making your real conditions meet your needs.

Also notice, this is back to true. The find does not return return a boolean method, but instead returns the first matching element. If there is a matching element – like nothing exists that meets the criteria specified in your function – it returns undefined. Also note that it returns first, so if there is more than one element in the array that meets the criteria, it will only take the first example. In our example, if there is another string less than 12 after 4 feet tall, it will change our results.

In the above example, we only use the callback with a parameter. You can also add parameters to reference the current element index . Another parameter might be an array , but I find this is rarely used. Here is an example using index :

There are 3 different elements that meet the first condition (typeof el === 'string') . If this is the only condition, it will return the first 'thick scales' . But the difference is, only one person has an index of 2 and that is 4 foot tall

Speaking of indexs , a similar array method is .findIndex (). This method also gets a function, but as you can guess, it returns the appropriate element index instead of the element itself.


Like the .includes() , indexOf () uses strict, not the function we saw with the .find() . But, unlike incluldes() , it returns the index of the element, instead of boolean . You can also specify which index in the array to start searching.

I find indexOf() very useful. It’s quick and easy, can tell you which element is in the array and can tell you whether the element exists or not. How does it tell you if the element exists? Basically, we can know the element exists if it returns a positive number and if it returns -1 then we know that element does not exist.

And as you can see, although we can take the find() or findIndex() to give us the same information, this is a lot less to write. We do not have to write a function to compare, because it is already in the indexOf method.

Now, like the others, indexOf () also returns the index of the first matching element it finds. JavaScript provides us with an alternative method .lastIndexOf() . As you might have guessed, this does the same thing as indexOf() but starts from the last index of the array and works in reverse. You can also specify a second parameter, but remember the index does not change, just because you are using another method.

Bonus: filter

The filter() method is similar to the find() , in that it requires a function be passed and a condition for what will be returned. The main difference is that filter() always returns an array , even if there is only one matching element. But it will return all matching elements, while find() only returns the first result.

Share the news now

Source : Viblo