1
00:00:00,840 --> 00:00:06,120
The last fundamental piece of Javascript functions that we have yet to cover is the return keyword.

2
00:00:06,210 --> 00:00:10,260
So this video is going to focus on conceptually what the return key word is.

3
00:00:10,410 --> 00:00:14,260
And then also how do we write functions that use it.

4
00:00:14,310 --> 00:00:17,120
So I like to imagine that functions are a machine.

5
00:00:17,230 --> 00:00:21,920
We write a function and it takes some inputs and those would be the arguments.

6
00:00:22,110 --> 00:00:24,530
And it does something with those inputs does math.

7
00:00:24,660 --> 00:00:29,660
It checks if a user is logged in it adds to a score and then it returns something at the end.

8
00:00:29,690 --> 00:00:32,030
There is an output that it sends back.

9
00:00:32,430 --> 00:00:37,910
So so far functions have only taken inputs and they actually haven't sent anything back.

10
00:00:37,950 --> 00:00:44,960
So I'll show you what I mean if we have a function called Square which we saw in the last lesson and

11
00:00:44,970 --> 00:00:46,700
square took an input.

12
00:00:46,950 --> 00:00:59,710
Let's just call it X and all that we did inside was cancelled the log x times X..

13
00:01:00,120 --> 00:01:09,060
If I run square and I pass in a number like 4 I see the number 16 here.

14
00:01:09,720 --> 00:01:14,970
So it looks like I do have an output what I actually have is something being printed to the console

15
00:01:15,210 --> 00:01:20,140
with console dialog but I don't actually have something that is being returned.

16
00:01:20,310 --> 00:01:22,010
So there's a really big difference.

17
00:01:22,200 --> 00:01:28,080
If I use the return key word it means that I can capture the value that is coming back out of the function

18
00:01:28,080 --> 00:01:28,500
.

19
00:01:28,500 --> 00:01:30,150
Right now I can't capture it.

20
00:01:30,390 --> 00:01:33,110
So a constant log just prints it to the console.

21
00:01:33,270 --> 00:01:39,100
So only a developer would ever see that anyways and I can't use it in any other part of my code.

22
00:01:39,150 --> 00:01:48,960
So let's say I wanted to do something where I had a line that was like four squared is and then I wanted

23
00:01:48,960 --> 00:01:52,320
to put whatever comes back from square four.

24
00:01:52,360 --> 00:01:56,120
So something like this I wanted to put these together.

25
00:01:56,340 --> 00:02:00,620
So four squared is plus square of four.

26
00:02:00,810 --> 00:02:06,030
Right now if I do that it just tells me four squared is undefined.

27
00:02:06,030 --> 00:02:09,790
And that's because nothing is being returned or missing this output.

28
00:02:10,050 --> 00:02:15,460
So even though it print something it doesn't actually last it doesn't send anything out.

29
00:02:15,480 --> 00:02:18,130
So to do that we use the return keyword.

30
00:02:18,180 --> 00:02:20,200
So it's a really simple change.

31
00:02:20,220 --> 00:02:26,980
We're just going to go back and instead of comparable logging I'm just going to write return.

32
00:02:27,480 --> 00:02:31,690
So the return keyword is going to return one thing per function.

33
00:02:31,800 --> 00:02:37,310
We could theoretically have multiple return statements but only the first one is actually going to run

34
00:02:37,980 --> 00:02:43,260
unless we had some sort of if statement where instead of an IF statement we returned one thing and instead

35
00:02:43,260 --> 00:02:48,180
of the Else we returned something else but still only one of those is ever going to actually return

36
00:02:48,190 --> 00:02:48,530
.

37
00:02:48,870 --> 00:02:52,750
So in this case we're returning X times x.

38
00:02:52,860 --> 00:03:03,720
So if I run this now square of four you can see that it shows me 16 but it's slightly different than

39
00:03:03,720 --> 00:03:04,430
before.

40
00:03:04,440 --> 00:03:10,240
The way that it printed 16 you'll see this arrow here and that tells me that it's a return value.

