1
00:00:00,000 --> 00:00:05,104
[MUSIC]

2
00:00:05,104 --> 00:00:08,700
As you learned in the previous section,
functions can return a value.

3
00:00:08,700 --> 00:00:13,220
But a function often needs specific
information to perform its task.

4
00:00:13,220 --> 00:00:17,320
In addition to getting information from
a function, you can also send information

5
00:00:17,320 --> 00:00:19,850
to a function to change
how that function works.

6
00:00:20,950 --> 00:00:24,560
Let's go back to the example of you and
your magical assistant.

7
00:00:24,560 --> 00:00:27,190
Your Go to the Coffee Shop
function is working well.

8
00:00:27,190 --> 00:00:30,820
You get your coffee each time you say go
to the coffee shop to your assistant.

9
00:00:30,820 --> 00:00:32,530
But where's the variety?

10
00:00:32,530 --> 00:00:35,530
What if sometimes you want
iced tea instead of coffee?

11
00:00:35,530 --> 00:00:37,880
Your current function only returns coffee.

12
00:00:37,880 --> 00:00:39,590
The function is limited.

13
00:00:39,590 --> 00:00:43,480
Instead, what if you can give your
assistant information whenever you said

14
00:00:43,480 --> 00:00:47,270
go to the coffee shop, you can then
ask them to get you something else.

15
00:00:47,270 --> 00:00:50,690
Now your go to the coffee shop
function is really flexible.

16
00:00:50,690 --> 00:00:54,140
You can get an espresso,
a hot chocolate, or ice tea for example.

17
00:00:55,780 --> 00:00:59,800
JavaScript functions can also
accept information called arguments

18
00:00:59,800 --> 00:01:01,750
which you pass to the function.

19
00:01:01,750 --> 00:01:04,160
To have a function accept an argument,

20
00:01:04,160 --> 00:01:08,910
you add what's called a parameter inside
the parentheses when creating a function.

21
00:01:08,910 --> 00:01:11,190
The parameter works just like a variable.

22
00:01:11,190 --> 00:01:14,870
You can name it anything you want, but
you do need to follow the same rules when

23
00:01:14,870 --> 00:01:17,980
naming the parameter as you
do when naming a variable.

24
00:01:17,980 --> 00:01:21,519
Inside your function, you can use
the parameter just like any variable.

25
00:01:22,530 --> 00:01:25,650
So now,
this function is expecting information.

26
00:01:25,650 --> 00:01:28,890
Each time you call the function,
you need to pass it the information,

27
00:01:28,890 --> 00:01:31,810
also called passing
an argument to the function.

28
00:01:31,810 --> 00:01:34,200
Notice how much more
flexible this function is.

29
00:01:34,200 --> 00:01:36,700
You can pass different values and
get different results.

30
00:01:38,200 --> 00:01:42,040
To summarize, a function
parameter represents a value that

31
00:01:42,040 --> 00:01:44,730
you supply to the function
via an argument so

32
00:01:44,730 --> 00:01:46,960
that the function could do
something with that value.

33
00:01:48,220 --> 00:01:51,940
Let's look at how to use a function
parameter as well as an argument

34
00:01:51,940 --> 00:01:55,560
in the getRandomNumber function
we wrote in the previous stage.

35
00:01:55,560 --> 00:01:59,975
Open the file random.js and
make sure to update the script tag and

36
00:01:59,975 --> 00:02:07,512
index.html to point to random.js.

37
00:02:07,512 --> 00:02:12,580
The getRandomNumber function only
returns a value from one to six

38
00:02:12,580 --> 00:02:16,840
which works well for a dice rolling game
for example, but the function is limited.

39
00:02:16,840 --> 00:02:20,750
What if you want to create games that
use other types of dice like 4 sided,

40
00:02:20,750 --> 00:02:22,660
12 sided, or 20 sided?

41
00:02:22,660 --> 00:02:25,650
Or what if you wanted to create
a flexible random number generator that

42
00:02:25,650 --> 00:02:29,180
returned a number from 1 to 100,
200, or 1000 even?

