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.