1 00:00:00,000 --> 00:00:02,980 [? Music ?] [Treehouse presents] 2 00:00:02,980 --> 00:00:05,790 [How to Create JavaScript Functions with Variable Arguments in JavaScript with Jim Hoskins] 3 00:00:05,790 --> 00:00:07,550 When we create functions in JavaScript, 4 00:00:07,550 --> 00:00:10,730 we give names to each one of our arguments that our function takes. 5 00:00:10,730 --> 00:00:14,610 But what if we want our function to take any number of arguments? 6 00:00:14,610 --> 00:00:16,440 What do we call our arguments then? 7 00:00:16,440 --> 00:00:19,670 Fortunately, JavaScript supports variable argument functions 8 00:00:19,670 --> 00:00:23,900 with a special arguments variable inside of our functions. 9 00:00:23,900 --> 00:00:26,880 In this example, I've created a function called longestWord 10 00:00:26,880 --> 00:00:29,200 that takes 2 arguments, word1 and word2, 11 00:00:29,200 --> 00:00:31,770 and returns the longer of the 2 arguments. 12 00:00:31,770 --> 00:00:34,250 A very simple form of this is by simply comparing 13 00:00:34,250 --> 00:00:36,640 word2's length with word1, and if it's longer, 14 00:00:36,640 --> 00:00:38,450 we return word2. 15 00:00:38,450 --> 00:00:41,470 Otherwise, we return word1. 16 00:00:41,470 --> 00:00:45,820 And here we have some code that I'm using to display the result on the page. 17 00:00:45,820 --> 00:00:48,540 We can see between green and red, 18 00:00:48,540 --> 00:00:51,630 green is the longer of the 2 words. 19 00:00:51,630 --> 00:00:56,040 But what if I wanted to check blue, 20 00:00:56,040 --> 00:01:02,430 purple, and magenta? 21 00:01:02,430 --> 00:01:05,180 Our function only works on 2 objects. 22 00:01:05,180 --> 00:01:08,490 Now, we wouldn't want to do something like checking word3, 23 00:01:08,490 --> 00:01:10,670 word4. 24 00:01:10,670 --> 00:01:13,350 That would be pretty unfeasible to actually make work. 25 00:01:13,350 --> 00:01:15,580 Instead, we can use the arguments variable. 26 00:01:15,580 --> 00:01:17,830 I'm actually going to remove all of our named arguments 27 00:01:17,830 --> 00:01:19,830 from our function definition, 28 00:01:19,830 --> 00:01:22,370 and we're going to remove our code. 29 00:01:22,370 --> 00:01:25,670 I'm going to create a very simple implementation of this function 30 00:01:25,670 --> 00:01:29,540 that at least does what I want, but you can implement this in a different way, 31 00:01:29,540 --> 00:01:32,240 and obviously, you can write whatever function you want 32 00:01:32,240 --> 00:01:34,000 using this method. 33 00:01:34,000 --> 00:01:36,000 Basically what I'm going to do is I'm going to 34 00:01:36,000 --> 00:01:39,990 take all of these different words, and we're going to loop over each one of them 35 00:01:39,990 --> 00:01:44,400 and try to find the longest word. 36 00:01:44,400 --> 00:01:47,290 I'm going to create a variable called longest, 37 00:01:47,290 --> 00:01:50,120 and I'm going to initially set it to the shortest word I can think of, 38 00:01:50,120 --> 00:01:52,840 which is the empty string of length 0. 39 00:01:52,840 --> 00:01:57,090 And now we can use a for loop to loop over all of our words. 40 00:01:57,090 --> 00:02:00,360 We will compare it to longest, and if our word in the loop 41 00:02:00,360 --> 00:02:03,340 is longer than our longest, then we'll set longest 42 00:02:03,340 --> 00:02:06,280 to that word and continue to compare all the way through, 43 00:02:06,280 --> 00:02:11,450 finally returning longest. 44 00:02:11,450 --> 00:02:13,280 Now, how do we do this loop? 45 00:02:13,280 --> 00:02:19,120 Well, let's create a variable i for our loop iteration, 46 00:02:19,120 --> 00:02:24,950 and we'll use a for loop by initializing i to 0. 47 00:02:24,950 --> 00:02:29,370 And what we're looping over is a variable called arguments, 48 00:02:29,370 --> 00:02:32,970 and arguments is a special variable that's only accessible 49 00:02:32,970 --> 00:02:36,680 from inside of our function, and it acts a lot like an array 50 00:02:36,680 --> 00:02:39,590 of the arguments passed to this function. 51 00:02:39,590 --> 00:02:42,510 Now, it's not a proper array, so you could run into problems 52 00:02:42,510 --> 00:02:45,210 if you try to call array methods on arguments itself. 53 00:02:45,210 --> 00:02:49,280 However, it does have a length on it, 54 00:02:49,280 --> 00:02:53,440 and our continuing condition is i is less than arguments.length, 55 00:02:53,440 --> 00:02:57,970 and for each iteration, we'll increase i by 1. 56 00:02:57,970 --> 00:03:00,320 This is a pretty standard for loop, 57 00:03:00,320 --> 00:03:02,520 just like you would loop over any other array. 58 00:03:02,520 --> 00:03:11,150 Now for our word, we'll create another variable that's a local word, 59 00:03:11,150 --> 00:03:20,570 and we'll say word = arguments array index of i. 60 00:03:20,570 --> 00:03:25,150 And we can say if word.length is greater than 61 00:03:25,150 --> 00:03:30,060 longest.length, what do we want to do? 62 00:03:30,060 --> 00:03:38,280 We want to set longest to word. 63 00:03:38,280 --> 00:03:41,410 And finally, whatever the last longest = word 64 00:03:41,410 --> 00:03:44,060 is called should be the longest variable. 65 00:03:44,060 --> 00:03:46,270 Let's try it out. 66 00:03:46,270 --> 00:03:50,280 If we refresh, we can now see magenta shows as the longest word. 67 00:03:50,280 --> 00:03:52,500 If we add another really long string, 68 00:03:52,500 --> 00:03:58,540 like reallylongstring, this will continue to work. 69 00:03:58,540 --> 00:04:01,470 If we refresh, we can see it picks out the correct string. 70 00:04:01,470 --> 00:04:04,810 By using the arguments variable, we're able to loop over all of the arguments 71 00:04:04,810 --> 00:04:07,980 passed to our function even though we didn't give them a name. 72 00:04:07,980 --> 00:04:10,620 Now, what if we don't want to loop over all of our arguments? 73 00:04:10,620 --> 00:04:13,940 Let's say we have a message here, 74 00:04:13,940 --> 00:04:18,360 and then the rest of our arguments were what we wanted to compare. 75 00:04:18,360 --> 00:04:20,130 Now this function is going to do 2 things. 76 00:04:20,130 --> 00:04:24,990 It's going to call log of message, 77 00:04:24,990 --> 00:04:27,450 and it's going to return the longest word. 78 00:04:27,450 --> 00:04:29,590 Now, this isn't a very well constructed function. 79 00:04:29,590 --> 00:04:31,170 We should have 2 different functions for this, 80 00:04:31,170 --> 00:04:34,350 but let's see what happens. 81 00:04:34,350 --> 00:04:37,960 It calls with red, and then it calls with reallylongstring. 82 00:04:37,960 --> 00:04:48,010 Let's make our first argument "This is my message I want to log." 83 00:04:48,010 --> 00:04:50,990 In this function, we have our first argument, which we don't want to compare 84 00:04:50,990 --> 00:04:53,540 against our other words, and then all the rest of them 85 00:04:53,540 --> 00:04:55,920 are the variable arguments we want to compare. 86 00:04:55,920 --> 00:04:59,170 However, the way we have it now, it's going to both log this message 87 00:04:59,170 --> 00:05:01,380 and use it as a comparator. 88 00:05:01,380 --> 00:05:04,940 One way around this is by changing where we start our loop. 89 00:05:04,940 --> 00:05:07,810 Instead of starting at index 0 being the first argument passed, 90 00:05:07,810 --> 00:05:12,000 which is our message, we instead with index i = 1. 91 00:05:12,000 --> 00:05:15,830 Now we refresh, and we're back to our original functionality. 92 00:05:15,830 --> 00:05:18,170 If you have named variables that you don't want to use 93 00:05:18,170 --> 00:05:20,290 as your variable length argument, start your loop 94 00:05:20,290 --> 00:05:23,040 at the index appropriate to where your variables start 95 00:05:23,040 --> 00:05:25,370 in your function signature.