- Function Parameters and Arguments 4:48
- Pass an Argument to a Function 3 objectives
- Pass Multiple Arguments to a Function 4:32
- Parameters and Arguments Review 5 questions
- Create a max() Function 2 objectives
- Variable Scope 7:01
- Function Declarations vs. Function Expressions 4:29
- Scope and Function Expressions Review 7 questions
Preview
Video Player
00:00
00:00
Function Parameters and Arguments
4:48Functions often need specific information to perform a task. In addition to getting information from a function, you can send information to a function to change how that function works.
[MUSIC]
0:00
As you learned in the previous section,
functions can return a value.
0:05
But a function often needs specific
information to perform its task.
0:08
In addition to getting information from
a function, you can also send information
0:13
to a function to change
how that function works.
0:17
Let's go back to the example of you and
your magical assistant.
0:20
Your Go to the Coffee Shop
function is working well.
0:24
You get your coffee each time you say go
to the coffee shop to your assistant.
0:27
But where's the variety?
0:30
What if sometimes you want
iced tea instead of coffee?
0:32
Your current function only returns coffee.
0:35
The function is limited.
0:37
Instead, what if you can give your
assistant information whenever you said
0:39
go to the coffee shop, you can then
ask them to get you something else.
0:43
Now your go to the coffee shop
function is really flexible.
0:47
You can get an espresso,
a hot chocolate, or ice tea for example.
0:50
JavaScript functions can also
accept information called arguments
0:55
which you pass to the function.
0:59
To have a function accept an argument,
1:01
you add what's called a parameter inside
the parentheses when creating a function.
1:04
The parameter works just like a variable.
1:08
You can name it anything you want, but
you do need to follow the same rules when
1:11
naming the parameter as you
do when naming a variable.
1:14
Inside your function, you can use
the parameter just like any variable.
1:17
So now,
this function is expecting information.
1:22
Each time you call the function,
you need to pass it the information,
1:25
also called passing
an argument to the function.
1:28
Notice how much more
flexible this function is.
1:31
You can pass different values and
get different results.
1:34
To summarize, a function
parameter represents a value that
1:38
you supply to the function
via an argument so
1:42
that the function could do
something with that value.
1:44
Let's look at how to use a function
parameter as well as an argument
1:48
in the getRandomNumber function
we wrote in the previous stage.
1:51
Open the file random.js and
make sure to update the script tag and
1:55
index.html to point to random.js.
1:59
The getRandomNumber function only
returns a value from one to six
2:07
which works well for a dice rolling game
for example, but the function is limited.
2:12
What if you want to create games that
use other types of dice like 4 sided,
2:16
12 sided, or 20 sided?
2:20
Or what if you wanted to create
a flexible random number generator that
2:22
returned a number from 1 to 100,
200, or 1000 even?
2:25
You can make the random
number function more flexible
2:29
by accepting a value that sets
the upper limit of each random number.
2:32
First, let's add a parameter named
upper inside the parenthesis.
2:37
Keep in mind that function
parameters like the word upper
2:42
have no particular meaning to JavaScript.
2:45
Upper is just a parameter
name that I came up with
2:47
to represent the upper
limit of the random number,
2:50
and it's going to hold a value that
gets passed to the function when called.
2:53
You can then use the parameter
within the function.
2:57
So currently,
the function returns a number from 1 to 6.
2:59
To use the value of the parameter,
3:02
replace the number 6 with
the parameter name, upper.
3:05
Now, the getRandomNumber function is going
to expect that you pass in information
3:10
each time you call it.
3:15
Again, when you pass
information to a function,
3:16
it's called passing
an argument to the function.
3:19
You can generate all kinds of random
numbers now by calling this function and
3:22
passing it an argument, that's
the upper value of the random number.
3:26
Let's pass it 6.
3:30
I'll wrap this function call and
a console that log so
3:32
that I can see the random number
in the JavaScript console.
3:35
Now take a look at this
console.log statement.
3:39
You've actually been passing arguments for
some time already.
3:41
Notice how we're passing the value
from the getRandomNumber function
3:45
to console.log.
3:49
You've also passed values to other
functions like alert for example.
3:50
Those are all similar examples of
passing an argument to a function to
3:54
control how they work.
3:57
Let's add a few more lines, so we can
see several different random numbers.
3:59
I'll pass this one.
4:05
The number 100.
4:07
Then 1000.
4:11
And finally 20.
4:15
I'll save the file.
4:18
And preview the workspace in the browser.
4:19
In the console, we get four random
numbers refresh the page, and
4:23
new random numbers display.
4:27
Great.
4:29
To recap,
4:30
parameters are like variables that you
defined in the function definition,
4:31
like upper, and arguments are the values
you pass to the function when you call it.
4:35
Like the number 6 and 100.
4:40
Be sure to review the teacher's notes
with this video to learn more about
4:41
the differences between the parameters and
arguments.
4:45