1
00:00:00,423 --> 00:00:04,856
When you call a function, the JavaScript
engine jumps into the function, and

2
00:00:04,856 --> 00:00:08,494
goes through each of the steps
defined inside its curly braces.

3
00:00:08,494 --> 00:00:12,891
Until it reaches the end, or is instructed
to stop with a return statement.

4
00:00:12,891 --> 00:00:15,535
A function can have more
than one return statement.

5
00:00:15,535 --> 00:00:19,915
For instance, you might create a function
that checks if a form field is empty.

6
00:00:19,915 --> 00:00:23,966
In this case, the function could
return either true or false.

7
00:00:23,966 --> 00:00:27,752
The function might check the field,
then return just the value true,

8
00:00:27,752 --> 00:00:31,297
if the form field hasn't been
filled out by a user, and is empty.

9
00:00:31,297 --> 00:00:34,963
Or it could return false,
if the user did enter something.

10
00:00:34,963 --> 00:00:38,090
You can then use that return
value to perform another action,

11
00:00:38,090 --> 00:00:41,895
like display an error message, or
prevent the form from being submitted.

12
00:00:41,895 --> 00:00:44,040
Let me show you one example with code.

13
00:00:44,040 --> 00:00:49,601
In your js folder,
open the file named multiple-returns.js.

14
00:00:49,601 --> 00:00:54,155
In index.html, update the script tag's src

15
00:00:54,155 --> 00:00:58,598
attribute to js/multiple-returns.js.

16
00:01:04,846 --> 00:01:10,312
In the JavaScript file,
create a function named isFieldEmpty.

17
00:01:10,312 --> 00:01:13,003
This function will check
if a form field for

18
00:01:13,003 --> 00:01:16,081
collecting a visitor's
information is empty.

19
00:01:16,081 --> 00:01:20,088
In index.html, there's an input
element inside the main tags,

20
00:01:20,088 --> 00:01:21,598
that's commented out.

21
00:01:21,598 --> 00:01:23,661
For this example, uncomment this code, so

22
00:01:23,661 --> 00:01:26,294
that we're able to interact
with it using JavaScript.

23
00:01:26,294 --> 00:01:29,803
The input element's id
attribute is set to info, so

24
00:01:29,803 --> 00:01:33,970
you can select this element
with JavaScript, using this ID.

25
00:01:33,970 --> 00:01:38,955
I'll save index.html, and
back in my JavaScript file,

26
00:01:38,955 --> 00:01:44,043
I'll first access the form
field inside the function, and

27
00:01:44,043 --> 00:01:51,286
store it in a variable named field,
with const field = document.querySelector.

28
00:01:53,112 --> 00:01:58,873
And I'll pass document.querySelector
the string #info.

29
00:01:58,873 --> 00:02:03,640
So this code accesses an element on
the web page with an ID of info,

30
00:02:03,640 --> 00:02:08,416
and stores a reference to that
element in a variable named field.

31
00:02:08,416 --> 00:02:11,444
You've worked with document.querySelector
in a previous course.

32
00:02:11,444 --> 00:02:13,807
But don't worry too much about
how this code works, right now.

33
00:02:13,807 --> 00:02:17,262
You'll learn how to access elements
in a web page, like a form field,

34
00:02:17,262 --> 00:02:18,208
in a later course.

35
00:02:18,208 --> 00:02:22,903
Once I have the field, I can test the
value of it using a conditional statement.

36
00:02:22,903 --> 00:02:28,359
I'll start with, if field.value strictly

37
00:02:28,359 --> 00:02:33,101
equals an empty string, return true.

38
00:02:38,025 --> 00:02:39,809
This tests the value of the field.

39
00:02:39,809 --> 00:02:44,973
In this case, I'm checking if
the value is equal to an empty string.

40
00:02:44,973 --> 00:02:47,351
In other words, is the field empty?

41
00:02:47,351 --> 00:02:51,612
If the field is empty,
then the function returns true.

42
00:02:51,612 --> 00:02:54,415
I can also an else clause to
return a different value.

43
00:03:00,496 --> 00:03:03,260
So now the function has
two return statements,

44
00:03:03,260 --> 00:03:07,140
but remember that a conditional
statement only follows one path.

45
00:03:07,140 --> 00:03:10,568
This function won't return both true and
false.

46
00:03:10,568 --> 00:03:14,446
It will only ever run one
of these return statements.

47
00:03:14,446 --> 00:03:21,143
Either true, if the field is empty,
or false, if it has something in it.

