The first task that we want to look at is sounding like this, you need to write a code to get an array
of names from given array of users.
And as you can see here, we have an array of users.
And actually, it is just an array of objects with the dean name and this active property.
And actually, this is a relatively easy task, but it is really nice to start the interview.
And experienced interviewers will know that you are on stress, which actually means you must receive
several easy exercises just so you are relaxing a little bit and you can be more focused and more productive.
And actually, even in this exercise can tell you were quite a lot about code style you are using.
How do you name your variables and how you writing your code so he can understand on what level you
are and what questions he needs to ask you?
So now I highly recommend you to post this video and try to implement it by yourself.
If you just want to follow along, then let's code this.
And actually, there are several ways to implement it.
Normally, beginners will start with follow up because it is the easiest approach what they know, for
example, here after our users, sorry, we can write a for loop.
So we have here for full length index from zero to users length.
So here we have a smaller than users sleeve and here we have A-plus plus now insider for Loop one to
access every single name and push it in some glory.
This is why before we want to create an array, let's name it names and it will be an amateur right
now.
Inside of a for loop, we can write names -.but and here in sidebar accessing our users with I.
So this is our current user daughter's name.
In this case, we're pushing on name of this user in this rape, and after our follow up, we can just
console.log our new names and check it and browse it.
I am delighted in the page and as you can see, our result is Chegg, John Meg.
This is exactly what we need to implement.
And yes, we solved our task.
And if you are a beginner, this solution is totally fine.
But you can do better because every single time when you write a better code, an interview, you show
that you are a better developer.
This is why let's come and told this code and try again.
So what we can use here instead of follow up is for each function, for our rate.
This is where here we can simply write users dot for each, and inside we must provide a callback function.
What is, more importantly, where get an access here to every single use it.
And now inside of a can do whatever we want.
And as you can see here, we don't have any indexes and our code is looking much better.
So what we want to do here is exactly the same stuff like we did previously.
We created here in the real names and now inside our for each loop we want to push inside our names.
Our user name.
And as you can see in comparison to our old code, this code is much easier to read.
Let some common here our console.log and check if it's working.
As you can see, we're getting exactly the same results.
So this is your level tool off in code.
But actually, the best way to solve this task is to use additional map function.
And actually, it will make your code the simplest just because you're using the right tool for the
right task in this case.
Here we can write that we want to get back our names right.
And here we want to look through our users with a map function.
And if you don't know what map is doing well, looping through every single element inside our array
and we return some your data for every single element in our case, instead of our object, we want
to return a single name.
This is where here we can write that we have user and we want to return his user name.
Let's check if it's working.
As you can see in browser, we're getting exactly the same output, but this is the best version for
this task, and it shows that you know what you are doing.
Four solution is almost always low level, which means you exactly need to implement what you are doing
in this case.
Here, we need to say that we are pushing elements to our new array names.
And also what you can see here were created name three before using for Loop, which actually means
our logic and our additional variable don't have anything together.
In our case, here were written result directly to our new variable names.
So you successfully sold this task and now you are getting the next one.
We need to get back on the active users, which means our first point here is valid.
But this must be an active users
and actually we could use any method that we want here to solve this.
For example, we could use here for loop and simpler write inside an if condition, and we can check
here if our user is active and if this property is true, then inside we want to push our element to
our new frame.
And as you can see in browser, we're getting here only to users because our last use, it is inactive.
This is totally fine, but we have here two problems.
First of all, our code is low level.
And secondly, we're mixing here logic together with filters and elements and mapping them.
And this is bad because when your code is more complex, then it is more difficult to split it.
And actually the solution with four each will be exactly the same.
But let's look in the solution of this map.
Actually, what we want to do here, we want, first of all, to filter our array and get on the active
users.
And after that, we want to play our map so we can right here dot, filter and behave exactly the same
logic we have here.
Access to our user and we must return here a predicate with true or false.
In our case, it will be user.
Dot is active.
So if our user is active, then we will leave it inside our array.
In either case, we will throw it away.
And after this work, Colin, our map to map names.
What is important in this code here were not mixing, mapping and filtering together, which means it
is easier to support such code.
Now we have another task you are getting sort you.
Says by age descendant and of course, through first rules also applies.
Which means we, first of all, must sort out, right?
And then we need to filter our array and map our names.
And as you can see here now, additionally, we're getting age property.
This is our property by which we will sort out rate.
And actually, in JavaScript, if you want to source something, you must use only a single JavaScript
function and it is the.
You can't really do it differently.
If you don't know how resort function is working, you can jump to developers Mozilla org to this URL,
and here is a real prototype sort.
The main idea is that we're calling search function on our way.
And inside we pass a function comparator with A and B, and in our case, it will be first user and
second user and then second user and third user, which means it is comparing elements one by one,
and he never must return something.
As you can see inside, we can return minus one if a is less than be, then recorded.
Now we must return of one if A is greater than B and were written in zero if they're equal.
And this is exactly what we must do here.
So in all the three cases, we must write the same code.
But in the first two variants, it will be kind of -- because actually we must do the sorting before
our code here.
So let's then comment our code here and we want to play certain.
And here we want to write users thoughts.
And we're getting here, our competitor.
So we have here user one and user two, and we want to compare them by age.
This is why we can write here user one age is less than the user to that age.
And if it is true, then here we want a ternary operator will want a written minus one in the other
case, will want to return one.
Let's save this and check if it's working.
I'm jumping to browser to load the page and we're getting John and Jack.
Let's check this out on the top.
John is 18 and Jack is 20, which means we sorted our data correctly.
But in the end, in order, as you can see here, we must sorted in descending order, which means we
want to swap here not minus one, but one.
And here will be minus one.
Let's check the software get and first of all, Jack and then John, and this is correct.
Certain.
Also, you must remember that search operation in JavaScript mutates and rate.
This is where he'll would the cold sort, and we didn't assign our result to some property because it
just mutates our users array.
And then we are doing other stuff with it.
But as you can see here, this code is really separated from our full loop because we must do it before
our operations inside.
Now let's come this code and try to use it with our map and filter.
And here it is much easier to do because we simply want here after our users to call Dot Sight.
And after this to call, filter and map, as you can see here, I commented, It is looking really pretty.
We have here.
Our users were doing our sorting.
After this, we do our filtering and then mapping.
And first of all, this code is much easier to read.
You have here chaining and you are getting your result in this one single property.
Also, it is important that we're not mixing in different operations.
First of all, doing insert, then filter and then map.
And if we need to adjust one of them, we don't need to change the logic of another one.
Let's check if it's working and reloading the page, and we're getting exactly the same result.
So as you can see, you can solve even the simple task in different ways.
If you want to show an interview that you're an advanced developer, you must use a specific tool for
your specific task.
This is where the chain of thought mapping and filter here is much better than using for loop.