Real functions phone home
All the functions we worked with so far weren't really functions - they were procedures. To be called a function, technically you must return a value to whoever called you. In this lecture we're going to look at how do we create procedures that return things(aka functions). Moreover, we're going to take a look at a really complicated function that does a recursive action. By the end of this lecture we're going to have a dynamic animation that will change randomly.
Video Transcript
00:02I lied to you. So functions are not really functions. All those functions we were working
00:09with until now are really called procedures. If you've done a little bit of mathematics,
00:14mathematics, if you've done any math at any point, you'll know that procedures basically
00:21take in things, but they don't return anything. And that's basically what we've been doing.
00:26We've created functions that basically did stuff, but they didn't give us reports
00:30back. They didn't answer back to whoever called them. And that's why those type of
00:34functions are actually procedures. The good news is you don't really have to know
00:37the differentiation in JavaScript in some languages you do. But now that we
00:43know that what we were doing so far was procedures, let's learn something new.
00:48How to actually create real functions. And real functions means functions that
00:52return something to you. I am returning the stage back to me because I recorded
00:58the next section already before. So I'm returning like a function back to me.
01:06Functions like their procedures. And when we say procedures, it's going to make a lot
01:10more sense once we see it in action. So what I want to do next is I'm going to go to my
01:15counter. And really what I want to do is instead of sending my counter in to swap my image,
01:20we're just going to comment these two lines out because I want to create a new function
01:24here that's going to help me define a new variable or a new value. And I'm just
01:30going to call this reset slide value. I'm going to call it reset slide value.
01:38It's not going to accept any parameter. Now, what I really want is a completely random
01:43slider between one and four. One, two, three, or four. To do that, I'm going to have to
01:49leverage a function that returns to me a value, a random value. So to do that, I'm going to
01:55create a new variable called a ran for random. And I'm going to set it using a function inside
02:00of the math library called random. And if I just call the random function, and I'm just going to
02:06call console.log to just showcase our random number, I'm going to make sure that also that
02:12I call the reset slide value, I'm just going to go ahead and put it right up here, just
02:17calling it one. So that way, when we animate our image out, we'll be able to see that random
02:23value between zero and one that should be coming back. So if I click your refresh, and I just
02:28refresh my application here, and wait for my image to slide that out, you'll see that now
02:33we're getting your value zero dot 90. But if I run this again, or just even go into my console
02:39and type math dot random, and just call that function, you'll see that each time I call it,
02:45it's going to bring back a completely different value between zero and one. Perfect. So this is the
02:50first time we work with a function that doesn't actually just do a procedure, it doesn't only do
02:56an action, it also returns a value. And that value for us is a value between zero and four,
03:01beautiful. The next step for us is we want to take that value and duplicate it by four,
03:06because we don't want to value between zero and one. But we want a value that is between one and
03:11four. Last but not least, now that we got my random number, I want to go back to that random number
03:16and tell it, hey, from now on, we want to round you up. So I'm going to go to math, and I'm going
03:20to ask for the ceiling value, which seal, seal, you know, that's a great question. I just don't
03:30remember. So I'm just going to go here into my browser and just check if it's seal,
03:35EIL, there you go. You know, that's where your dyslexics. So it's EIL.
03:39And if I type math seal, and I send into it my random number, no, notice what I'm doing here,
03:59I'm sending a parameter into this math seal, it's going to round it up. So value of the zero,
04:06zero dot nine is going to turn it to one, any value here, it's just going to notch it up to
04:10the highest in the highest integer close by, and I'm going to assign it into the value of RAM.
04:16Now, if I save this and run my application, again, I could literally also by the way,
04:20just call a reset slide value without waiting. So if I click your refresh, I can go right here
04:25on the bottom and just call that function, we'll see that we have here the value one, three, four,
04:30it's going to be completely different random values each time coming back a value between one
04:35and four. Beautiful. All that's left for me to do what I really want to do is I don't want
04:40to use variables. What I want to do is I want to call the delayed call. And literally what I
04:46want to do is I want the value to come right into here instead of the counter that we had previously.
04:51To do that, I'm going to call my function right in the position where I want the content to come
04:56back into. Or you know, even to make it a little bit more visual, I could create a variable called
05:02ran number. And I want to set its value to be whatever comes back from my reset
05:08slide value. And then I could send my random number right in as that parameter.
05:14The last thing that has left for us to learn and to figure out is how do we send this new value
05:18we created back to the whoever called us to do that we use a command called return. And then we
05:26send the value through which is our variable. Now, the rules are you could only have one return in
05:41each function, you can only return one value at a time. So a function could accept 100 different
05:46parameters, but it will always return only one action back. So whatever that value is,
05:51is the only value you're going to return, there's no way to accept more than one
05:55value at a time more than one variable at a time, more accurately speaking.
05:59So if I run now that application, it should now continuously randomly select a different image
06:05and loop through it and basically each each time come back with a different image. So
06:10first of all was image one. And next time that we're back, it's image two,
06:14it's completely randomly, although that's kind of cool that it ended up that way.
06:18Very cool, we're at three. Are we going to be at four now? No, we're still at three. Okay,
06:23so now we can see that it really is random. And now we're at one. So you can see there is
06:27our randomness that we were hoping for. And now we're back to one. It's a completely random slide.
06:33And obviously, one of our problems here probably is we would probably wouldn't want to run the
06:38same animation over and over each time. And if we wanted to basically fix that problem,
06:44what we could do is something really complex, and more interesting is we could basically say
06:51instead of only saving it to the random number, we could basically and I'm just going to comment
06:56push it in a little bit just to make it more visually pleasing to my eye.
07:00What I want to do is I want to take this random number and I want to save it or compare it to
07:04what is our current index. So what I'm going to do is I'm going to make sure that my index
07:10always updates our actual counter. In our case, we were calling a counter, which is not a great
07:15name, but I'm going to leave it at counter. What I'm going to do is I'm going to go to each time
07:18we update, I'm going to go to my counter and just counter, I'm going to set it to my current index,
07:24basically making sure that whatever image we're sending in, our counter will get updated.
07:31That way, now we could actually check and say, well, if our counter equals equals
07:41ran, that means if our counter is the same as our ran, then we want to actually call our reset
07:49slide value again and update our random number. So by doing that, we'll basically automatically
07:57call itself inside of itself and it will do it as many times as it needs to until the value
08:03is not equal to our counter. And the reason why that is, is if, for example, our counter was at
08:294 and the value of ran was 4, then the reset slide value would be called again and it would
08:37then send a different value. If it didn't find a different value, it would call itself again
08:40over and over until a value was not actually the same value as it was before. This is a very
08:45complicated topic. This is called recursive calling. And we also learned something new
08:50is how do you compare something inside of an if. And so far, we used ifs only for boolean
08:55flag values. And now we can see how we could take one variable and check if it's equal to another
09:01one. And instead of using one equal, which we used for assignment, we're using two equals
09:06for comparison. All right, so if we run our application again, we should hopefully not
09:12get the same image come up over and over, but we would always have a different image,
09:16no matter what. So we'll go down and a new image will come up. And if they didn't find
09:21a new image, it will find another image. And that way, we're making sure that the same image
09:25does not come up twice in a row as the same image. So this was a lot of things that we learned.
09:31It's definitely complicated. So if it's a little if you feel a little bit weak on it,
09:35stop, rehearse, I could give you a task an interesting task, which will be a little bit
09:41harder is I want you to make the same animation rule, only add to it that there shouldn't be
09:48two values. So not only the current index, but also the last index should not repeat itself.
09:54Okay, that's really complicated. If you could create that, then you're definitely
09:58in a great spot. And you could move on to the next section. All right, so see you in our next
10:03section. But in our next section, what we're going to do is we are done with create returning
10:08things, we are done with functions. And really, we're really done with this chapter. So um,
10:14that's about it for this chapter. And in chapter four, we're going to be doing a lot
10:18of exciting things. So goodbye to chapter three, make sure you rehearse, because we've
10:21definitely covered a lot of stuff here, go back into your source files, review, review,
10:26review, play with it, change it around, show me what you could do. All right, so see you in chapter
10:31over.