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.