41
00:03:10,500 --> 00:03:17,850
So if I just cancel don't log something on its own like cancel out log for a print number four but right

42
00:03:17,850 --> 00:03:23,400
below you can see there's a return value in constant log actually returns undefined.

43
00:03:23,610 --> 00:03:26,580
So that explains why we've been seeing so many undefined.

44
00:03:26,580 --> 00:03:28,200
If you've been wondering what that is.

45
00:03:28,200 --> 00:03:31,480
I've held off on explaining it until we've gotten to the return keyword.

46
00:03:31,560 --> 00:03:33,730
So every function returns something.

47
00:03:33,890 --> 00:03:38,490
And if we don't explicitly tell it what to return it just returns undefined.

48
00:03:38,490 --> 00:03:45,300
So appear we had our square function and when we would run it it returned undefine even though it printed

49
00:03:45,300 --> 00:03:48,990
16 it still returned undefined.

50
00:03:49,050 --> 00:03:57,030
So to use the value now to capture the output of square square of four if I want to use that somewhere

51
00:03:57,030 --> 00:04:03,910
else I can call back this line that looks like this 4 squared is plus square of 4.

52
00:04:04,140 --> 00:04:05,470
And this is going to run.

53
00:04:05,660 --> 00:04:11,760
It's going to pass for an it's going to multiply X times x 16 and then returned 16.

54
00:04:11,760 --> 00:04:16,170
It's going to send it out of the function and put it right here.

55
00:04:16,320 --> 00:04:20,370
And so we get four squared is 16.

56
00:04:20,370 --> 00:04:24,840
The other thing I can do with the return keyword is save it in a variable so I could do something like

57
00:04:24,840 --> 00:04:25,510
this.

58
00:04:25,740 --> 00:04:31,440
Var result equals square of 104.

59
00:04:32,360 --> 00:04:37,800
And now if I look at results I get ten thousand eight hundred sixteen.

60
00:04:37,800 --> 00:04:47,400
So this function call square of 104 was evaluated that returned 10000 816 which was then stored in result

61
00:04:47,410 --> 00:04:49,330
.

62
00:04:51,300 --> 00:04:57,120
So I have another example of a function that returns something it's called capitalize and it takes in

63
00:04:57,120 --> 00:05:04,440
a string like the word Paris and what it does is it capitalizes the first letter and returns the entire

64
00:05:04,440 --> 00:05:06,670
string with that first letter capitalized.

65
00:05:06,810 --> 00:05:11,150
So Paris turns into Paris with a capital P.

66
00:05:11,330 --> 00:05:17,010
So the whole point of this function is that it alters our original data a little bit so we pass in string

67
00:05:17,340 --> 00:05:22,540
and then we get back a version of the string that has the first letter capitalized.

68
00:05:22,830 --> 00:05:27,450
The logic of how it actually capitalizes the first letter is not what I want to emphasize here.

69
00:05:27,540 --> 00:05:34,840
What I do want to emphasize is this right here I have a variable city which is Paris lowercase P..

70
00:05:35,280 --> 00:05:42,080
And then I'm capitalizing it capitalized city and saving the return value to a new variable.

71
00:05:42,090 --> 00:05:47,850
So this is something we'll do a lot will run a function save the return value to a variable so we can

72
00:05:47,850 --> 00:05:50,010
use it again somewhere else.

73
00:05:50,010 --> 00:05:55,050
So if you are wondering how this function does work the first part takes the first letter.

74
00:05:55,080 --> 00:05:58,450
So the character at index 0 and an upper case is it.

75
00:05:58,590 --> 00:06:04,320
So that would give us upper case P and then string that slice takes a number.

76
00:06:04,380 --> 00:06:05,800
In this case 1.

77
00:06:06,300 --> 00:06:09,530
So that takes everything from index 1 onwards.

78
00:06:10,080 --> 00:06:16,200
A R I guess all lowercase and it smashes that together with the plus sign with the capital P So we're

79
00:06:16,200 --> 00:06:21,360
capitalizing the first letter and then taking everything else that's after the first character and combining

