Setting default parameter values
Until now, all the functions that we've worked with had parameters or didn't. What if we wanted to use a function where we have the option to send information to it - but not always? In other words, wouldn't it be nice to have default values to the parameters we sent into our functions. That's the main topic of this lecture.
Warning: this is a relatively new feature in JavaScript and not all browsers have incorporated it. As such, if you're running in any other browser besides Firefox, this won't work.
Note: Stay Tuned. We'll explain how to make it work in non-supported browsers shortly.
Video Transcript
00:00Have you had enough of functions already? I had not enough of functions yet, so we're going to do more functions now
00:06So far we store functions. We saw how to add parameters to them
00:10Well one parameter in this lecture literally in this lecture
00:14We're going to see how to add more than one parameter into our functions and how to add something that's called up
00:19Not a mandatory parameter imagine a wonderful world where you can have a default value
00:24It doesn't have to be in there
00:26And if you're wondering why am I with a different shirt each time you see a video?
00:32It's not because a lot of days pass because kind of cold. I'm hot. I don't really know what to wear
00:38So you know, you know how it is. It's the temperature is dead season. It's not winter. It's not summer right now
00:44We're doing the recording
00:46All right, let's do it go ahead and try to make our application even better now
00:51Remember when we created our animate in image, we were animating our opacity even when it didn't need to animate
00:58What we want to do next is we want to send a parameter a parameter that basically says
01:04if we should is
01:07Animate well is open is oh, oh
01:10Well path or is open let it be now is open will basically be if it's set to true
01:17We will want to run this if it's not set to true, then we won't want to run it now
01:23By default I could put here a value and because we're working with remember Boolean values. I'm going to set it to false and
01:30False would mean that is opacity by default will equal
01:34False and well in our case, we really want to default it to be true
01:38so because we want it whenever that are in animate in image whenever we call it animate an image by default for it to this
01:46Value to be equal true and to do that. I just have to put here the value equal
01:51next step is I want to basically set here a question mark if is is
01:57opa if
01:59This value is true if is opa then we're only going to animate this line
02:04And this is the only time we would animate that line
02:07Notice by the way as we're talking about this the only I don't have your curly bracket opening and closing
02:14I if I do put a curly bracket opening and closing that is completely valid
02:19The reason why you would put an opening and closing curly bracket is to be able to see where does your if start?
02:25Where does it end by default if you don't put anything in there?
02:29It's going to always take the first line of fact finds and use that for the if condition
02:34So be sure that you don't by mistake put two things inside
02:38They're thinking that just by indenting it this these two would be connected to the if condition
02:43they wouldn't be the only way both lines would be connected to that if condition is if our curly bracket around the if would open and
02:51Close basically bounding our if condition
02:54Just like we saw with functions where the curly brackets bound the function
02:58They also bound if conditions, but in this case
03:01I only want it to be one line and I'm gonna make sure my indentations don't make me confused
03:06I like breaking it up
03:07So it's very visually clear and here you can see that only if is
03:11Opa is true and only then will it animate in now before we wrap this up
03:17I want to make sure that I go to my into animate in image animate in an image and send false
03:25When I'm sending it after that initial animation in because from now on we don't want to animate the opacity because we're not changing it
03:32And by doing that if I run my application
03:34I'm just gonna go ahead on the bottom here and just add your console that log so we could see the value of is
03:40Opa and
03:43I'm gonna just go ahead here save this go back into my browser click on refresh
03:48And we're gonna see the first time around when it's called the value is true
03:53Well the second time around when the function is called the value will be false and here on after we're always calling it with
03:58The false value, so we'll see that the false value endlessly continues following through
04:04So that's how you create so so far we created and we saw how you add a
04:09Parameter and how you add a parameter with a default value in it
04:13We still have to see how do you actually add more than one parameter in a time?
04:18What if we wanted for example to swap the image but not swap further images further?
04:26to do that is just as simple as
04:29commenting as when you would put a comma and separate between your
04:35Parameters the same thing applies to when you want to add more parameters
04:39So I literally could just put your comma and then add whatever next item
04:43I want such as is animate now notice how I'm using it for Boolean values
04:48Although we said that we use the Boolean notation just using the word is
04:53Makes it a lot more clear. So when I'm looking at this I could say is animate that basically gives me the answer
04:58It doesn't animate or not when I'm looking at is opacity is
05:02OPA then it's much easier for me to read if is opacity. So is animate I could have your if is
05:11Animate I could default it to whatever value I wants just true so I could default the value to true and
05:19Then it would automatically animate unless at some point I decide let me when I call the swap images
05:26Not only am I gonna send my counter here. I'm gonna also send a property that says no
05:30I don't want you to animate by default
05:32Which by the way the way we would do that hero says by adding a comma and I'm gonna set here the value of false
05:38Which would basically tell my application. Hey do this only once don't continue on and animate the image out afterwards
05:44So if I run this just by setting that value to false there and I click on refresh
05:50We're gonna see that my image will load in and it's gonna go out
05:54But it's not coming back in
05:57Now I want to just show you what's another thing as we're doing this if I want to just call the swap image
06:02Directly and I'm gonna go ahead right in here and I'm gonna call swap image directly
06:06And I'm just gonna put here one and I'm gonna set your true and just send it in this way
06:11You'll see that I could turn it on at any point that I want
06:14Reactivating that automatic flow. Oh, but by mistake I send your animate in image and I set it to false
06:30But that's that's that's fine. That's fine. But now is animate if it equals true
06:35Let me put here a little trace here a console here
06:38And you know, let me set this is animate out because the problem was is even if I set it to be true down there
06:44Once it calls back in again, because I hard coded the value in here is gonna call it false anyways
06:50But if I send here true, then it will automatically then run that application again
06:54But this is a little bit of a tiny bitsy-bitty a little bit too much complicated
06:59So I'm gonna roll that out
07:01I'm just gonna put this here as the default to be true just for the sake of showcasing how you could use the two together
07:06Don't worry too much about an extra if you really sort how to work with if conditions
07:10That was a little bit more than we probably should have showed in a in this stage of our video
07:16All right. So so I'm just gonna recap really quickly. We saw regular functions
07:21We saw regular functions, but they have an extra parameter such as an index
07:26We saw how a function could have more than one parameter and now we also saw how you could add default values to a function as well
07:35Now that is it about functions and how to work with functions. Really?
07:40There's just a couple of more things we want to talk about which we'll talk about in the next video
07:45But I wanted to say just another thing is once you put default values, which this is what it's called
07:50You only put it into the items leading in so you wouldn't put here a default value
07:55And then no default value here at all
07:57And the logic is very simple if this is mandatory it should come first if it's not mandatory for the user or programmer to fill
08:05In only then you put it as the last parameters
08:08so you would never have a scenario where you put your index equals 1 and then the is animate is mandatory to be put to
08:15Be sent through but other way around though
08:17You can definitely have index equals 1 as a default and is animate equals true as a default
08:23So that is completely fine in the next file
08:27So by the way, all the functions that were created so far in some programming languages are called
08:32procedures and in
08:41JavaScript there is no difference between a procedure and a function and they're written the exact same way in the next lecture
08:47We're going to talk about what our actual real functions and in real functions
08:51The real deal functions are functions that return something and we're going to look into that see what they are
08:57Work with them and even create one or two of them
08:59So we'll see you in the next lecture where we will deep dive a bit deeper into a new type of function
09:06so far we worked with functions of a type of
09:09Procedure and a procedure means is something that it does something but it doesn't return anything back to us versus functions that are gonna be more
09:17Helpful for us by giving us information for us to continue doing something after that function manipulated something
09:23So we're gonna dig much deeper into that in the next lecture. So see you then
09:26you