48
00:03:21,143 --> 00:03:26,034
I'll finish the programming for this by
creating a variable named fieldTest to

49
00:03:26,034 --> 00:03:29,984
hold the return value from the function,
either true or false,

50
00:03:32,247 --> 00:03:39,855
Then use a conditional statement
to see if the field is empty,

51
00:03:39,855 --> 00:03:44,988
with if fieldTest strictly equals true.

52
00:03:44,988 --> 00:03:49,447
If it's empty, I can, for example,
pop up an alert that says,

53
00:03:49,447 --> 00:03:51,937
please provide your information.

54
00:04:02,531 --> 00:04:07,090
I can test that this works by
going back to my index.html file,

55
00:04:07,090 --> 00:04:10,801
and adding a value attribute
to the input element.

56
00:04:10,801 --> 00:04:15,981
I'll set the value of
the input field to My info.

57
00:04:15,981 --> 00:04:19,470
I'll save index.html,
and over in the browser,

58
00:04:19,470 --> 00:04:24,269
since the input field is not empty,
it has a value, nothing happens.

59
00:04:24,269 --> 00:04:29,533
However, if I remove the value
attribute from the input element,

60
00:04:29,533 --> 00:04:31,603
now it's an empty field.

61
00:04:31,603 --> 00:04:35,429
So an alert dialog pops up with a message,
please provide your information.

62
00:04:37,645 --> 00:04:40,831
We can also simplify each condition.

63
00:04:40,831 --> 00:04:44,885
You know that all conditions
evaluate to either true or false.

64
00:04:44,885 --> 00:04:47,605
The test condition produces
a Boolean value, so

65
00:04:47,605 --> 00:04:51,531
we don't need to use the strict
equality operator in our conditions.

66
00:04:51,531 --> 00:04:56,739
For example, we can check if the value of
the field is empty using the logical NOT

67
00:04:56,739 --> 00:05:05,104
operator, like this This checks if
the field does not have a value.

68
00:05:05,104 --> 00:05:09,577
Also, since the value of
fieldTest is either true or

69
00:05:09,577 --> 00:05:12,941
false, we can check its value like so.

70
00:05:12,941 --> 00:05:16,623
If fieldTest is true,
the alert will pop up.

71
00:05:16,623 --> 00:05:18,607
If it's false, nothing will happen.

72
00:05:18,607 --> 00:05:23,444
I'll save my file, refresh the page, and
everything should work just as before.

73
00:05:29,984 --> 00:05:35,892
Good, there are a few details to remember
about the JavaScript return statement.

74
00:05:35,892 --> 00:05:37,810
When a return statement runs,

75
00:05:37,810 --> 00:05:42,033
it causes the JavaScript engine
to exit the function immediately.

76
00:05:42,033 --> 00:05:45,591
In other words, the return statement
should be the last line of code that you

77
00:05:45,591 --> 00:05:46,824
want to run in a function.

78
00:05:49,716 --> 00:05:52,787
For example,
over in the JavaScript console,

79
00:05:52,787 --> 00:05:55,178
let's follow the flow of some code.

80
00:05:55,178 --> 00:06:01,420
First, the JavaScript engine memorizes
the steps in the noAlert function.

81
00:06:01,420 --> 00:06:06,318
Then, when we call the function,
the program flow jumps into the function.

82
00:06:06,318 --> 00:06:11,558
When the return statement is encountered,
the function returns the number 5,

83
00:06:11,558 --> 00:06:14,496
and the last line in
the function never runs.

84
00:06:14,496 --> 00:06:18,576
Instead, control gets passed
back to the main program.

85
00:06:18,576 --> 00:06:21,111
But notice that when I run the code again,

86
00:06:21,111 --> 00:06:25,026
this time adding an alert following
the noAlert function call,

87
00:06:25,026 --> 00:06:28,665
the alert outside of the function
is the only one that runs.

88
00:06:34,101 --> 00:06:38,518
In addition, the return statement
can only return a single value.

89
00:06:38,518 --> 00:06:43,396
That is, you can only return one thing,
a string, a number, a Boolean value, or

90
00:06:43,396 --> 00:06:45,118
the contents of a variable.

91
00:06:45,118 --> 00:06:48,757
Just keep in mind that you can't
return multiple items at once.

92
00:06:48,757 --> 00:06:51,999
Just like you're able to get
information back from a function,

93
00:06:51,999 --> 00:06:55,972
you can pass information into a function,
to change how that function works.

94
00:06:55,972 --> 00:06:57,420
I'll teach you how in the next stage.