Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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