Array Functions You Need to Know (pt. 1)
In this article, I would like to describe some old and new Javascript functions that manipulate arrays. I will try to give an appropriate example for every one of them and maybe something more. So buckle up.
Disclaimer
I have been using Medium for a long time as a content consumer. Learning a lot here. Now I believe that is time to give something back to community. I am no copywriter, I have never written any article before, but I think that ability to write technical articles might come handy in the future. Therefore I decided to give it a try and write some. For a start I choose quite easy and well known topic, but some developers might not know about as I found out when doing code review at the company I am currently working at. Any comments and constructive criticism are welcomed.
.filter()
If you ever wondered how to pick items from an array, that matches certain conditions, this function is what you should be using. .filter() takes two arguments, but we will focus only on the first one.
It accepts callback function witch gets evaluated for every single item of the array and should return true/false depending on our condition.
It provides us with 3 values, first is the current value of an item, the second one is the index of that item. The last argument is reference to the array itself.
Take a look at the example, how to use this function.
As you can see value of filtered is new array, containing only number lower than 10. This is small silly example, but you are free to create any condition you like and it could became a powerful friend.
But what if you need only one element that matches the condition?
.find()
Function .find() is similar to .filter() with one exception. Instead of returning new array containing all items matching condition, it return only the first one it could find.
Let’s take a look at the example.
Here you could see, that we have an array of users, and we would like to get James. We do not know what is his index, so we have to use .find() to find him.
But what if we would like to get his index for whatever reason?
.indexOf()
This method is very useful, when you want to find an items index by its value and not by certain condition. It is important to know, that in case it does not find a value, it will return -1 instead false as expected. Let’s take a look at the example.
In the example, we are trying to find index of the item ‘b’. As we can see, it will output the first match.
The next example shows us, how not to use indexOf() and what are its limitations.
Output of the snippet is -1, as it could not find the item. But why is so, when James with an id 2 is definitely in the array? In case of object or arrays, this method compares a reference. And those two object were created separately with different reference, therefore no match.
Code below shows that it will find a match if the reference is the same. But please, do not use it in your code, as this is just an example and explanation why it is not working.
.findIndex()
Similar to .find(), this method behaves almost the same, but instead of returning the value matching the condition, it returns its index. So for many occasions it can replace indexOf method, or even it provide much more power.
.includes()
Before ES2016, if you wild like to find something in array you would probably use indexOf and checks if its output is greater that -1.
Fortunately ES2016 introduced method includes that returns boolean if the value is included in array. This simplifies writing a conditions as we do not have to check agains -1.
It is important to say, that this method does inherit same limitation with references as indexOf does. So use it with caution.
Conclusion
In this short article, I went through 5 Javascript array methods that were created in order to find some values in array. These might help you to make your code little more readable and hopefully also to avoid some bugs. Although it is important to say that these functions, especially one with a callbacks might be little less performant as its for loop equivalents.
