"Interactive Web Pages with JavaScript" was retired on March 17, 2017. You are now viewing the recommended replacement.
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
A function can have more than one return statement, but only ever run one based on a condition.
Resources
Code Snippet
function noAlert() {
return 5;
alert("This won't appear");
}
noAlert();
alert("This will appear");
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
When you call a function, the JavaScript
engine jumps into the function, and
0:00
goes through each of the steps
defined inside its curly braces.
0:04
Until it reaches the end, or is instructed
to stop with a return statement.
0:08
A function can have more
than one return statement.
0:12
For instance, you might create a function
that checks if a form field is empty.
0:15
In this case, the function could
return either true or false.
0:19
The function might check the field,
then return just the value true,
0:23
if the form field hasn't been
filled out by a user, and is empty.
0:27
Or it could return false,
if the user did enter something.
0:31
You can then use that return
value to perform another action,
0:34
like display an error message, or
prevent the form from being submitted.
0:38
Let me show you one example with code.
0:41
In your js folder,
open the file named multiple-returns.js.
0:44
In index.html, update the script tag's src
0:49
attribute to js/multiple-returns.js.
0:54
In the JavaScript file,
create a function named isFieldEmpty.
1:04
This function will check
if a form field for
1:10
collecting a visitor's
information is empty.
1:13
In index.html, there's an input
element inside the main tags,
1:16
that's commented out.
1:20
For this example, uncomment this code, so
1:21
that we're able to interact
with it using JavaScript.
1:23
The input element's id
attribute is set to info, so
1:26
you can select this element
with JavaScript, using this ID.
1:29
I'll save index.html, and
back in my JavaScript file,
1:33
I'll first access the form
field inside the function, and
1:38
store it in a variable named field,
with const field = document.querySelector.
1:44
And I'll pass document.querySelector
the string #info.
1:53
So this code accesses an element on
the web page with an ID of info,
1:58
and stores a reference to that
element in a variable named field.
2:03
You've worked with document.querySelector
in a previous course.
2:08
But don't worry too much about
how this code works, right now.
2:11
You'll learn how to access elements
in a web page, like a form field,
2:13
in a later course.
2:17
Once I have the field, I can test the
value of it using a conditional statement.
2:18
I'll start with, if field.value strictly
2:22
equals an empty string, return true.
2:28
This tests the value of the field.
2:38
In this case, I'm checking if
the value is equal to an empty string.
2:39
In other words, is the field empty?
2:44
If the field is empty,
then the function returns true.
2:47
I can also an else clause to
return a different value.
2:51
So now the function has
two return statements,
3:00
but remember that a conditional
statement only follows one path.
3:03
This function won't return both true and
false.
3:07
It will only ever run one
of these return statements.
3:10
Either true, if the field is empty,
or false, if it has something in it.
3:14
I'll finish the programming for this by
creating a variable named fieldTest to
3:21
hold the return value from the function,
either true or false,
3:26
Then use a conditional statement
to see if the field is empty,
3:32
with if fieldTest strictly equals true.
3:39
If it's empty, I can, for example,
pop up an alert that says,
3:44
please provide your information.
3:49
I can test that this works by
going back to my index.html file,
4:02
and adding a value attribute
to the input element.
4:07
I'll set the value of
the input field to My info.
4:10
I'll save index.html,
and over in the browser,
4:15
since the input field is not empty,
it has a value, nothing happens.
4:19
However, if I remove the value
attribute from the input element,
4:24
now it's an empty field.
4:29
So an alert dialog pops up with a message,
please provide your information.
4:31
We can also simplify each condition.
4:37
You know that all conditions
evaluate to either true or false.
4:40
The test condition produces
a Boolean value, so
4:44
we don't need to use the strict
equality operator in our conditions.
4:47
For example, we can check if the value of
the field is empty using the logical NOT
4:51
operator, like this This checks if
the field does not have a value.
4:56
Also, since the value of
fieldTest is either true or
5:05
false, we can check its value like so.
5:09
If fieldTest is true,
the alert will pop up.
5:12
If it's false, nothing will happen.
5:16
I'll save my file, refresh the page, and
everything should work just as before.
5:18
Good, there are a few details to remember
about the JavaScript return statement.
5:29
When a return statement runs,
5:35
it causes the JavaScript engine
to exit the function immediately.
5:37
In other words, the return statement
should be the last line of code that you
5:42
want to run in a function.
5:45
For example,
over in the JavaScript console,
5:49
let's follow the flow of some code.
5:52
First, the JavaScript engine memorizes
the steps in the noAlert function.
5:55
Then, when we call the function,
the program flow jumps into the function.
6:01
When the return statement is encountered,
the function returns the number 5,
6:06
and the last line in
the function never runs.
6:11
Instead, control gets passed
back to the main program.
6:14
But notice that when I run the code again,
6:18
this time adding an alert following
the noAlert function call,
6:21
the alert outside of the function
is the only one that runs.
6:25
In addition, the return statement
can only return a single value.
6:34
That is, you can only return one thing,
a string, a number, a Boolean value, or
6:38
the contents of a variable.
6:43
Just keep in mind that you can't
return multiple items at once.
6:45
Just like you're able to get
information back from a function,
6:48
you can pass information into a function,
to change how that function works.
6:51
I'll teach you how in the next stage.
6:55
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