We've now finished up our processing pipeline.
But before we move on I want to do a little bit of a reflektor to the code inside of you're just to
condense things a little bit and just clean up our code a little.
So we're going to divide this refactor into two different stages.
The first stage is going to be a very small little change that's going to just slightly clean up our
map statement and then the second stage will be a much more significant factor that condenses down all
these different loadout helpers that we're making use of.
So let's get to it.
We're going to start off with the first stage of the reactor.
So Stage 1 I'm going to identify the fact that we create this new path helper and then we really use
it as P-doc test.
But there's no reason that I need to make a new instance of this path halber every iteration through
the map help through the map statement.
So I'm going to take the Konst be equals new path line and I'm going to move it outside of the map statement
like so.
So now I don't have to create a new path helper for every iteration through the loop.
Now when I do that refactor I can then kind of very quickly identify the fact that we have this pathname
variable being created right here and then we are immediately passing it into peacoat test.
So I don't think we need the extra pathname variable at all.
So we're going to take New York while you are l.com pathname.
I'm going to highlight all this stuff.
I'm going to cut it and I'll paste it into Picart test like so now I can clean up the pathname variable
that we were declaring before and leave it just like so.
OK.
So that's that's Stage 1 right there.
Nice and easy start.
We've just condense things inside the map statement to make it just a little bit more concise.
Now comes for the more challenging part.
Stage 2 at this stage to refactor is going to be a little bit more complex.
Now before we do three factor I want to point one thing out to you.
Notice how we're making use of three low dash helper's inside of your first map.
Then compact then unique by in every case we take the result of the helper.
We assign it to some temporary variable like events right here and then we pass that temporary variable
into the next load helper and then we repeat that same process over again.
So we essentially say map goes to events past events into compact compact goes to compact events pass
compact events into unique by.
And so because we have this very repetitive pattern we can make use of a fantastic little helper in
the load ash library called the chain function.
The purpose of the chain function is to clean up this very repetitive syntax that we're seeing right
here.
Now before we do this refactor to make use of chain I want to tell you that chain is a very very advanced
javascript and very advanced load dash topic.
So with every factor we're going to do is going to be just a little bit intense.
OK but I'm really I'm definitely comfortable I feel like we can really pull this off.
Now before we just go ahead and dive into the factor I want to give you a little bit of a better idea
of exactly how chain works.
So I'm going to pull open a little tool really quickly and you don't need to navigate to this tool yourself.
I just want to I want you to just look at what I'm doing and exactly how we're going to use change.
So on this little two right you're going to write some javascript code on the left hand side and then
the result of that code will pop up on the right hand side automatically.
So if I say like one SDF two or you know whatever we see the results pop up you're on the right hand
side.
OK.
So I want to define an array with the numbers 1 2 3 like so.
And then I'm going to use the low dash function inside of your called chain.
So say underscore dot chain and I'm going to pass in my array as the first and only argument.
Now you'll notice that when I call chain I get back my array.
So by default nothing really happened where things start to get interesting is when I start to add on
additional statements to the chain function.
So something like underscore dot chain dot map.
And then I can pass in a map function.
So we'll say for every number in the array return numb times 2.
So this says go through the number the A-R our array.
And for every number in there multiply it by 2 and return the result you'll see that.
Now I've got two four six.
Pretty much as you might expect.
So now things start to get a little bit more interesting.
Let's see how I'm going to do a little new line in here like so.
So it's still the same exact code.
I'd just put in a new line just for styling.
And now I can start to chain on as many load ash helpers as I want.
So I can add on another map function.
So maybe this one will be numb divided by 10 and I can on map of numb numb Plus the string of high there.
And so now you'll notice I have.
Point two with the string high there and then maybe I want to I don't know whether some other loadout
functions we can essentially chain on as many load ash helpers to the single statement as you wish.
So maybe we will also want to do let's just look up the documentation for chain and that will probably
give us some good ideas here.
So if we look up the documentation for chain Okay here's a good example here.
Okay let's do some sorting and then let's just do a sort.
How about that.
Will do sorts like so and we will change the first number on here.
And we should see a different result.
So notice how I'm now sorting in it's going from point 4 2.6 to 2000.
Maybe if we do just like a b
and then see the whole be a little bit more a little bit better since I can remove all the maps statements
on here.
I get ABC.
It's sorted.
Maybe I'll reverse it.
Now it's CBA and now I can sort it again and so I know I'm going very rapid fire here but the end goal
what I'm trying to communicate here is that we can use the chain helper to just add on as many of these
very short very quick statements as we wish without having to assign the result to any temporary variable.
And then when we're all done with all these changing statements in here we can then call the value function
and that returns the actual underlying newly processed array.
So essentially it's called Chain do the individual processing steps you want to do.
And at the very end call value.
So just to add on a couple of more steps here for fun maybe we'll map over this array will take every
string and return string plus a like so now I get a B.A. blah blah blah and we can add on a at the very
start and maybe we sort of do get it afterwards and it goes crazy as you want.
Here again we can out in as many steps as we please.
Get so going over it off topic but hopefully you've got a slightly better kind of visual impression
of what Shane does.
So now we're going to go back over to our request handler over here and we're going to identify the
fact that we are essentially taking this array doing these processing steps over it and then just really
making use of the end product.
So we're going to refactor our code to use the chain helper rather than repeatedly assigning these temporary
results along the way.
So those three factors can be a little bit intense again but I know that we're going to be able to pull
it off just A-OK.
So let's get to it.
The first thing I'm going to do is remove all these temporary variables that we are assigning these
things to.
So when I say Konst events no not anymore.
That's gone.
We're going to leave as just the map statement.
No more compact events equals just compact and then no more unique events equals just unique.
By next I can remove the underscore at the start of every statement so no underscore no underscore no
underscore and then going back over here.
You'll notice that it's kind of implied that we take this array and pass it to the sort function.
Take the results that pass the reverse take the result of that passage to sort and so we no longer have
to pass in events or compact events or body up here so we're going to remove the first argument from
every one of these helpers so no more racked up body.
Instead it's going to be just our arrow function no more events no more compact events just the two
properties that we want to do the unique by check on now we're going to remove the semi-colons at the
end of each line.
So remove one or remove to remove three will group them all together.
We will indent the whole block.
We look out on the chain statement at the very top.
So we'll say underscore dot chain I will pass in the array that we want to iterate over.
So we'll say rec dot body.
And then as the very last step after doing the map after doing the compact and after doing unique by
will then pull out the underlying array by calling dot value like so and the very last thing will make
sure that after we actually pull that array out was signed the result of all this processing to a variable
that we'll call events like so.
So now at the very last step here before we were Consta logging events.
Now we're just going to log events like so.
OK.
So that's a pretty good re factor pretty sizable.
But now we have a much more legible sequence of events here.
So any other engineer who starts to come back and read your code will understand that OK we're going
to iterate over recked of body.
We're first going to map over it.
Well then compact it will then do a uniqueness check and then return the value.
So this chain helper is really all about making your code much more legible when you're doing these
repeat repetitive iteration steps over in Iraq.
So last thing to do is to test this out by clicking on another e-mail and making sure that we are still
getting the correct result here at the very end.
Before we go and click on the e-mail I do encourage you to flip on over to your terminal and just verify
that you don't have any error messages or anything like that over here.
OK.
Now flip back over to my e-mail or click on the link or let it do its thing.
We'll flip back to the terminal and then I think you know what comes next we're going to take a quick
pause we'll let the council live pop up and it we'll continue in the next section so I'll see you in
just a minute.