80
00:06:21,360 --> 00:06:23,610
the two and returning that.

81
00:06:24,360 --> 00:06:29,230
So another aspect of the return keyword is that it stops the execution of a function.

82
00:06:29,610 --> 00:06:32,900
So as soon as we return something the function is done.

83
00:06:33,240 --> 00:06:37,700
So the whole point of a function is that it takes some sort of input and then it returns something.

84
00:06:37,710 --> 00:06:41,440
So as soon as it returns that's just the end of the function's execution.

85
00:06:41,640 --> 00:06:43,080
So here's an example.

86
00:06:43,110 --> 00:06:47,450
This is the same capitalized function except with a small difference.

87
00:06:47,460 --> 00:06:54,100
And this is checking if we pass in a number instead of a string which is what this line does if type

88
00:06:54,100 --> 00:07:00,020
of input is equal to number then let's just return that's not a string.

89
00:07:00,210 --> 00:07:02,260
We don't want to bother with any of this.

90
00:07:02,340 --> 00:07:08,640
So this return if we pass and a number will short circuit and this code never runs even though there

91
00:07:08,640 --> 00:07:09,990
is no L statement.

92
00:07:10,140 --> 00:07:11,960
So this code should run.

93
00:07:12,000 --> 00:07:15,450
It actually doesn't run at all because this short circuits it.

94
00:07:15,480 --> 00:07:20,690
If we pass in a number otherwise if we pass in a string like Paris this isn't true.

95
00:07:20,760 --> 00:07:22,620
So this return statement is never run.

96
00:07:22,830 --> 00:07:24,990
And then this return statement is wrong.

97
00:07:26,040 --> 00:07:31,170
So the very last thing that I want to just add on at the end here is that there are two different syntaxes

98
00:07:31,380 --> 00:07:35,330
for declaring a function and the first one is what we've been using.

99
00:07:35,340 --> 00:07:37,410
It's called a function declaration.

100
00:07:37,980 --> 00:07:41,060
So we write function and then the name of our function.

101
00:07:41,280 --> 00:07:47,220
And then we pass in the arguments in and rewrite our function body inside of the two brackets.

102
00:07:47,250 --> 00:07:50,660
There's another way of writing a function called a function expression.

103
00:07:51,000 --> 00:07:58,560
And the way that we do that is we actually write a variable capitalize and we set that equal to a function

104
00:07:58,570 --> 00:07:59,110
.

105
00:07:59,640 --> 00:08:02,970
So these are two ways of defining equivalent functions.

106
00:08:02,970 --> 00:08:05,980
This is a declaration and this is an expression.

107
00:08:06,270 --> 00:08:13,260
So there is one small difference which is if I declare function this way var capitalized equals function

108
00:08:13,270 --> 00:08:13,580
.

109
00:08:13,890 --> 00:08:19,970
If I just decided to change capitalized to be equal to the number 10 or the number 15.

110
00:08:20,100 --> 00:08:21,720
My function is lost.

111
00:08:22,200 --> 00:08:24,000
So I'll show you what I mean.

112
00:08:24,840 --> 00:08:27,260
So I'm going to declare a function var.

113
00:08:27,300 --> 00:08:36,430
Say hi is equal to a function and all the function does is cancelled out log.

114
00:08:37,180 --> 00:08:38,240
Hello.

115
00:08:38,640 --> 00:08:40,350
Just like that.

116
00:08:40,990 --> 00:08:47,550
And so I can call say hi and the exact same way as the function declarations that we've seen.

117
00:08:47,910 --> 00:08:54,790
But I can also decide that say hi is now equal to 34.

118
00:08:54,880 --> 00:09:03,690
Now if I refer to say hi I can't evaluate it I can't run it as a function anymore as we progress to

119
00:09:03,690 --> 00:09:04,350
the class.

120
00:09:04,380 --> 00:09:09,510
We will use declarations and expressions and we'll also talk more about why you would use one over the

121
00:09:09,510 --> 00:09:10,620
other.