- 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
Pass Multiple Arguments to a Function
4:32Functions can accept more than one argument. When calling a function, you're able to pass multiple arguments to the function; each argument gets stored in a separate parameter and used as a discrete variable within the function.
You learned that you can pass information
called an argument to a function.
0:00
The function stores that value in a
parameter and uses it within the function.
0:04
Functions can accept
more than one argument.
0:09
When calling a function, you're able to
pass multiple arguments to the function.
0:12
Each argument gets stored
in a separate parameter and
0:16
used as a separate variable
within the function.
0:19
Let's revisit the example of you and
0:21
your assistant in the useful
goToCoffeeShop function.
0:23
Perhaps you not only
want to order a drink but
0:27
also get something to eat when your
assistant runs off to the coffee shop.
0:29
Currently, the goToCoffeeShop
function is limited to just one item.
0:33
You can another parameter in the function
definition by typing a comma,
0:37
followed by the parameter name.
0:41
Let's call it pastry.
0:43
Then update the programming inside the
function to use the new pastry perimeter.
0:45
Now this function expects two arguments.
0:49
When you call the function,
0:52
pass the second argument by typing
a comma followed by a value.
0:53
croissant, for instance.
0:57
This function is now flexible enough for
you to order a different drink and
0:59
pastry each time it's called.
1:02
All right, now let's create a function
that uses multiple parameters and
1:05
arguments.
1:09
This time,
open the file named multiple-args.js.
1:10
And as usual,
update the script tag in index.html so
1:14
that it points to multiple-args.js.
1:18
The function we'll create is going to
calculate the area of a rectangle.
1:25
Define a function named getArea,
and the math for
1:30
calculating the area is
pretty straightforward.
1:33
Multiply the length of
a rectangle by its width.
1:37
Let's have this function
accept a length value and
1:40
a width value via the parameters width and
length.
1:44
Inside the function,
declare a variable named area.
1:49
Its value is the result or
product of width times length.
1:54
And let's have the function returned the
value of area using a return statement.
2:01
Now to use this function,
you call it and pass it a width and
2:07
length value, let's say 10 and 20.
2:12
Let's view the value in the console.
2:16
Once the browser loads JavaScript,
2:18
you can call any functions in your
JavaScript file directly from the console.
2:20
For example, I'll test the getArea
function by cutting the function call
2:24
out of the file, saving the file,
and pasting it in the console.
2:29
The function returns an area of 200,
but 200 what?
2:35
I want to return a value that includes a
unit of measurement, like square feet and
2:39
square meters.
2:44
For example, a value like 200-square feet.
2:45
To do that, I'll add a third parameter
to the function called unit.
2:48
Remember, a function can
only return a single value.
2:54
So I'll need to adjust the return
statement to return a string holding
2:58
the area and unit.
3:01
I'll replace area with a template
literal that uses the ${} syntax,
3:03
or string interpolation, to insert the
values of area and unit into the string.
3:09
I'll save this file, refresh the page and
back in the console,
3:20
I'll press the up arrow key wants to
bring back the getArea function call.
3:25
This time I'll pass
the unit value as a string.
3:31
Now the console output's 200 sq ft.
3:38
I'll try a different set of values.
3:41
Let's say 5, And
3:44
17.5, sq m.
3:48
That returns 87.5 sq m, good.
3:56
You're able to pass any number
of arguments to a function.
4:00
Too many arguments, however, can make
your functions difficult to manage.
4:03
For instance, passing 12 arguments to
a function and adding 12 parameters to
4:07
a function definition makes it
challenging to track each value.
4:11
In a future course, you'll learn
more efficient ways to pass lots of
4:15
pieces of information to a function
with something called an array,
4:18
as well as an object literal
that holds multiple values.
4:21
For now, keep in mind that passing more
than four or five arguments to a function
4:24
can make your function tedious to use and
harder to read.
4:28