1 00:00:02,080 --> 00:00:07,660 So the nice thing is we have the show result function and we can pass it around as a callback, 2 00:00:07,660 --> 00:00:13,870 let's now say we also when I use the same pattern in subtract up. So I'll leave arguments here just 3 00:00:13,870 --> 00:00:17,660 for you as a reference, of course you could use a rest parameter here, 4 00:00:17,890 --> 00:00:22,590 I'll not do it here but what I will do is I'll also expect a result handler here. 5 00:00:22,630 --> 00:00:27,520 So just as in sum up, here I want to get a result handler and instead of returning the sum, I want to 6 00:00:27,520 --> 00:00:30,920 call result handler and forward the sum to it. 7 00:00:31,360 --> 00:00:31,670 Ok, 8 00:00:31,720 --> 00:00:37,960 so now we can get rid of the console log statement down there and simply pass show result as our first 9 00:00:37,990 --> 00:00:41,990 argument, effectively using the same approach as we did for sum up, 10 00:00:42,070 --> 00:00:45,220 so that's what we just learned in the last lecture. 11 00:00:45,220 --> 00:00:55,370 If you now reload, you get 19, 142 and NaN actually, well we get that 12 00:00:55,370 --> 00:01:00,680 because of that argument thing, actually therefore, we have to switch to the rest parameter now because 13 00:01:00,680 --> 00:01:02,830 result handler is one of the arguments, 14 00:01:03,050 --> 00:01:06,130 so we try to include that in our sum which of course won't work. 15 00:01:06,200 --> 00:01:08,420 So let's switch to the rest parameter approach, 16 00:01:08,420 --> 00:01:11,830 a good example for why you might want to use that and not use arguments 17 00:01:11,840 --> 00:01:13,110 now that I see it. 18 00:01:13,250 --> 00:01:16,670 So that's actually not the main thing I wanted to show but still nice to see here 19 00:01:17,000 --> 00:01:21,470 but now with that changed, let's reload and give this another try. 20 00:01:21,470 --> 00:01:27,710 We get the right result but what you'll also see is that I still say after adding all numbers. 21 00:01:27,800 --> 00:01:32,530 Well of course here we're not adding any numbers, we're subtracting them. 22 00:01:32,630 --> 00:01:33,820 So we want to change the message 23 00:01:33,830 --> 00:01:37,740 but if I change it here, it will be changed for sum up as well. 24 00:01:37,760 --> 00:01:40,350 Now of course, we could create a new function here, 25 00:01:40,460 --> 00:01:47,000 we could create show result 2 where we have a different message and use show result 2 here and show 26 00:01:47,000 --> 00:01:53,180 result there, that would work but you probably see that you would create a bunch of different functions 27 00:01:53,180 --> 00:01:55,590 just to show a different message. 28 00:01:55,700 --> 00:02:02,020 Now a convenient way would be if we could actually get two arguments here in show result, 29 00:02:02,030 --> 00:02:07,460 one is the result and the other is the message text let's say 30 00:02:07,790 --> 00:02:16,050 so that in the end here, we only combine message text and then maybe some whitespace and then result 31 00:02:16,050 --> 00:02:21,570 and here we want to make sure that message text is the result after adding blah blah blah and here it's 32 00:02:21,720 --> 00:02:24,040 the result after subtracting blah blah blah, 33 00:02:24,480 --> 00:02:26,130 so that's our goal. 34 00:02:26,160 --> 00:02:33,510 Now we just have a problem, result is passed in here in result handler, the sum is result and here as 35 00:02:33,510 --> 00:02:34,470 well. 36 00:02:34,500 --> 00:02:38,780 Now of course here, we could define the messages because here we know it's in sum up, 37 00:02:38,880 --> 00:02:46,470 so we always want to provide the result after adding all numbers is as a message. 38 00:02:46,470 --> 00:02:52,900 We actually know this here because we have our two different functions, sum up and subtract up, right? Now 39 00:02:52,900 --> 00:02:59,350 what if that were a more reusable function where we have one function that does either sum or subtract 40 00:02:59,650 --> 00:03:01,130 based on some other parameter 41 00:03:01,150 --> 00:03:04,780 we're getting? Actually we can even simulate this here, 42 00:03:04,780 --> 00:03:12,640 let me comment out subtract up and instead here, add a new operation parameter to sum up and therefore 43 00:03:12,640 --> 00:03:17,580 I'll just name it combine. 44 00:03:17,590 --> 00:03:23,380 So now we've got this new operation operator and here in the loop, I can check if operation is let's 45 00:03:23,380 --> 00:03:25,720 say sum 46 00:03:25,720 --> 00:03:27,980 and yes you could use a global constant for that, 47 00:03:28,120 --> 00:03:30,420 in which case I'll update the sum like this, 48 00:03:30,550 --> 00:03:31,260 excuse me, 49 00:03:31,370 --> 00:03:39,480 add I mean or else it's probably subtract or whatever, else we therefore update it like this, 50 00:03:39,490 --> 00:03:41,870 so with a minus. 51 00:03:41,950 --> 00:03:47,230 So now we have a more reusable combine function and we can replace sum up and subtract up with that 52 00:03:47,230 --> 00:03:54,360 down there, then here pass add as a second argument, that's this extra operation argument which is now 53 00:03:54,360 --> 00:03:57,150 expected and here it could be subtract. 54 00:03:57,150 --> 00:04:05,680 So now if we do that and we save this and we reload, it works as before but still with the wrong message. 55 00:04:05,730 --> 00:04:11,100 Now of course, we could adjust the message down there, for example of a ternary expression and check operation 56 00:04:11,100 --> 00:04:14,800 if it's equal to add, in which case we should message a or message b 57 00:04:14,970 --> 00:04:20,190 but the more possible operations we support here, the more cumbersome this gets. 58 00:04:20,190 --> 00:04:25,320 So in the end, I just want to pass my sum to result handler and it would be better if we could set up 59 00:04:25,320 --> 00:04:29,310 the message down there, where we know which operation will be performed 60 00:04:29,310 --> 00:04:30,750 and that's exactly what we'll solve 61 00:04:30,750 --> 00:04:37,140 now. Of course we could easily pass our message if we would call the function here but we don't want 62 00:04:37,140 --> 00:04:37,920 to call it here, 63 00:04:37,950 --> 00:04:39,350 we want to give it to combine 64 00:04:39,360 --> 00:04:40,850 so that combine calls it for us 65 00:04:40,880 --> 00:04:42,720 so that's not an option. 66 00:04:42,720 --> 00:04:44,310 So what can we do? 67 00:04:44,310 --> 00:04:51,090 Well functions are objects and they actually have special properties attached to them or to be precise, 68 00:04:51,150 --> 00:04:52,970 special methods here 69 00:04:53,100 --> 00:04:57,420 and one method is the bind method. 70 00:04:57,420 --> 00:05:05,850 Now you just call .bind as a method on your function object and you do execute this and what bind 71 00:05:05,850 --> 00:05:12,420 will do is it will create a new function, a new function, a new reference at a function which it returns 72 00:05:12,420 --> 00:05:19,570 to you which will be preconfigured regarding the arguments it receives and that's the interesting part. 73 00:05:19,590 --> 00:05:24,670 So with bind, you can create a function which is not immediately executed, 74 00:05:24,960 --> 00:05:31,950 what would be the case if you manually call it like this but instead, which is prepared for a future 75 00:05:31,950 --> 00:05:38,130 execution, where certain values for certain parameters which you already know at this point of time are 76 00:05:38,130 --> 00:05:39,540 already set. 77 00:05:39,540 --> 00:05:43,680 So how does this now work? Well bind takes at least two arguments, 78 00:05:43,680 --> 00:05:46,380 the first argument is one we have to ignore for now. 79 00:05:46,380 --> 00:05:52,170 It sets a value for a thing called this, a special keyword in Javascript which we haven't learned about 80 00:05:52,170 --> 00:05:55,790 yet which we will learn about in the objects deep dive section. 81 00:05:55,830 --> 00:05:58,730 For now you can pass in this here, just like that, 82 00:05:58,740 --> 00:06:05,130 the this keyword and ignore it for now, then separated by a comma you pass in the first parameter you 83 00:06:05,130 --> 00:06:08,190 want to preconfigure and you can pass in as many as you want, 84 00:06:08,190 --> 00:06:13,970 you can preconfigure as many parameters as you want and as your function supports of course. 85 00:06:14,040 --> 00:06:21,660 So here we could say the result after adding all numbers is, like this 86 00:06:22,570 --> 00:06:26,560 and copy that to my other two calls down there as well. 87 00:06:26,560 --> 00:06:35,080 Now for subtracting of course, I'll change it after subtracting all numbers, so I change it to that and 88 00:06:35,080 --> 00:06:38,990 restructure this across multiple lines, a bit strange, 89 00:06:39,310 --> 00:06:40,860 yes we'll go with that, 90 00:06:40,870 --> 00:06:42,940 so now every argument has its own line I guess. 91 00:06:42,940 --> 00:06:50,150 So now we call combine three times and we bind this value here to show result. 92 00:06:50,150 --> 00:06:52,880 Again this does not execute show result immediately, 93 00:06:52,930 --> 00:06:55,150 it just prepares it for execution. 94 00:06:56,560 --> 00:07:03,340 Now the thing is, the arguments you're passing here, in our case one argument, will be received in exactly 95 00:07:03,340 --> 00:07:04,510 that order, 96 00:07:04,510 --> 00:07:09,790 now show results however expects result as a first argument and we're not providing a value for that 97 00:07:09,790 --> 00:07:10,660 here at all 98 00:07:10,690 --> 00:07:18,040 and we can't because that will be derived in the combine function. Well, we just have to swap order of 99 00:07:18,040 --> 00:07:19,910 arguments here in show result 100 00:07:19,960 --> 00:07:24,610 so that message text is the first argument because it's the first argument we're setting here and the 101 00:07:24,610 --> 00:07:30,790 good thing is, we'll still get result here because the place where you actually call show result, 102 00:07:30,880 --> 00:07:39,550 so in our case inside of combine here in this linem the value you pass to result handler here will automatically 103 00:07:39,550 --> 00:07:44,890 be appended as the last argument or arguments in your function. 104 00:07:44,890 --> 00:07:50,440 So if you bind and set your own arguments, these will always come first and any arguments which are then 105 00:07:50,440 --> 00:07:57,100 passed in the place where you actually call this function will come after your own configured arguments. 106 00:07:57,100 --> 00:08:02,860 So show result will receive both the message text because you are setting it here and result because 107 00:08:02,860 --> 00:08:08,860 when we parse it here, this will automatically be appended at the end of this parameter list by Javascript 108 00:08:09,100 --> 00:08:12,850 and that all happens because of this bind method. 109 00:08:12,850 --> 00:08:20,230 So with that if we save that and we reload our page here, we see the messages after adding all numbers 110 00:08:20,230 --> 00:08:24,690 and again after adding all numbers but then after subtracting all numbers. 111 00:08:24,880 --> 00:08:31,150 So it works exactly as it should, thanks to the help of bind which allows us to preconfigure functions 112 00:08:31,420 --> 00:08:37,750 in places where we need to pass in a value but we also don't want to directly execute a function.