Check if a Value is in an Array with indexOf
indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a whitelist array.
[00:02] Indexof is used to search an array for a particular value. If we wanted to know if Kitty existed in this family, we could console log family.indexof kitty. Doing so would yield the value 3, meaning the search was successful and this value exists at index 3 in this array. If the search was unsuccessful, we see -1. -1 is always returned from indexof when the search fails.
[00:43] If you need to perform an action based on whether or not an item already exists in an array, you can check the value of indexof. If it's above -1, you know the element exists. You could save the check to available. We'll say kittyexists is equal to the indexof check greater than -1. This expression will return either true or false based on whether or not Kitty already exists. Now we can log Kitty exists and we see false. If we add it back in, we get true.
[01:27] Now we have this flag. You can do things like if not kittyexists, family.push Kitty. Log the family again, and you see we only have one instance of Kitty, as she was already in the array. But if we remove her, we'll see she's still there.
[01:53] Indexof in this case returned -1, as this was not found in the array. Which in turn sets this to false, which means that this block of code ran and added Kitty back to the array.
[02:08] Indexof has a second parameter, which is the start position of the search. If we add Kitty back in here, and run this as before, we get three. But should she be in another position in the array? Let's say second. We provide a start position for the search being 2. Now we get -1. This is because specifying 2 here starts the search at index 2, which is 012, so only those two items are searched.
[02:52] If we were to change this to 1, the search will now begin here, but note the value we receive here, 1. It doesn't matter where you start the search in the array. If an item is found, you will be given the index relative to the whole array.
[03:15] You can also search for object references under the values. If instead of using simple strings we have, say, three objects like this, we could create a family variable that is an array containing Shane and Sally. Just like before, we can search this family to see if kittyexists in it.
[03:43] This time, instead of searching for the string, we're searching for an object. You can see we get -1. If we add her to the family, we get 2, which means Kitty was found index 2 of the family array.
[04:01] To finish off, we'll look at how to use indexof to create a filter. We'll filter this events array based on whether or not the extension of any of these files matches anything in the whitelist. We have CSS and JS here. We want the result to be an array that contains these two and not this one.
[04:31] If we set up a new variable called filtered and then calls events.filter, we can us the path module to get the file extension. Then to check if this item is part of the whitelist and therefore should be allowed in the filtered results, we simply return whitelist indexof extension greater than -1.
[04:56] Remember, indexof returns -1 if it doesn't exist, and anything from 0and upwards if it does. This filter method now will only allow through items that have extensions that match the whitelist. If we log this out, we can see that's the case.