WEBVTT 1 00:00:01.250 --> 00:00:04.100 After the very important map, filter 2 00:00:04.100 --> 00:00:05.680 and reduce methods, 3 00:00:05.680 --> 00:00:08.320 we still have some more methods to learn 4 00:00:08.320 --> 00:00:12.440 which are also super important and used all the time. 5 00:00:12.440 --> 00:00:13.440 So in this lecture, 6 00:00:13.440 --> 00:00:15.943 we're gonna talk about the Find method. 7 00:00:17.780 --> 00:00:19.520 So as the name says, 8 00:00:19.520 --> 00:00:22.850 we can use the Find method to retrieve one element 9 00:00:22.850 --> 00:00:26.580 of an array based on a condition. 10 00:00:26.580 --> 00:00:30.433 So let's again, use all movements, 11 00:00:31.600 --> 00:00:34.643 and so find and just like the other methods 12 00:00:34.643 --> 00:00:36.550 that we've been talking about, 13 00:00:36.550 --> 00:00:40.190 the Find method also accepts a condition. 14 00:00:40.190 --> 00:00:43.020 And just like the other array methods we've been talking 15 00:00:43.020 --> 00:00:47.120 about the find method also accepts a callback function 16 00:00:47.120 --> 00:00:49.840 which will then be called as the method loops 17 00:00:49.840 --> 00:00:52.290 over the array, all right? 18 00:00:52.290 --> 00:00:55.280 So Find is basically just another method 19 00:00:55.280 --> 00:00:57.290 that loops over the array 20 00:00:57.290 --> 00:00:59.760 but then it does something different. 21 00:00:59.760 --> 00:01:00.790 And in this case 22 00:01:00.790 --> 00:01:02.520 what the Find method does is 23 00:01:02.520 --> 00:01:04.803 to retrieve an element of the array. 24 00:01:05.690 --> 00:01:10.130 So as always the current element of the iteration 25 00:01:10.130 --> 00:01:14.530 is the movement and then here we specify a condition. 26 00:01:14.530 --> 00:01:18.280 So let's say movement less than zero, 27 00:01:18.280 --> 00:01:21.840 so basically this is here, a withdrawal, right? 28 00:01:21.840 --> 00:01:23.780 So a negative movement. 29 00:01:23.780 --> 00:01:26.877 So you see that just like the Filter method, 30 00:01:26.877 --> 00:01:29.900 the Find method also needs a callback function 31 00:01:29.900 --> 00:01:32.120 that returns a Boolean. 32 00:01:32.120 --> 00:01:34.180 So the result of this is of course, 33 00:01:34.180 --> 00:01:36.730 is either true or false. 34 00:01:36.730 --> 00:01:38.850 Now, unlike the Filter method, 35 00:01:38.850 --> 00:01:42.770 the Find method will actually not return a new array 36 00:01:42.770 --> 00:01:45.360 but it will only return the first element 37 00:01:45.360 --> 00:01:48.580 in the array that satisfies this condition. 38 00:01:48.580 --> 00:01:50.520 So basically in other words, 39 00:01:50.520 --> 00:01:53.600 the first element in the array for which 40 00:01:53.600 --> 00:01:56.800 this operation here becomes true. 41 00:01:56.800 --> 00:02:01.113 And so basically this here will return to first withdrawal. 42 00:02:02.250 --> 00:02:05.780 So first withdrawal 43 00:02:06.890 --> 00:02:07.983 is this. 44 00:02:08.920 --> 00:02:11.970 So lets log the movements again to the console 45 00:02:14.020 --> 00:02:17.383 and then let's also log the first withdrawal. 46 00:02:18.520 --> 00:02:22.760 And so indeed -400 here is 47 00:02:22.760 --> 00:02:24.190 the very first value 48 00:02:24.190 --> 00:02:27.703 that appears in the array that is negative, 49 00:02:28.900 --> 00:02:29.733 okay? 50 00:02:30.770 --> 00:02:33.780 So as you see, the Find method is a bit similar 51 00:02:33.780 --> 00:02:35.480 to the Filter method, 52 00:02:35.480 --> 00:02:38.480 but there are two fundamental differences. 53 00:02:38.480 --> 00:02:41.580 First Filter returns all the elements 54 00:02:41.580 --> 00:02:44.620 that match the condition while the Find method 55 00:02:44.620 --> 00:02:47.870 only returns the first one and second 56 00:02:47.870 --> 00:02:51.230 and even more important, the Filter method returns 57 00:02:51.230 --> 00:02:56.230 a new array while Find only returns the element itself 58 00:02:56.430 --> 00:02:59.140 and not an array, okay? 59 00:02:59.140 --> 00:03:01.170 So make sure that you understand 60 00:03:01.170 --> 00:03:03.430 this fundamental difference. 61 00:03:03.430 --> 00:03:07.030 Now this example here is not really exciting, 62 00:03:07.030 --> 00:03:09.610 and so let's now take it to the next level 63 00:03:09.610 --> 00:03:13.563 and start actually working with our array of objects. 64 00:03:15.060 --> 00:03:19.083 So that's this accounts, array, remember, 65 00:03:20.060 --> 00:03:23.340 so this array, which contains the four objects where each 66 00:03:23.340 --> 00:03:25.680 of them is one account. 67 00:03:25.680 --> 00:03:27.360 And as I mentioned earlier, 68 00:03:27.360 --> 00:03:31.430 this is a pretty common data structure in JavaScript, 69 00:03:31.430 --> 00:03:33.750 and so let's now work with this together 70 00:03:33.750 --> 00:03:35.370 with the Find method, 71 00:03:35.370 --> 00:03:36.820 because in this context, 72 00:03:36.820 --> 00:03:40.480 the Find method actually becomes really useful. 73 00:03:40.480 --> 00:03:43.460 So that's because using Find, 74 00:03:43.460 --> 00:03:46.200 we cannot basically find an object 75 00:03:46.200 --> 00:03:50.810 in the array based on some property of that object, 76 00:03:50.810 --> 00:03:52.450 and so that's really cool. 77 00:03:52.450 --> 00:03:53.783 So let me show it to you. 78 00:03:54.980 --> 00:03:57.650 So let's create a variable called Account 79 00:03:58.970 --> 00:04:01.360 and it's gonna be accounts. 80 00:04:01.360 --> 00:04:06.360 So all the accounts.find and then, or callback, 81 00:04:06.600 --> 00:04:09.570 and so as we loop over accounts 82 00:04:09.570 --> 00:04:13.750 each of the current elements is one account, 83 00:04:13.750 --> 00:04:15.020 okay? 84 00:04:15.020 --> 00:04:17.500 And so now let's say we want to select one 85 00:04:17.500 --> 00:04:19.920 of the accounts by the name. 86 00:04:19.920 --> 00:04:23.163 Now, this disappeared here so let's bring it back, 87 00:04:25.470 --> 00:04:26.790 okay? 88 00:04:26.790 --> 00:04:29.780 So let's say we want to get the account 89 00:04:29.780 --> 00:04:33.840 where the owner is Jessica Davis, right? 90 00:04:33.840 --> 00:04:38.840 So we can simply do account.owner=Jessica Davis. 91 00:04:46.780 --> 00:04:47.783 So let's see, 92 00:04:49.990 --> 00:04:51.830 just the account, 93 00:04:51.830 --> 00:04:55.460 and indeed we get now only this object 94 00:04:55.460 --> 00:05:00.120 and this is really, really powerful of a race and objects. 95 00:05:00.120 --> 00:05:03.300 So where one array contains multiple objects 96 00:05:03.300 --> 00:05:05.600 which all have a similar structure. 97 00:05:05.600 --> 00:05:07.710 So all of them here have an owner 98 00:05:07.710 --> 00:05:12.710 have a movement, a pin, a username, and so on and so forth. 99 00:05:13.010 --> 00:05:14.770 So using the Find method, we can 100 00:05:14.770 --> 00:05:16.687 then search this array basically 101 00:05:16.687 --> 00:05:19.330 to find an object that matches 102 00:05:19.330 --> 00:05:22.670 a certain property that we already know. 103 00:05:22.670 --> 00:05:24.880 So in this case, that property that we know 104 00:05:24.880 --> 00:05:27.000 is the name, all right? 105 00:05:27.000 --> 00:05:30.560 And so we simply compare Jessica Davis here 106 00:05:30.560 --> 00:05:32.230 with the account owner. 107 00:05:32.230 --> 00:05:34.930 And whenever this condition here is true, 108 00:05:34.930 --> 00:05:38.120 well, then that object is returned. 109 00:05:38.120 --> 00:05:41.190 So usually the goal of the Find method 110 00:05:41.190 --> 00:05:44.350 is to just find exactly one element, 111 00:05:44.350 --> 00:05:47.600 and therefore we usually set up a condition 112 00:05:47.600 --> 00:05:51.250 where only one element can satisfy that condition. 113 00:05:51.250 --> 00:05:55.930 And so that's why we used the equal operator here, okay? 114 00:05:55.930 --> 00:05:58.570 So if the owner names are unique 115 00:05:58.570 --> 00:06:00.350 then this equal operator here 116 00:06:00.350 --> 00:06:04.223 will only ever match one account with this name here. 117 00:06:05.520 --> 00:06:08.570 All right, and we will actually use this in the next couple 118 00:06:08.570 --> 00:06:12.010 of lectures to implement the login feature, 119 00:06:12.010 --> 00:06:14.310 and also some other features. 120 00:06:14.310 --> 00:06:16.716 Now, I'm gonna leave it to you here 121 00:06:16.716 --> 00:06:20.070 as a challenge to implement this functionality using 122 00:06:20.070 --> 00:06:23.020 the for off loop, just like we have been doing it 123 00:06:23.020 --> 00:06:26.570 with some of the other methods, like map and filter. 124 00:06:26.570 --> 00:06:28.300 So we have also been implementing 125 00:06:28.300 --> 00:06:32.530 these using the for off loop just to see the difference. 126 00:06:32.530 --> 00:06:34.260 But now I'm not gonna do that 127 00:06:34.260 --> 00:06:38.780 but I'm leaving it here as an idea for you to do that. 128 00:06:38.780 --> 00:06:41.360 Now anyway, let's go now to the next video 129 00:06:41.360 --> 00:06:44.723 and actually start to implement the login functionality.