- Introducing Functions in JavaScript 4:08
- Introducing Functions Review 5 questions
- Create and Call a Function 4:57
- Creating a Function 3 objectives
- Return a Value from a Function 4:32
- Return a Value from a Function 3 objectives
- Using Multiple return Statements 6:58
- Function Return Values Review 5 questions
Preview
Video Player
00:00
00:00
Using Multiple return Statements
6:58A function can have more than one return statement, but only ever run one based on a condition.
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