1 00:00:00,330 --> 00:00:06,240 The first task that we want to look at is sounding like this, you need to write a code to get an array 2 00:00:06,240 --> 00:00:08,460 of names from given array of users. 3 00:00:08,610 --> 00:00:10,890 And as you can see here, we have an array of users. 4 00:00:11,070 --> 00:00:16,170 And actually, it is just an array of objects with the dean name and this active property. 5 00:00:16,470 --> 00:00:21,990 And actually, this is a relatively easy task, but it is really nice to start the interview. 6 00:00:22,230 --> 00:00:27,780 And experienced interviewers will know that you are on stress, which actually means you must receive 7 00:00:27,780 --> 00:00:34,140 several easy exercises just so you are relaxing a little bit and you can be more focused and more productive. 8 00:00:34,410 --> 00:00:40,200 And actually, even in this exercise can tell you were quite a lot about code style you are using. 9 00:00:40,350 --> 00:00:46,260 How do you name your variables and how you writing your code so he can understand on what level you 10 00:00:46,260 --> 00:00:48,750 are and what questions he needs to ask you? 11 00:00:49,140 --> 00:00:54,240 So now I highly recommend you to post this video and try to implement it by yourself. 12 00:00:54,570 --> 00:00:57,660 If you just want to follow along, then let's code this. 13 00:01:00,880 --> 00:01:03,370 And actually, there are several ways to implement it. 14 00:01:03,610 --> 00:01:09,160 Normally, beginners will start with follow up because it is the easiest approach what they know, for 15 00:01:09,160 --> 00:01:13,210 example, here after our users, sorry, we can write a for loop. 16 00:01:13,210 --> 00:01:17,830 So we have here for full length index from zero to users length. 17 00:01:17,890 --> 00:01:25,120 So here we have a smaller than users sleeve and here we have A-plus plus now insider for Loop one to 18 00:01:25,120 --> 00:01:28,690 access every single name and push it in some glory. 19 00:01:28,930 --> 00:01:34,870 This is why before we want to create an array, let's name it names and it will be an amateur right 20 00:01:35,110 --> 00:01:35,380 now. 21 00:01:35,380 --> 00:01:41,890 Inside of a for loop, we can write names -.but and here in sidebar accessing our users with I. 22 00:01:41,980 --> 00:01:44,560 So this is our current user daughter's name. 23 00:01:44,920 --> 00:01:50,770 In this case, we're pushing on name of this user in this rape, and after our follow up, we can just 24 00:01:50,780 --> 00:01:54,040 console.log our new names and check it and browse it. 25 00:01:54,250 --> 00:01:58,510 I am delighted in the page and as you can see, our result is Chegg, John Meg. 26 00:01:58,510 --> 00:02:00,790 This is exactly what we need to implement. 27 00:02:01,120 --> 00:02:03,070 And yes, we solved our task. 28 00:02:03,070 --> 00:02:05,980 And if you are a beginner, this solution is totally fine. 29 00:02:06,250 --> 00:02:12,100 But you can do better because every single time when you write a better code, an interview, you show 30 00:02:12,100 --> 00:02:13,540 that you are a better developer. 31 00:02:13,990 --> 00:02:16,870 This is why let's come and told this code and try again. 32 00:02:17,080 --> 00:02:21,940 So what we can use here instead of follow up is for each function, for our rate. 33 00:02:22,240 --> 00:02:28,180 This is where here we can simply write users dot for each, and inside we must provide a callback function. 34 00:02:28,450 --> 00:02:32,110 What is, more importantly, where get an access here to every single use it. 35 00:02:32,380 --> 00:02:34,690 And now inside of a can do whatever we want. 36 00:02:34,930 --> 00:02:39,550 And as you can see here, we don't have any indexes and our code is looking much better. 37 00:02:39,850 --> 00:02:43,780 So what we want to do here is exactly the same stuff like we did previously. 38 00:02:44,020 --> 00:02:50,050 We created here in the real names and now inside our for each loop we want to push inside our names. 39 00:02:50,290 --> 00:02:51,910 Our user name. 40 00:02:52,210 --> 00:02:57,130 And as you can see in comparison to our old code, this code is much easier to read. 41 00:02:57,400 --> 00:03:00,490 Let some common here our console.log and check if it's working. 42 00:03:00,730 --> 00:03:03,160 As you can see, we're getting exactly the same results. 43 00:03:03,170 --> 00:03:05,980 So this is your level tool off in code. 44 00:03:06,400 --> 00:03:11,170 But actually, the best way to solve this task is to use additional map function. 45 00:03:11,440 --> 00:03:16,240 And actually, it will make your code the simplest just because you're using the right tool for the 46 00:03:16,240 --> 00:03:17,720 right task in this case. 47 00:03:17,740 --> 00:03:20,770 Here we can write that we want to get back our names right. 48 00:03:20,950 --> 00:03:24,520 And here we want to look through our users with a map function. 49 00:03:24,730 --> 00:03:30,070 And if you don't know what map is doing well, looping through every single element inside our array 50 00:03:30,250 --> 00:03:35,980 and we return some your data for every single element in our case, instead of our object, we want 51 00:03:35,980 --> 00:03:37,480 to return a single name. 52 00:03:37,750 --> 00:03:42,700 This is where here we can write that we have user and we want to return his user name. 53 00:03:42,850 --> 00:03:44,110 Let's check if it's working. 54 00:03:44,350 --> 00:03:49,720 As you can see in browser, we're getting exactly the same output, but this is the best version for 55 00:03:49,720 --> 00:03:52,540 this task, and it shows that you know what you are doing. 56 00:03:52,800 --> 00:03:58,630 Four solution is almost always low level, which means you exactly need to implement what you are doing 57 00:03:58,780 --> 00:03:59,380 in this case. 58 00:03:59,380 --> 00:04:03,760 Here, we need to say that we are pushing elements to our new array names. 59 00:04:04,090 --> 00:04:09,970 And also what you can see here were created name three before using for Loop, which actually means 60 00:04:09,970 --> 00:04:14,020 our logic and our additional variable don't have anything together. 61 00:04:14,230 --> 00:04:18,410 In our case, here were written result directly to our new variable names. 62 00:04:18,760 --> 00:04:22,540 So you successfully sold this task and now you are getting the next one. 63 00:04:22,780 --> 00:04:27,550 We need to get back on the active users, which means our first point here is valid. 64 00:04:27,760 --> 00:04:30,100 But this must be an active users 65 00:04:33,280 --> 00:04:37,160 and actually we could use any method that we want here to solve this. 66 00:04:37,180 --> 00:04:42,640 For example, we could use here for loop and simpler write inside an if condition, and we can check 67 00:04:42,640 --> 00:04:49,480 here if our user is active and if this property is true, then inside we want to push our element to 68 00:04:49,480 --> 00:04:50,410 our new frame. 69 00:04:50,650 --> 00:04:55,930 And as you can see in browser, we're getting here only to users because our last use, it is inactive. 70 00:04:56,170 --> 00:04:58,690 This is totally fine, but we have here two problems. 71 00:04:58,900 --> 00:05:01,000 First of all, our code is low level. 72 00:05:01,120 --> 00:05:06,610 And secondly, we're mixing here logic together with filters and elements and mapping them. 73 00:05:06,820 --> 00:05:11,890 And this is bad because when your code is more complex, then it is more difficult to split it. 74 00:05:12,100 --> 00:05:15,550 And actually the solution with four each will be exactly the same. 75 00:05:15,760 --> 00:05:17,740 But let's look in the solution of this map. 76 00:05:17,980 --> 00:05:23,650 Actually, what we want to do here, we want, first of all, to filter our array and get on the active 77 00:05:23,650 --> 00:05:24,100 users. 78 00:05:24,190 --> 00:05:30,820 And after that, we want to play our map so we can right here dot, filter and behave exactly the same 79 00:05:30,820 --> 00:05:31,810 logic we have here. 80 00:05:31,810 --> 00:05:36,370 Access to our user and we must return here a predicate with true or false. 81 00:05:36,610 --> 00:05:38,250 In our case, it will be user. 82 00:05:38,260 --> 00:05:39,250 Dot is active. 83 00:05:39,370 --> 00:05:43,120 So if our user is active, then we will leave it inside our array. 84 00:05:43,270 --> 00:05:45,220 In either case, we will throw it away. 85 00:05:45,490 --> 00:05:48,380 And after this work, Colin, our map to map names. 86 00:05:48,400 --> 00:05:54,070 What is important in this code here were not mixing, mapping and filtering together, which means it 87 00:05:54,070 --> 00:05:55,750 is easier to support such code. 88 00:05:56,200 --> 00:05:59,190 Now we have another task you are getting sort you. 89 00:05:59,290 --> 00:06:03,670 Says by age descendant and of course, through first rules also applies. 90 00:06:07,060 --> 00:06:09,580 Which means we, first of all, must sort out, right? 91 00:06:09,670 --> 00:06:12,790 And then we need to filter our array and map our names. 92 00:06:13,090 --> 00:06:16,750 And as you can see here now, additionally, we're getting age property. 93 00:06:16,960 --> 00:06:20,080 This is our property by which we will sort out rate. 94 00:06:20,410 --> 00:06:25,600 And actually, in JavaScript, if you want to source something, you must use only a single JavaScript 95 00:06:25,600 --> 00:06:26,980 function and it is the. 96 00:06:27,520 --> 00:06:29,500 You can't really do it differently. 97 00:06:29,740 --> 00:06:35,770 If you don't know how resort function is working, you can jump to developers Mozilla org to this URL, 98 00:06:35,950 --> 00:06:38,140 and here is a real prototype sort. 99 00:06:38,500 --> 00:06:41,970 The main idea is that we're calling search function on our way. 100 00:06:42,160 --> 00:06:48,400 And inside we pass a function comparator with A and B, and in our case, it will be first user and 101 00:06:48,400 --> 00:06:53,980 second user and then second user and third user, which means it is comparing elements one by one, 102 00:06:54,190 --> 00:06:56,260 and he never must return something. 103 00:06:56,500 --> 00:07:02,570 As you can see inside, we can return minus one if a is less than be, then recorded. 104 00:07:02,710 --> 00:07:08,350 Now we must return of one if A is greater than B and were written in zero if they're equal. 105 00:07:08,530 --> 00:07:10,690 And this is exactly what we must do here. 106 00:07:10,870 --> 00:07:13,990 So in all the three cases, we must write the same code. 107 00:07:14,200 --> 00:07:20,080 But in the first two variants, it will be kind of -- because actually we must do the sorting before 108 00:07:20,080 --> 00:07:20,980 our code here. 109 00:07:21,100 --> 00:07:24,700 So let's then comment our code here and we want to play certain. 110 00:07:24,940 --> 00:07:27,080 And here we want to write users thoughts. 111 00:07:27,640 --> 00:07:29,710 And we're getting here, our competitor. 112 00:07:29,890 --> 00:07:34,480 So we have here user one and user two, and we want to compare them by age. 113 00:07:34,720 --> 00:07:40,120 This is why we can write here user one age is less than the user to that age. 114 00:07:40,420 --> 00:07:45,580 And if it is true, then here we want a ternary operator will want a written minus one in the other 115 00:07:45,580 --> 00:07:47,080 case, will want to return one. 116 00:07:47,530 --> 00:07:49,360 Let's save this and check if it's working. 117 00:07:49,400 --> 00:07:53,510 I'm jumping to browser to load the page and we're getting John and Jack. 118 00:07:53,530 --> 00:07:54,910 Let's check this out on the top. 119 00:07:55,090 --> 00:07:59,980 John is 18 and Jack is 20, which means we sorted our data correctly. 120 00:08:00,100 --> 00:08:05,950 But in the end, in order, as you can see here, we must sorted in descending order, which means we 121 00:08:05,950 --> 00:08:08,920 want to swap here not minus one, but one. 122 00:08:09,040 --> 00:08:10,690 And here will be minus one. 123 00:08:10,900 --> 00:08:15,400 Let's check the software get and first of all, Jack and then John, and this is correct. 124 00:08:15,400 --> 00:08:16,000 Certain. 125 00:08:16,180 --> 00:08:20,740 Also, you must remember that search operation in JavaScript mutates and rate. 126 00:08:20,980 --> 00:08:27,100 This is where he'll would the cold sort, and we didn't assign our result to some property because it 127 00:08:27,100 --> 00:08:29,170 just mutates our users array. 128 00:08:29,290 --> 00:08:31,330 And then we are doing other stuff with it. 129 00:08:31,420 --> 00:08:37,270 But as you can see here, this code is really separated from our full loop because we must do it before 130 00:08:37,270 --> 00:08:38,770 our operations inside. 131 00:08:38,980 --> 00:08:43,000 Now let's come this code and try to use it with our map and filter. 132 00:08:43,180 --> 00:08:49,660 And here it is much easier to do because we simply want here after our users to call Dot Sight. 133 00:08:49,750 --> 00:08:56,200 And after this to call, filter and map, as you can see here, I commented, It is looking really pretty. 134 00:08:56,350 --> 00:08:56,920 We have here. 135 00:08:56,950 --> 00:08:59,080 Our users were doing our sorting. 136 00:08:59,140 --> 00:09:01,810 After this, we do our filtering and then mapping. 137 00:09:01,900 --> 00:09:04,630 And first of all, this code is much easier to read. 138 00:09:04,780 --> 00:09:09,580 You have here chaining and you are getting your result in this one single property. 139 00:09:09,640 --> 00:09:13,060 Also, it is important that we're not mixing in different operations. 140 00:09:13,270 --> 00:09:15,700 First of all, doing insert, then filter and then map. 141 00:09:15,880 --> 00:09:20,590 And if we need to adjust one of them, we don't need to change the logic of another one. 142 00:09:20,800 --> 00:09:25,150 Let's check if it's working and reloading the page, and we're getting exactly the same result. 143 00:09:25,270 --> 00:09:29,350 So as you can see, you can solve even the simple task in different ways. 144 00:09:29,500 --> 00:09:35,080 If you want to show an interview that you're an advanced developer, you must use a specific tool for 145 00:09:35,080 --> 00:09:36,310 your specific task. 146 00:09:36,520 --> 00:09:41,380 This is where the chain of thought mapping and filter here is much better than using for loop.