find, findIndex, & includes

[00:00:02]
>> Kyle Simpson: Ok, the next features that we want to take a look at are Array .find and Array .includes. Array .find was actually added in ES6, and Array .includes was added in ES 2016. In fact, Array .includes was basically the only feature, almost the only feature in ES2016. So let's take a look at Array .find.

[00:00:26]
If you have an array that holds values, and maybe it is difficult to look for those values by their identity. Maybe they're objects, or maybe you need to, because, and so if it's an object, you need to do some kind of custom stepping into the object to figure out if it matches.

[00:00:45]
So here I have objects with a properties in them and I wanna match the objects, or match an object where the a property is greater than 1. The .find method, as we see here on line 3, takes in a function callback, and it will provide you that value, so in that case, the object.

[00:01:05]
And if you return true, or something truthy, then it will return the actual value that was found, not the return value. So it's a little bit like the array filter method. You're returning a true or a false, or a truthy or a falsy to say, this is that thing that I want you to return.

[00:01:25]
So we get back the A2, rather than like a true value or something like that. So it's a way to provide a callback that allows you to do that searching in a more custom way than, say, the index of method, which we'll remember. You know, it just does an identity looking for a value, couldn't ask it to match a property like we're doing here.

[00:01:48]
Little nuanced note here is that if you find no value whatsoever, you get back undefined, but that is indistinguishable from the case where you found the undefined value in the array. So you can't actually tell with the find method whether they didn't find anything, or whether they found the undefined value.

[00:02:13]
Those are gonna have the exact same result. And that's a little perplexing. So if you really needed to distinguish that particular case, then you could use findIndex. findIndex is kind of like the indexOf function, but with a callback, where it doesn't return you the object, it returns you the numeric index of where it found it, where it made its first match.

[00:02:36]
And in this case, it uses -1 to indicate, I didn't find it at all. I'm still not in love with the idea of using -1s, and the fact that we're adding new APIs and still using -1s is a little troublesome. But that is the convention, or at least the pattern that we've done so far, so you can see why they stuck with indexOf.

[00:02:59]
So speaking of indexOf, some of you may remember using this indexOf for the last many, many years. And you may have done things like line 3, where you've said, compared to a -1. And that -1 doesn't really mean anything, it's just a sentinel value that comes to us, historically, from C programming.

[00:03:20]
And some of you may have even seen that you could use the tilde operator in a bizarre way of turning a -1 into a truthy or falsy sort of a value. Both of these are terrible options, and they were the best that we had for a long time.

[00:03:37]
So thankfully, as of ES2016, we now have an actual method that is going to do, so this is kinda like the Array Find, it's going to go, tell us true-false that the thing exists. It's not giving us the value itself, that's what we use find for. But if we want to test for whether it exists or not, rather than using find, index, or using indexOf, the best thing to use is the includes method.

[00:04:05]
Not only does the includes method give us a true or false, which is really what we always wanted from indexOf. You hardly ever care about the actual index, you just want to know if it's there or not. So, it gives us, in terms of semantic, it gives us a better match for what we want.

[00:04:21]
But it also uses the same value algorithm from the spec, which means that even something like a NaN, it will tell you, yes, I found the NaN. It doesn't do the lying that you know, say something, like triple equals checking will do. An indexOf is susceptible to this.

[00:04:38]
The indexOf does not use that same algorithm, because of historical reasons. So includes is actually not only more ergonomic or semantic, but it also behaves the way we want, which is to tell us for sure, is the value there or not?