1 00:00:02,220 --> 00:00:03,240 So what else is there 2 00:00:03,240 --> 00:00:04,450 to functions? 3 00:00:04,500 --> 00:00:06,020 Well how about default 4 00:00:06,150 --> 00:00:07,820 arguments? 5 00:00:07,900 --> 00:00:12,400 We have functions that take arguments, like this one, our get winner function 6 00:00:12,490 --> 00:00:16,210 and right now this function will produce unwanted results 7 00:00:16,240 --> 00:00:20,520 if we don't pass values to all arguments. Now let's actually give this a try, 8 00:00:20,530 --> 00:00:27,040 let's say if the user doesn't pick rock, paper, scissors because he entered something wrong 9 00:00:27,130 --> 00:00:34,360 anything like that, well then we don't want to return this default user choice here, 10 00:00:34,360 --> 00:00:38,830 instead we just return here, which means we stop function execution, 11 00:00:38,830 --> 00:00:43,330 we won't reach this line but we therefore basically return undefined, 12 00:00:43,330 --> 00:00:48,130 we return nothing and that will be treated as undefined in the place where we call this function and 13 00:00:48,130 --> 00:00:50,140 try to work with the returned value. 14 00:00:50,620 --> 00:00:52,870 So we returned nothing here 15 00:00:52,870 --> 00:00:55,190 if the user didn't choose anything. 16 00:00:55,330 --> 00:01:00,570 Now of course, I still want to have that default user choice and we could have left the code as it is 17 00:01:00,580 --> 00:01:05,130 but to also show you that feature of default arguments, I'll go with this route now. 18 00:01:05,260 --> 00:01:11,040 So nothing is returned here and that means that down there in player choice, this might be undefined right, 19 00:01:11,050 --> 00:01:14,340 because maybe this doesn't return anything. 20 00:01:14,410 --> 00:01:19,660 So right now if I save that and I reload and then start a new game and I enter something, click 21 00:01:19,690 --> 00:01:25,750 ok, this is not true as we know, instead undefined is returned and indeed here we see you pick undefined 22 00:01:26,140 --> 00:01:33,740 and the computer picked paper and since this leads to our else case here, we lost. So we of course pass 23 00:01:33,770 --> 00:01:38,740 undefined to get winner because our player choice is undefined here. 24 00:01:38,840 --> 00:01:40,690 Now let's alter this code a little bit as well, 25 00:01:40,700 --> 00:01:48,440 let's add an if statement and say if player choice, if it's set, then I want to derive the winner like this, 26 00:01:48,530 --> 00:01:53,690 so I'll move that code into this if block and therefore actually, 27 00:01:53,810 --> 00:01:58,490 I'll create my winner variable outside of that and just assign a value to it here because of that block 28 00:01:58,490 --> 00:02:03,800 scoping so that the winner variable is not just that way in here but also outside of the if block 29 00:02:03,890 --> 00:02:05,440 and now here in the else case, 30 00:02:05,450 --> 00:02:12,110 so if player choice is not set, if it is undefined, I'll set winner equal to get winner and I only call 31 00:02:12,110 --> 00:02:17,570 this with computer choice. So I don't forward player choice because this is undefined, we'd know it's 32 00:02:17,570 --> 00:02:20,170 not useful to that function anyways. 33 00:02:20,180 --> 00:02:25,310 Now the first interesting thing which will happen here and by the way, that's totally independent of 34 00:02:25,310 --> 00:02:30,530 whether you're using arrow functions, you're using function expressions with the function keyword or 35 00:02:30,530 --> 00:02:32,100 function declarations, 36 00:02:32,120 --> 00:02:34,460 this will always work like I show it to you now. 37 00:02:34,580 --> 00:02:39,770 So the first interesting thing is actually that I reload here and I start a game, enter something invalid, 38 00:02:39,790 --> 00:02:41,190 click ok 39 00:02:41,330 --> 00:02:44,120 and we still get that same message as before, 40 00:02:44,120 --> 00:02:49,100 so the interesting thing is that we don't get an error. In a lot of other programming languages, 41 00:02:49,100 --> 00:02:55,250 you would get an error because what we're doing here is we're calling a function, get winner, which actually 42 00:02:55,250 --> 00:03:02,310 expects two arguments, two parameters and we're only passing one. Now Javascript 43 00:03:02,310 --> 00:03:07,360 as you learned already is a quite forgiving language, other languages are not as forgiving 44 00:03:07,410 --> 00:03:12,180 and there you would get an error because in the end what you're doing is you're calling a function in 45 00:03:12,180 --> 00:03:13,590 an incorrect way. 46 00:03:13,740 --> 00:03:20,190 So Javascript forgives this mistake but it then uses undefined as a value for the missing argument, which 47 00:03:20,190 --> 00:03:25,470 makes sense, it is not defined, right? Now that's where default arguments come into play. 48 00:03:25,470 --> 00:03:31,260 You assign a default value by adding an equal sign here and then your default value, like in my case 49 00:03:31,260 --> 00:03:36,210 here, default user choice, this constant which in the end points at rock here. 50 00:03:36,210 --> 00:03:38,070 So that is something we can do here, 51 00:03:38,100 --> 00:03:40,980 this is how we can set a default value. 52 00:03:40,980 --> 00:03:46,740 Now with that, we just have to alter the code down there a little bit, player choice of course still 53 00:03:46,740 --> 00:03:51,240 would be undefined because we never change the value that's stored in there, deliberately because I 54 00:03:51,240 --> 00:03:52,920 want to show you that other approach. 55 00:03:52,920 --> 00:03:58,230 So here we can add a short ternary expression, check if player choice is truthy, if it is, use player 56 00:03:58,230 --> 00:04:06,490 choice, otherwise use the default user choice or as you learned if that's what you want to do, 57 00:04:06,560 --> 00:04:10,870 you essentially can use the or operator and if that is a truthy value, it will keep that, 58 00:04:10,880 --> 00:04:13,260 if it's not, it will return this. 59 00:04:13,280 --> 00:04:22,760 So now we can save that, reload, enter something incorrect here and see rock was picked. 60 00:04:22,760 --> 00:04:23,670 So this works 61 00:04:23,690 --> 00:04:29,540 and now just to again clarify this, obviously the previous approach of just returning a default value 62 00:04:29,540 --> 00:04:32,810 up there in get player choice was shorter. 63 00:04:32,810 --> 00:04:37,820 It is probably the approach you would use normally but this is a nice way for me to show you default 64 00:04:37,850 --> 00:04:42,800 arguments which come in handy in many places where you have a function that can be called in one way 65 00:04:42,800 --> 00:04:43,400 or another 66 00:04:43,730 --> 00:04:47,870 and then having these default arguments can be really really nice. 67 00:04:47,870 --> 00:04:52,840 Now let's dive a bit deeper into default arguments and what you can do with them. 68 00:04:52,970 --> 00:04:58,140 For one, let's see what happens if I actually would pass in my undefined value here. 69 00:04:58,250 --> 00:05:04,220 So I'm forwarding player choice here, I'm considering the choice the player made which will be undefined 70 00:05:04,520 --> 00:05:09,100 and therefore please keep in mind that what we're going to output down there will not be what we pass in 71 00:05:09,100 --> 00:05:15,230 here because we pass in undefined here and therefore hopefull, we take our default argument, here 72 00:05:15,230 --> 00:05:20,180 at the bottom, I definitely output that we took our default argument, even though we don't yet know 73 00:05:20,180 --> 00:05:26,030 how this will behave here but to find out how our function behaves, we can use the developer tools. 74 00:05:26,030 --> 00:05:34,190 Lets go into our browser, reload, sources and then there, to app.js and in app.js, let simply place 75 00:05:34,190 --> 00:05:38,840 a little marker inside of the get winner function 76 00:05:38,840 --> 00:05:45,080 and now click that button here, enter some garbage and now this will pause and if you now hover over 77 00:05:45,080 --> 00:05:47,680 pchoice, you see rock was used here. 78 00:05:47,690 --> 00:05:49,820 So this has a value of rock 79 00:05:49,820 --> 00:05:56,300 even though player choice which we're passing in will be undefined. As you can see, if I zoom out 80 00:05:56,300 --> 00:06:01,460 a little bit here so that this is easier to read, as you will be able to see if I scroll down a little 81 00:06:01,460 --> 00:06:07,480 bit here and I place another breakpoint here right before we alert the winner message 82 00:06:07,480 --> 00:06:13,420 if we resume, now we can get insights into the variables defined here and indeed, you see the player choice 83 00:06:13,780 --> 00:06:14,890 is undefined right, 84 00:06:14,920 --> 00:06:21,680 that's what's happening here, it's undefined and still, winner did actually use rock as a default. 85 00:06:21,730 --> 00:06:28,980 So if you pass and that's the takeaway, if you pass undefined and I'll clear these breakpoints, 86 00:06:29,140 --> 00:06:36,360 if you pass undefined here as an argument where you have a default argument, then the default argument 87 00:06:36,360 --> 00:06:43,240 will be taken but only for undefined, other falsy values will not have that effect. 88 00:06:43,260 --> 00:06:50,130 So if you would pass a falsy value like null or an empty string or zero here, that value would be kept 89 00:06:50,280 --> 00:06:53,540 and especially the zeros shows why that's the case. 90 00:06:53,700 --> 00:06:58,680 If you pass in zero, well you certainly will have some functions where this is a normal value, 91 00:06:58,680 --> 00:07:04,410 let's say you have some add function where you want to add two numbers, maybe you want to add zero, might 92 00:07:04,410 --> 00:07:09,780 not make the most sense but you certainly don't want to take some default value in that case, you don't 93 00:07:09,780 --> 00:07:13,090 want to overwrite the user's wish of adding a zero. 94 00:07:13,260 --> 00:07:20,740 So that's why other falsy values are not replaced with the default argument, undefined is replaced however, 95 00:07:21,090 --> 00:07:27,900 so passing undefined or omitting the value altogether has the same effect and the default value comes 96 00:07:27,900 --> 00:07:29,170 in. 97 00:07:29,250 --> 00:07:37,470 Now in addition, you also can define arguments parameters with default values before you have arguments 98 00:07:37,890 --> 00:07:39,440 which don't have a default. 99 00:07:39,450 --> 00:07:45,750 So if we add see choice here after this, this would be valid. In some other programming languages, this is 100 00:07:45,750 --> 00:07:46,680 not allowed. 101 00:07:46,680 --> 00:07:52,110 There your parameters with default values always have to be the last ones in the list of parameters, 102 00:07:52,530 --> 00:07:57,170 simply for the reason that these here can be populated with default values, 103 00:07:57,210 --> 00:07:58,530 this here can't. 104 00:07:58,590 --> 00:08:04,080 So now for example if we call get winner with only one argument here, like we do in this case, this 105 00:08:04,080 --> 00:08:10,420 value here will actually be passed in as a value for pchoice, even though that has a default value, 106 00:08:10,440 --> 00:08:15,000 the order of how arguments are getting their values is not changed 107 00:08:15,420 --> 00:08:21,110 and here we pass exactly one argument and this is at position one of our argument list 108 00:08:21,140 --> 00:08:26,190 obviously since it's the only one, therefore the first parameter here will receive it and it doesn't 109 00:08:26,190 --> 00:08:29,390 matter that this parameter would have a default value. 110 00:08:29,460 --> 00:08:36,450 Javascript won't look for other parameters without default values and try to assign your value to those, 111 00:08:36,900 --> 00:08:42,180 that would be a pretty bad behavior because it would mean that Javascript tries to be smarter than you 112 00:08:42,180 --> 00:08:48,750 are, you the developer and that can lead to a lot of unintended behaviors in your code. So therefore Javascript 113 00:08:48,750 --> 00:08:53,790 doesn't do that and hence you can have default arguments before other arguments but that means that 114 00:08:53,790 --> 00:09:00,270 if you only parse one argument here, this one argument is stored in this parameter here, so you get that 115 00:09:00,270 --> 00:09:03,120 parameter here and this will simply be undefined. 116 00:09:03,300 --> 00:09:05,000 So that's just something to be aware of, 117 00:09:05,010 --> 00:09:10,560 therefore in most cases, you automatically have a set up where your default arguments come last because 118 00:09:10,590 --> 00:09:15,840 then you typically have functions where the first arguments always need to be defined and then the last 119 00:09:15,870 --> 00:09:20,130 arguments can maybe be omitted and therefore you have your default arguments there. 120 00:09:20,130 --> 00:09:27,420 Another interesting feature, when assigning a default value, you can even use parameters that came before 121 00:09:27,510 --> 00:09:28,710 that parameter. 122 00:09:28,710 --> 00:09:35,460 So if this default value should take this parameter into account, you can do so. So you can definitely 123 00:09:35,480 --> 00:09:36,080 add this here, 124 00:09:36,090 --> 00:09:41,700 let's say in a ternary expression where you check if this is equal to rock and in this case, you don't 125 00:09:41,700 --> 00:09:47,530 use the default user choice which would be rock but you use paper, something like that. 126 00:09:47,550 --> 00:09:49,090 This would be valid code, 127 00:09:49,110 --> 00:09:50,300 of course this is cheat mode 128 00:09:50,310 --> 00:09:55,980 now, this means that whenever the computer uses rock, we automatically win but it's just here to demonstrate 129 00:09:56,010 --> 00:09:56,980 what you can do. 130 00:09:57,000 --> 00:10:01,840 You can refer to other parameters in your default arguments, 131 00:10:01,920 --> 00:10:07,980 just make sure that the arguments you are referring to came before this parameter where you assign a 132 00:10:07,980 --> 00:10:11,510 default argument. So that's it for default arguments, 133 00:10:11,520 --> 00:10:18,710 I'll remove this cheat mode here and just make sure we set this default user choice. So if we now reload 134 00:10:18,740 --> 00:10:21,820 and enter some garbage here, rock is chosen for us, 135 00:10:21,860 --> 00:10:26,860 we had a draw because the computer also picked rock. Now a computer picks scissors 136 00:10:26,870 --> 00:10:32,330 so we won. So that all works, of course if we enter a valid value just to test this as well, 137 00:10:32,330 --> 00:10:36,710 then this is taken into account because then we call the function differently, then we call it like 138 00:10:36,860 --> 00:10:39,590 this and therefore this is it for default values, 139 00:10:39,620 --> 00:10:43,220 a handy feature which allows you to write more flexible functions.