To end up this particular section.
Let's talk about these three methods, and the first one is reduced.
Filter and find guys.
This method are commonly used, so pay attention and make sure that you are familiar with it.
Comparing these methods and then the one that you talk about like shift and on shift.
These ones are easy to use, but for these ones as a beginner, unless you wrap your head around.
But trust me, I'm going to make it pretty easy.
So the first one is reduce.
Before I explain, if you get back to the advanced section of this course, we are going to revisit
these methods again.
So you have two chances to grab the logic.
The first one is reduced.
So let me comment.
This one's.
To avoid a lot of console.log inside my browser.
Okay.
So let's start with the first one.
As reduce.
I can see that any production application out there make use of reduced because I use this method a
lot.
For example, if I want to find some of numbers in a way I use this.
So what actually is a reduced function where the reduced function as the name implies, it is used to
reduce some data into a single value.
So reduce.
Retain a single value.
So let's say that we have an array of, let's say, 1000 record by reduce we can use to flatten it to
retain a single value.
And one good thing about reduce is also is that, well, it doesn't change the original array and I'll
prove to you so once it doesn't change means that it does mutate.
So it does not mutate, meaning change the original array.
So that is one features about reduced function and then this function execute every element in the array.
So let's have a look at this.
Let's say that we have this array of, let's say number of product or let's say quantity of product,
for example.
So let's say that product.
Quantity now is equal to, let's say first one is 1230 and the next one, let's say five, eight two
and let's say four, dude.
So for this data, I can ask you that, please.
Can you tell me how many total quantity are in this particular array?
So to be able to get this one, unless we flatten it, I mean, compress or reduce it.
We are going to reduce the entire array to form a single array when we have reducing OC reduce and always
going to retain.
A value.
So with this one, let's have a look at the syntax first.
Then we come back to this I example.
To be able to find how many quantities are present in this particular array.
So let's have a look at the syntax for array reduced.
Here you go.
Remember, reduce is used to operate on array.
So for the meantime, let's say this is my area.
Let me have a comment here.
Otherwise I'm going to see some error in a console.
So let's say that this is my array and on that I have reduce this syntax and reduce it's a function.
But if a function is being operated on, an object is called method and this function or method takes
in one callback, that's kind of a topic on its own when the callback.
Well, don't worry.
As you proceed on, I will explain more about callback.
For the meantime, take it that this reduced function takes in one argument or parameter and that is
a function.
Remember all the functions that we have in creating, we pass in, for example, a string, a variable
in it, but for built in method like this one insists that you're not going to pass in a string or a
number, but instead I'm going to pass in a function.
So a callback simply means that a function that is passing into an argument of and a function is called
callback.
So here we call something anonymous function.
Well, it's a function without a name.
So, for example, I can write a function like this one, a function like this one.
Yes.
Let's say concert log.
Concert log.
Here we see that this anonymous function because it has no name.
Yes.
So this is what we call callback.
I'm going to pass this function into this particular release function.
So let me remove this one.
And now inside this, remember how you write function because we haven't talked about array.
Sorry, error function.
Let's stick to this normal function syntax to function here.
My parentheses and my carry braces.
Get it?
You see that we pass in only.
A function without a name into this entire function.
So let me have some illustration for you.
See, this is the original function here.
Then we pass in this function in that to get it perfect.
So inside that, inside this particular function called callback.
Now this a callback meaning we pass in into the function.
Of reduce with a callback.
And inside this callback function where remember functions are first class citizens, meaning that we
can pass in a function to a function, we can assign a variable to a function, we can do whatever with
a function.
So that's why function in JavaScript is first class citizen.
Enough about that.
So this callback you're going to take in for parameters or argument.
The first one is what you call accumulator.
The next one is called current value.
The next one is called current index.
The next one is the original.
You see that.
So this particular reduced function had is taking in four argument.
Now after that, after this first callback, if passing this function is also take in another argument.
So here.
Come on.
Like that.
And now you call it as initial value.
Initial value.
I is that like I say, advanced topic.
So I want to expose you here if you get back to advance to explain it more for you to see.
So now have a look here.
Let me have some more room here, I think.
Yes, maybe summarize it so I can see it clearly here.
Good.
So if we see that this function, take two things.
First of all, this actual function here, up to here.
All right.
And now we pass in first argument my function here.
So the first thing and the second one is called the initial value.
So now inside my function body, that's I'm going to write my actual logic.
So let's see now.
For this one.
Let me open my carapace here like that because let me comment out this one to here.
Okay.
So now I have open up my body.
Now let's see what does these things I mean, these variables mean over here.
So the accumulator is a current value in the array.
The current value in the array is called accumulator.
And the current value represent the current element in the array.
We have a value and we have the element.
Well, when I pass in the array able to see what we are referring to and then the current index is the
index number of the current element in the array.
And then this array is array X of the original array and it's called initial value.
Good.
So this is the syntax for.
Reduce.
So now let's come back to the actual logic here.
The logic says that find the Toyota Toyota quantity.
In the array like that.
So how are we going to do it?
Remember, it takes an array and this is my array, right?
So I'll come up here and see that.
Put that quantity my array dot reduce then a function.
Now here you go.
Look at IntelliSense.
It takes in callback function, previous value and the current current value, right?
So you can make some as a pivot value and then current value the same thing.
Good.
So now inside this, I'm going to pass in my callback function as an element function here.
The second element is my initial value.
So I want to start for the meantime, let's give it a zero.
I've explained to you very soon.
Then inside my callback function, I have access to my accumulator as a pivot value.
Current.
Value.
And then this one going to be the.
Next, I'm going to be the index and then the original array.
Okay.
So now inside my function, buddy, let's try to console.log these ones for you to see.
So first one is console.log and let me call this one as the first one as my accumulator.
Then I would inject.
The accumulator.
And so when I console like it, you will know what values represent these ones.
Let me also copy this one and now paste it.
Four times.
Now they face this one.
Current value here, current value.
And it's my current value.
This is my index and is my index and is my index and is array and opacity array and then array.
So now moment of truth.
So when I save this one, let's check the console, open the console, and now let's refresh it.
Good.
It will see that it has repeated how many times.
For the meantime, let me make a little bit, I think.
Let's have a list to record here.
So I can repeat it two times.
We see that the function has been called on each of the items in a way, because we have two records
here, 12 and 30.
So this function will call two times and that's why we have it here.
So the first upon the first loop here, we have this one.
Let me show you.
I'll point at first.
Look.
This is it.
The first one is this one.
And the second loop is this one.
Now, let's have a look what the accumulator means.
So the accumulator here is zero.
Why is zero?
Even though we don't have zero here.
So the accumulator is a current value in the array because you provided the initial value here.
This initial value here right now is my current my my the current value in the array called accumulator.
If I pass in here, let's say ten when I save it that I have the accumulator here.
Suppose is is ten good.
So now initial value by default.
Let's keep it at zero.
You explain very soon.
Now you know what the accumulator mean whereby the current value has given me 12 and this is it is a
current value before the event, the array loop or the first loop.
That's my current value.
So the current value is a current element in the array.
This is my current element in the array.
And then the next one is going to be the index.
At what index does this work case?
It works at index zero.
That's why I have it here.
Here.
Then the origin array, which is this array you pass in here, which is this.
But on the second loop, we have something where here the accumulator is undefined because we are not
adding up by default.
We have zero here.
Next loop is trying to add some logic here, but we have not yet implemented that.
That's why we have undefined.
So takeaway here is that know what these parameters mean in this particular function callback function
to be more precise.
Good.
So now we got that one.
Now we know that the zero is a starting point.
At what point?
You want to start adding your array at zero.
So now I can remove this one.
And next is I want to return from this function that I want to add the accumulator, which is this one.
Meaning the first one, this accumulator.
So now I want to add plus my current value, which is current value as that.
So with this one, if I assign the is the response or the results, a variable call answer is equal
to this.
When I console.log.
The answer.
We see we have the magic 42 because when we add 12 plus 30 is what, 42, that is the reduced for you.
So with this one.
We can ignore the index, remove it and remove the array because we don't need it.
Yes.
For the meantime, let's ignore those agreements.
So this is how we do this.
If I had, let's say, 100 to the array, I'm going to get 142, meaning the the logic is working perfectly.
So let me go over again for a bit.
Understand what we are referring to here.
Let me bring it back to these two numbers here.
This is how it runs, dude, at the first run before the application runs.
The this accumulator here represents this zero.
You get it perfect.
And this is the current value here represents the current value.
I have it here.
So inside our function body here, we are saying that at the first run we should add the accumulator,
which is this.
So behind the scene is zero plus what the current value and which is 12.
So I have zero plus 12.
Do you get it?
Yes.
Then on the next loop.
This accumulator now has become, what, 12?
Okay.
So the next current value is 30.
Then you're going to add 12 plus 30, giving me 42.