Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Functions!
You have completed JavaScript Functions!
Preview
JavaScript lets you assign default values to your function parameters. That way, if, for any reason, you do not pass a specific argument to a function, the function uses (or falls back to) the default value.
Resources
Code Snippets
function getArea(width, length, unit) {
const area = width * length;
return `${area} ${unit}`;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
JavaScript lets you assign default
values to your function parameters.
0:00
That way if for any reason you do not
pass a certain argument to a function,
0:04
the function uses or
falls back to the default value.
0:08
Open the file default-params.js,
0:12
then update the script tag in index.html
to point to default-params.js.
0:16
Let's first take a look at what happens
when you don't pass an argument
0:24
to a function that requires one.
0:27
I'll define a function named sayGreeting
that takes the parameter name.
0:30
I'm writing this as
a function declaration,
0:36
but you can also write this as an arrow
function expression if you'd like.
0:39
The function should return a greeting
using the value of the name parameter.
0:42
I'll set it to return a string using
a template literal with the message,
0:46
Good morning,
followed by the value of name.
0:50
The function now expects a name
value passed to it as an argument.
0:57
Over in the JavaScript console, let's see
what happens if you call the sayGreeting
1:02
function without passing
it a name argument.
1:07
The console prints Good morning,
undefined!
1:10
Undefined is one of
JavaScript's built-in values.
1:13
In this case,
1:16
it means that there's no value assigned
to the name parameter, it's undefined.
1:17
In some cases, missing a function
argument can break your entire program.
1:21
To prevent any of that from happening,
you can assign a default value to your
1:26
parameters right inside
the function definition.
1:30
Let's assign the name parameter a default
value using the equals sign, or
1:33
the assignment operator, and
set it to the string student.
1:37
I'll save the file, and
back in the console, I'll once again call
1:42
the sayGreeting function without
passing it a name argument.
1:46
This time,
the console prints Good morning, student!
1:49
If you pass the function an argument,
like the string Maria,
1:53
now the value Maria gets assigned
to the name parameter, and
1:59
the function returns the greeting
Good morning, Maria!, good.
2:02
The default parameter
acts as a fallback and
2:05
safeguards your program from breaking or
returning undefined.
2:07
Now let's look at how default values work
when you have multiple parameters in
2:13
your function.
2:17
I want to pass a custom
greeting to the function
2:18
instead of always displaying Good morning!
2:21
So I'll add a greeting parameter
to the function definition,
2:23
then in the return statement,
2:27
replace Good morning with the value that
gets assigned to the greeting parameter.
2:29
I'll save my file, and
over in the console,
2:36
I'll call the sayGreeting function,
passing it a greeting argument only,
2:39
like Hi there,
the function returns Hi there, student!
2:45
All right, now I'll assign a default
value to the greeting parameter,
2:50
I'll set it to Good morning.
2:55
I'll test that this works by calling the
sayGreeting function without passing it
3:01
arguments.
3:06
And it returns Good morning, student!,
the default greeting and name.
3:09
But what if you want to pass
the function a name argument only?
3:14
In other words, skip the greeting
argument to use the default greeting and
3:18
pass it just the name you want to display?
3:22
Well, if you pass
the function a name only, for
3:24
example Guil,
it's going to return Guil, student!
3:27
Since the function's first
parameter is greeting,
3:33
it's assigning the string
Guil to that parameter.
3:36
Now, what if I just omit the argument,
like this?
3:42
This breaks the function.
3:50
JavaScript throws a syntax error,
it says Unexpected token, comma.
3:52
Even if you've assigned a default
value to that first parameter,
3:57
the function expects
you to pass it a value.
4:01
In this case, you need to pass
the function undefined as the value for
4:04
the greeting argument.
4:08
This instructs the JavaScript engine
to use the default value assigned to
4:15
the first parameter.
4:19
It acts as a placeholder for
the argument you want to skip.
4:20
Calling the function now returns
Good morning, Guil!, perfect.
4:23
And keep in mind that you only
need to pass undefined for all but
4:27
the last argument.
4:30
If the last argument is missing,
4:32
the function will use
the default value you set.
4:34
All right, now that you've learned
how to work with default parameters,
4:38
why don't you revisit the getArea
function you wrote earlier and
4:41
assign the unit parameter a default value.
4:46
You can copy this function snippet from
the teacher's notes with this video.
4:49
Let's say that based on where
your site visitors live,
4:52
you'll want your function to display
square feet or square meters.
4:55
If most of your visitors are from the US,
4:59
you'll likely set
the default to square feet.
5:01
On the other hand, if most of
your visitors are from Canada or
5:04
Europe, for example,
you'd set it to square meters.
5:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up