43
00:02:29,180 --> 00:02:32,810
You can make the random
number function more flexible

44
00:02:32,810 --> 00:02:37,400
by accepting a value that sets
the upper limit of each random number.

45
00:02:37,400 --> 00:02:42,640
First, let's add a parameter named
upper inside the parenthesis.

46
00:02:42,640 --> 00:02:45,630
Keep in mind that function
parameters like the word upper

47
00:02:45,630 --> 00:02:47,920
have no particular meaning to JavaScript.

48
00:02:47,920 --> 00:02:50,910
Upper is just a parameter
name that I came up with

49
00:02:50,910 --> 00:02:53,290
to represent the upper
limit of the random number,

50
00:02:53,290 --> 00:02:57,210
and it's going to hold a value that
gets passed to the function when called.

51
00:02:57,210 --> 00:02:59,580
You can then use the parameter
within the function.

52
00:02:59,580 --> 00:03:02,000
So currently,
the function returns a number from 1 to 6.

53
00:03:02,000 --> 00:03:05,490
To use the value of the parameter,

54
00:03:05,490 --> 00:03:08,740
replace the number 6 with
the parameter name, upper.

55
00:03:10,430 --> 00:03:15,060
Now, the getRandomNumber function is going
to expect that you pass in information

56
00:03:15,060 --> 00:03:16,610
each time you call it.

57
00:03:16,610 --> 00:03:19,380
Again, when you pass
information to a function,

58
00:03:19,380 --> 00:03:22,520
it's called passing
an argument to the function.

59
00:03:22,520 --> 00:03:26,200
You can generate all kinds of random
numbers now by calling this function and

60
00:03:26,200 --> 00:03:30,660
passing it an argument, that's
the upper value of the random number.

61
00:03:30,660 --> 00:03:32,140
Let's pass it 6.

62
00:03:32,140 --> 00:03:35,670
I'll wrap this function call and
a console that log so

63
00:03:35,670 --> 00:03:39,180
that I can see the random number
in the JavaScript console.

64
00:03:39,180 --> 00:03:41,640
Now take a look at this
console.log statement.

65
00:03:41,640 --> 00:03:45,000
You've actually been passing arguments for
some time already.

66
00:03:45,000 --> 00:03:49,200
Notice how we're passing the value
from the getRandomNumber function

67
00:03:49,200 --> 00:03:50,850
to console.log.

68
00:03:50,850 --> 00:03:54,310
You've also passed values to other
functions like alert for example.

69
00:03:54,310 --> 00:03:57,720
Those are all similar examples of
passing an argument to a function to

70
00:03:57,720 --> 00:03:59,360
control how they work.

71
00:03:59,360 --> 00:04:03,430
Let's add a few more lines, so we can
see several different random numbers.

72
00:04:05,650 --> 00:04:07,210
I'll pass this one.

73
00:04:07,210 --> 00:04:08,376
The number 100.

74
00:04:11,627 --> 00:04:13,395
Then 1000.

75
00:04:15,975 --> 00:04:18,016
And finally 20.

76
00:04:18,016 --> 00:04:19,340
I'll save the file.

77
00:04:19,340 --> 00:04:21,030
And preview the workspace in the browser.

78
00:04:23,075 --> 00:04:27,560
In the console, we get four random
numbers refresh the page, and

79
00:04:27,560 --> 00:04:29,030
new random numbers display.

80
00:04:29,030 --> 00:04:30,100
Great.

81
00:04:30,100 --> 00:04:31,300
To recap,

82
00:04:31,300 --> 00:04:35,280
parameters are like variables that you
defined in the function definition,

83
00:04:35,280 --> 00:04:40,320
like upper, and arguments are the values
you pass to the function when you call it.

84
00:04:40,320 --> 00:04:41,802
Like the number 6 and 100.

85
00:04:41,802 --> 00:04:45,540
Be sure to review the teacher's notes
with this video to learn more about

86
00:04:45,540 --> 00:04:47,940
the differences between the parameters and
arguments.