- Read Tutorial
- Watch Guide Video
So in other words, if we create a function and let me make this a comment and say toThePowerOf and the first element is 2 and the next one is 3 then what the end result here should be should be 8 and then the same thing would apply for every other thing. So 2 x 2 x 2 = 8 and so that is the process that we're looking to build out.
I'm going to give you a little bit of a hint here. And it's not just a hint to help you with the solution but also to give you a good spot to go and research because if you've never used this function that I'm going to mention then it's a very good one to learn and understand and it's going to help you in many different situations and that is the reduce function or the reducer process.
So if you want to go research it, the function itself is called reduce. It is in the javascript core library and this is something that you do need to be working with es16 and that version of the syntax in order to have it working properly but that is going to be a very helpful tool for building out this feature. Pause the video right now, work on it try to go build it, and then come back and see how I implemented this particular solution.
Hopefully, you had a good time building that out. I am going to show you how I would personally create this if I was tasked with that. So I'd start by creating a function and I'd use an arrow function. So it's a const toThePowerOf and then it's got to take in two arguments. This one is going to be a num and the other is going to be an exponent and then this is going to be an arrow function.
const toThePowerOf = (num, exp) => {
}
Now you may have tried to do something like this where you took the number and then you just tried to iterate a number of times over some kind of loop or something like that and then tried to keep track of the values. And that's perfectly fine, that is what would be called the iterative approach and so that is one way of doing it. What I'm going to be showing you is more of the way that you'd want to do this especially in JavaScript.
Many other languages it's fine to take a step by step iterative approach to this type of solution. But JavaScript really embraces the concept of functional programming, and so what that means is that you want to create functions and then pass those around. However, they need to be used and then that should give you your solution. So that's what I'm going to show you here is a functional approach to building this out.
So first we need to have a data structure to work with, so I'm going to create an array here and so I'm gonna say const items equals array and then take the exponent value and then say fill with the number.
const toThePowerOf = (num, exp) => {
const items = Array(exp).fill(num);
}
Okay, now this looks kind of weird, let me copy this down here a little bit and let's take a look at this independent of everything else. So I'm going to just take this array and we'll pass in some hardcoded values here. So let's go with 3 and then num of two just like that. And now if I call this you can see that this gives me an array with 3 elements inside of it in each one of the elements is 2.
So that's all we're doing there on line 2 is we're creating a new array and we're pre-populating it. So we know because if you remember the entire process we're looking to do is something like this where it is 2 x 2 x 2. So what that tells me is that probably one of the easiest ways of working with this is having a data structure of three elements because in this specific example we are wanting to see how it works with having 3 items or the exponent being 3 and then each one of those elements needs to be 2 because that's just the basic behavior with how exponents work.
So the first step is creating the array, the next step is going to be building out the reducer functions. So I'm gonna create an anonymous function here and I'm going to call it reducer. Now, this is not a reserved word, this is different than later on when we're going to call the reduce function.
The reason why I like to call this reducer and many other javascript developers do the same thing is because it's very descriptive on what its goal is so this is going to handle the process of multiplying the values together. So I'm going to start off and say that we're going to have a total and then a current value and then I'm just going to use an arrow function here do it all on one line and say the total times the current value.
const reducer = (total, currentValue) => total * currentValue;
And so this is a function, by itself, this is not very helpful. This has to be combined with the reduced function but I'm going to store it in this variable so that it makes it a little bit easier to read and call later on. And so all reducer is, is a function that takes in two arguments and then it multiplies them together.
Now what we can do is say return items so we're going to call that array up there and now we're going to call the reduce function and pass it the reducer. And that is actually all we have to do to get this working.
const toThePowerOf = (num, exp) => {
const items = Array(exp).fill(num);
const reducer = (total, currentValue) => total * currentValue;
return items.reduce(reducer);
}
So I can now say toThePowerOf and let's pass in 2 and 3. And as you can see that's 8 so it's working perfectly.
Now if we pass in 3 and 3, that's 27. So that's working well and even pass in and play around with this however you want 10 and 10 and we get this giant number as well.
So exponents grow quite fast if you try to do something like this. He even converts it into a scientific notation right there just because the number is so large.
So that is how you can use reducers to build out this kind of functionality. Let's walk through and review exactly what is going on. The very first step is we created an array that is filled up automatically with all of the numbers so they're all going to be identical and they're all going to be that number. And then we have the number of that array is the exponent. So in each one of these cases, this means that the array that was created here had a 120 items of 10. And here we have 3 items of 3 and so on and so forth and so that is how we created our items array.
Then we created reducer which is just an anonymous function it takes in a total and a currentValue. Now, this is the one part that I've seen students get a little confused at if they've never used this before and it's because there is a little bit of an assumption here in this reducer function that what we going to pass it to in this case reduce is going to automatically work with two arguments and that is something that's required. So if you looked up the reduce documentation like I recommended then you would see that reduce takes a function and in that function it needs two arguments. The first argument is what is called its accumulator its the total its what it uses to maintain its state and to keep track of the value with each iteration and the next one is the actual value that is at each stage of the iteration so if we have an array like this. Which is exactly what we would have created here online 9.
Then what reduced does is it goes to that first element and it says OK the reduce value is going to be to. Here are the totals going to be two and then we know the current element or the current value or element or you want to call it is going to be two and then it's going to multiply those together and then we're going to end up with four and then it's got to go and then it's going to go to the next one and it skips this first one just so you're aware and so it uses that as the default total so now the total is 4 and the current value still 2 and now it's returning 8 and then it's done.
This is exactly what it's doing here this is what's happening behind the scenes with reduce because we passed in reducer here and then we are multiplying. If we change this, so if I said that you know I just want to add this then you can see it down on lines 16, 17, and 18 the values change there.
Now it's 6, 9, and 1200 instead of 8, 27, and then some giant number. So that is how the reduced process works, it's simply a way of iterating over a collection, in this case, iterating over an array and then performing some kind of function on each one of the elements and then keeping track of that return value. So it's kind of similar if you use functions like map or iterates over a collection and then it performs a function on each element.
It's very similar, the only difference is, in this case, it also keeps track of the return value in the first argument. So that's a reason why whenever you're using reduce you need to pass it two arguments the accumulator which is the first one and then whatever the current element is and that's when it's gonna be iterating through and working on.
So great job if you went through that. I know that functional programming if you've never done it before is a little bit confusing. I remember when I started out, these kinds of concepts really didn't make sense to me at all and so what helped me the most was being able to go through examples exactly like this, have code that I would be able to play around with and change values and see how that affected the output and then that's really what helped to clarify all of the processes for me.
That would be my recommendation to you if this is still a little bit fuzzy is to play with this code example and understand each one of the processes that's going on and then hopefully things will start to get a little bit more clear for you.