6.4 Finding Elements (References Types)

In the last video, I told you that primitive type search is different from reference type search. So let's take a look at why. I'm going to start by declaring a new array called course, and in this array, we're going to have some course objects. So here's the first one with two properties, id and name, the name doesn't really matter, now we can duplicate this line, holding down the shift, alt and down arrow keys. So let's change these values, id2 and name b, and don't forget the semicolon here, so we have two course objects here. Let's see if we have a course with name a in this array. The includes method that you learned in the last video will not help us here. So let's make a course. Includes here we pass the object we're looking for. So of course with id 1, and the name a. Now let's log this to the console. Console. log the changes, we get wrong, the reason is that these two objects. This is the object that you pass to the includes method, and the object that we have in the course table, they are two different objects. They have two different references, they're in two different locations and memory. And in the last section, you learned that objects are reference types, so when we check their equality, the references are checked. In this case there are two different references, that's why we get false. So if you have an array with reference types, you have to use the find method. So I'm going to delete this line, course. Find(). Now look at the parameter to this method. What we see is way too complicated. So, whenever you want to know more about an object or a function in JavaScript, just look for this. javascript array find Here, we're going to go to the first link that comes from the developer. mozilla. org. So this is a good reference, here we can find a good description of what this method does and a very simple example of using this method. So here we have an array with some numbers. We call the find method note that as an argument to this method we have to pass a function. We call this function a predicate, and we use it to determine if the given element exists or not in an array. So this function takes a parameter, it's an element of this array. And in the body of this function, we have to return a boolean. So here we have a simple expression if this element is greater than 10, we will return true otherwise we will return false. So this is what happens when we call the find method and pass this function. This function is executed once for the first element of this array. So, in this case, 5 will be passed here. 5 is not greater than 10, so we will return false and the search will continue. Now this function will be called for the second element of this array. So 12 will be passed as an argument to this function, and since it is greater than 10, we will return true and the search will stop here. So now, what we'll get here as a result of calling the find method is the first element that matches this criteria. So if you save this find variable to the console, we'll get 12. Now, on the other hand, if there are no elements in this array that match these criteria, we will get undefined. So back to our example, let's say we want to see if we have a course with the name a in this array. So we pass a function. Here we call it a predicate or a callback function which is called a call back function because the function is called back as part of the search for an element in this array. So here we should have a parameter, we can call this element, or course, because every element in this array is a course object, so it's better to be more explicit, which makes our code more readable and understandable. So what are our criteria? We are looking for a course with name equal to a. So we just return that and store the result in a course called constant. And finally, let's save this to the console. This is the course object, save the changes, and this is the course with name a. We get the full course object that we have in this table. Now, if I change the search criteria to something like this. xyz, obviously we don't have a course with that name, so when we save the changes, we get undefined. So this is our find method, it returns the first item that matches this criteria. We have a similar method called find index, it works exactly the same way, but instead of returning the actual object, like the course object, it will return its index. Let me show you that in detail. So I want to change this to find index, in this case, we don't have a course with that name, so when I save the changes, we should see minus 1 on the console. This is here. Now, if I go back to a and save the changes, we get 0, because the index of the first element that matches this criteria is 0. That's it for this video, let's meet again for the next video where we'll see the arrow function.