And we're back to talk about arrays again in the first section when we talked about arrays we said that
they looked something like this
square brackets and we can put whatever we want.
We just put in a few numbers here.
So these are arrays and we talked about the fact that we can do four loops with them.
We can do for each with them which was new in my script five.
And today we're going to learn a few more.
But before we do that let's remember how the For Each works.
Let's say we want to multiply every single number in the array.
We can just to Konst remember now we can just use our new E6 syntax and we can say that new array equals
array dot for each and it reads nicely right for each array.
We are going to use a number and we're going to use as a function again.
No more function word.
Everything looks nicer this way with the fat arrow and for each number in the array Whalsay number times
two so multiply everything by two.
Now we'll see what that gives us console log.
You re
undefined.
Well because that's not how.
For each works right for each just says I'm going to move over these elements and I'm going to multiply
a number by two but we're not changing the array.
If we look at the array right now well it's still the same thing 1 to 10 16.
We're just randomly multiplying the numbers by two but we're not really storing it anywhere.
If we want to do what we're doing then we have to say Konst double and we'll say that double is an array
and then double dot push.
So we're pushing onto the array as we loop through it number times to.
Now let's see what double gives us.
I save a refresh and look at that.
I get two for 20 32.
OK.
Now the ones we're going to talk about today is map filter and reduce I would say that these three are
probably the most important methods that you'll use in your day today.
Javascript they're super useful so really start to become familiar with them.
And any time you think of doing some sort of a loop most likely you want to do one of these three.
Let's start off with map the above way of doubling each thing in the array and creating a new array
well with map we can do cost map parade array dot map number is number times to and the way map works
is that you always need to return something because what's different for mabbe than it is for for each
well for each just loop's over something and it just does whatever the function says versus with the
array.
We can do what we couldn't with for each which is loop over each element each number and return a new
array.
Let me show you what I mean.
Every time the array loops.
So let's say over here the first one is number one.
We return 1 times 2 that gets put into map array which is now 2.
And then we go to the next number to 2 times 2.
Now gets added to the array 10 times 2 gets added to the array and 16 times 2 gets added to the array.
So that's why we return it.
And by doing this if we Konsole dog log map array
and let's refresh here.
And got a closing bracket here let's try that again.
You see that map array.
So the first line is double and the second one is knackery will name these just so we know the difference.
And let's just redo that all over again.
By the way you're wondering why I'm refreshing instead of just copy and pasting it down here.
Well that's because because we're using Konst it's saying array has already been declared so I have
to refresh.
But there you go.
For each map looking at these two they seem to both be doing the same thing.
But there's a critical difference between map and for each and I'm here to tell you that whenever you
want to loop do a simple loop and take some action on something like an array.
You want to use map over for each with for each the operation may do nothing.
You can just leave this completely blank or do Konsole log because all for each cares about is to iterate
which is going one by one to iterate over a collection of elements like 1 to 10 and 16 and apply whatever
operation we tell it to on each element.
Now map on the other hand has a restriction on the operation.
It expects the operation to return an element.
So with map with for each you can have multiple lines of code doing all these crazy things versus map
with map.
You always have a return element.
The map iterates again loops through over a collection of elements applying the operation on each element
and then finally storing the result of each invocation of the operation.
That's this into another collection which is map array.
In other words map transforms the array.
It creates a new array which is map array versus for each which just does a whole bunch of actions based
on the array and what those actions are aren't really that limited.
If we want to return a new array we have to create our own array and then push.
And you might notice here something that we spoke about in the last section when we talked about advanced
functions and that is the idea of side effects if we go back with foreach we can do a whole bunch of
side effects within the function.
You can Konsole law you can create a new array you can push to that array you can return undefined.
You saw that when we first did the for each or even now we're not really returning anything.
So we're returning undefined versus with a map.
All these side effects are theoretically gone.
And because with a map we have to return.
Let me just show you if I don't return here let's see what happens.
I get map undefined undefined undefined undefined.
Right away we know that we're doing something wrong that we need to return.
And as we mentioned in the previous section we've now created a pure function where there's no question
about whether we return or not.
We have inputs a function with no side effects that just simply returns a value.
Again a very important concept.
We want to keep things acting in an expected way.
We don't want to have a piece of code that lives on a website let's say for four years and somebody
comes along who doesn't know it intimately and all of a sudden have all these side effects happen that
they don't know about.
Again we want to write pure simple Foxtons and that is what map allows us to do.
And the other important thing is that we're not changing the array.
This array stays the exact same with math because we're always just making a new copy of the array we're
never mutating the data.
All right.
So that was map.
Let's bring back the return here.
And let's bring back the consul.
I also want to show you that when you only have a single parameter with an air function you can actually
avoid the brackets.
And again because we're returning and we're just returning a single line here we can do shorthand which
is just this
housecleaner does outlook.
Let's again test that out.
There you go.
Everything's looking nice.
Look at that difference between the map and the for each the next I'm going to show you is filter.
Now with filter we can say filter array.
And as the name suggests we can filter our array with a condition in our case we can say Blits return
all the elements in the array that are above forth so we can say number is greater than 5.
And as with map this returns a new array so we have to return something because filter array is going
to contain that information.
So the way you read this is filter this Saray which is up here as you're going one by one so a number
will be first one return is one greater than 5.
In this case it's going to say that's false.
So we're not going to add this into the filter array.
Then it iterates to two is too greater than five.
No that's false.
So it's not going to go into the filter array is 10 greater than 5.
Yes it is good.
Ten is going to go into the filter array and is 16 greater than 5.
Yep.
Then 16 is going to go into the array.
And again because it's just a single line we can do short form here.
And now if we cancel log and we'll say filter filter array.
And refresh we get the filter containing 10 and 16 if we do equals to 5 while in that case we get an
empty array because nothing equals five.
So you can put any condition you want in here.
If he had strength and you want to see if it contains a word hello Well you can do that as well.
All you have to do is return true or false if it returns false.
It won't go into the array if it returns true while it will go into the array.
Very cool very useful.
What else do we have.
Well the last one I want to show you is reduce and this is really really powerful you can do a lot with
Reduce.
You can actually do filtering and mapping with reduce.
So it's a really really powerful method.
But I'm going to show you one easy way to get you started.
Well we're going to do is we're going to say Konst
reduce array he calls and again this returns a new array we save reduce and reduce takes something called
an accumulator and the number.
Now obviously this can be any name.
Sometimes you'll see a CC for a accumulator we'll just leave it like that for now so you can see we
know what number is.
Number is 1 to 10 and 16 but what is accumulator.
Well accumulator is something where we can store the information that happens in the body of the function.
Let me explain accumulator plus number and again because we reduce we're returning an array.
We have to return a value.
And what we're saying here is that every time you iterate So let's say the first go round.
You have number one accumulator plus number one equals.
Let's say if the accumulator is zero then all equal 1 now zero plus one equals 1.
When 2 comes around we do 1 plus 2 because the accumulator remembers what was there previously and then
10 comes around and you go three plus 10.
Now what is the accumulator.
We haven't defined it anywhere in redos after the function.
You have a second parameter.
And here we can specify what we want our accumulator to star with the default value.
In our case let's say zero.
Now if I do Konsole dialogue reduce
and do reduce.
Let's see what happens.
We get reduce 29 because 10 plus 16 is 26 plus three is 29.
If I changed this to 5 and I copy and try this again we get 34 because the starting number is now five.
Very cool.
So that's it.
I want you to remember these three methods because you're going to be using them a lot in your career.
They're very very useful.
They're pure which means every time we do an operation whatever inputs we get in it always returns a
value.
And there are no side effects.
And as you can see they're very easy and simple to read.
So get used to them and good luck with the exercises
after this video. I'll see you in the next one bye.