How to Create JavaScript Functions with Variable Arguments

[? Music ?] [Treehouse presents] 0:00 [How to Create JavaScript Functions with Variable Arguments in JavaScript with Jim Hoskins] 0:02 When we create functions in JavaScript, 0:05 we give names to each one of our arguments that our function takes. 0:07 But what if we want our function to take any number of arguments? 0:10 What do we call our arguments then? 0:14 Fortunately, JavaScript supports variable argument functions 0:16 with a special arguments variable inside of our functions. 0:19 In this example, I've created a function called longestWord 0:23 that takes 2 arguments, word1 and word2, 0:26 and returns the longer of the 2 arguments. 0:29 A very simple form of this is by simply comparing 0:31 word2's length with word1, and if it's longer, 0:34 we return word2. 0:36 Otherwise, we return word1. 0:38 And here we have some code that I'm using to display the result on the page. 0:41 We can see between green and red, 0:45 green is the longer of the 2 words. 0:48 But what if I wanted to check blue, 0:51 purple, and magenta? 0:56 Our function only works on 2 objects. 1:02 Now, we wouldn't want to do something like checking word3, 1:05 word4. 1:08 That would be pretty unfeasible to actually make work. 1:10 Instead, we can use the arguments variable. 1:13 I'm actually going to remove all of our named arguments 1:15 from our function definition, 1:17 and we're going to remove our code. 1:19 I'm going to create a very simple implementation of this function 1:22 that at least does what I want, but you can implement this in a different way, 1:25 and obviously, you can write whatever function you want 1:29 using this method. 1:32 Basically what I'm going to do is I'm going to 1:34 take all of these different words, and we're going to loop over each one of them 1:36 and try to find the longest word. 1:39 I'm going to create a variable called longest, 1:44 and I'm going to initially set it to the shortest word I can think of, 1:47 which is the empty string of length 0. 1:50 And now we can use a for loop to loop over all of our words. 1:52 We will compare it to longest, and if our word in the loop 1:57 is longer than our longest, then we'll set longest 2:00 to that word and continue to compare all the way through, 2:03 finally returning longest. 2:06 Now, how do we do this loop? 2:11 Well, let's create a variable i for our loop iteration, 2:13 and we'll use a for loop by initializing i to 0. 2:19 And what we're looping over is a variable called arguments, 2:24 and arguments is a special variable that's only accessible 2:29 from inside of our function, and it acts a lot like an array 2:32 of the arguments passed to this function. 2:36 Now, it's not a proper array, so you could run into problems 2:39 if you try to call array methods on arguments itself. 2:42 However, it does have a length on it, 2:45 and our continuing condition is i is less than arguments.length, 2:49 and for each iteration, we'll increase i by 1. 2:53 This is a pretty standard for loop, 2:57 just like you would loop over any other array. 3:00 Now for our word, we'll create another variable that's a local word, 3:02 and we'll say word = arguments array index of i. 3:11 And we can say if word.length is greater than 3:20 longest.length, what do we want to do? 3:25 We want to set longest to word. 3:30 And finally, whatever the last longest = word 3:38 is called should be the longest variable. 3:41 Let's try it out. 3:44 If we refresh, we can now see magenta shows as the longest word. 3:46 If we add another really long string, 3:50 like reallylongstring, this will continue to work. 3:52 If we refresh, we can see it picks out the correct string. 3:58 By using the arguments variable, we're able to loop over all of the arguments 4:01 passed to our function even though we didn't give them a name. 4:04 Now, what if we don't want to loop over all of our arguments? 4:07 Let's say we have a message here, 4:10 and then the rest of our arguments were what we wanted to compare. 4:13 Now this function is going to do 2 things. 4:18 It's going to call log of message, 4:20 and it's going to return the longest word. 4:24 Now, this isn't a very well constructed function. 4:27 We should have 2 different functions for this, 4:29 but let's see what happens. 4:31 It calls with red, and then it calls with reallylongstring. 4:34 Let's make our first argument "This is my message I want to log." 4:37 In this function, we have our first argument, which we don't want to compare 4:48 against our other words, and then all the rest of them 4:50 are the variable arguments we want to compare. 4:53 However, the way we have it now, it's going to both log this message 4:55 and use it as a comparator. 4:59 One way around this is by changing where we start our loop. 5:01 Instead of starting at index 0 being the first argument passed, 5:04 which is our message, we instead with index i = 1. 5:07 Now we refresh, and we're back to our original functionality. 5:12 If you have named variables that you don't want to use 5:15 as your variable length argument, start your loop 5:18 at the index appropriate to where your variables start 5:20 in your function signature. 5:23

You need to sign up for Treehouse in order to set up Workspace

Sign up