The last fundamental piece of Javascript functions that we have yet to cover is the return keyword.
So this video is going to focus on conceptually what the return key word is.
And then also how do we write functions that use it.
So I like to imagine that functions are a machine.
We write a function and it takes some inputs and those would be the arguments.
And it does something with those inputs does math.
It checks if a user is logged in it adds to a score and then it returns something at the end.
There is an output that it sends back.
So so far functions have only taken inputs and they actually haven't sent anything back.
So I'll show you what I mean if we have a function called Square which we saw in the last lesson and
square took an input.
Let's just call it X and all that we did inside was cancelled the log x times X..
If I run square and I pass in a number like 4 I see the number 16 here.
So it looks like I do have an output what I actually have is something being printed to the console
with console dialog but I don't actually have something that is being returned.
So there's a really big difference.
If I use the return key word it means that I can capture the value that is coming back out of the function
.
Right now I can't capture it.
So a constant log just prints it to the console.
So only a developer would ever see that anyways and I can't use it in any other part of my code.
So let's say I wanted to do something where I had a line that was like four squared is and then I wanted
to put whatever comes back from square four.
So something like this I wanted to put these together.
So four squared is plus square of four.
Right now if I do that it just tells me four squared is undefined.
And that's because nothing is being returned or missing this output.
So even though it print something it doesn't actually last it doesn't send anything out.
So to do that we use the return keyword.
So it's a really simple change.
We're just going to go back and instead of comparable logging I'm just going to write return.
So the return keyword is going to return one thing per function.
We could theoretically have multiple return statements but only the first one is actually going to run
unless we had some sort of if statement where instead of an IF statement we returned one thing and instead
of the Else we returned something else but still only one of those is ever going to actually return
.
So in this case we're returning X times x.
So if I run this now square of four you can see that it shows me 16 but it's slightly different than
before.
The way that it printed 16 you'll see this arrow here and that tells me that it's a return value.
So if I just cancel don't log something on its own like cancel out log for a print number four but right
below you can see there's a return value in constant log actually returns undefined.
So that explains why we've been seeing so many undefined.
If you've been wondering what that is.
I've held off on explaining it until we've gotten to the return keyword.
So every function returns something.
And if we don't explicitly tell it what to return it just returns undefined.
So appear we had our square function and when we would run it it returned undefine even though it printed
16 it still returned undefined.
So to use the value now to capture the output of square square of four if I want to use that somewhere
else I can call back this line that looks like this 4 squared is plus square of 4.
And this is going to run.
It's going to pass for an it's going to multiply X times x 16 and then returned 16.
It's going to send it out of the function and put it right here.
And so we get four squared is 16.
The other thing I can do with the return keyword is save it in a variable so I could do something like
this.
Var result equals square of 104.
And now if I look at results I get ten thousand eight hundred sixteen.
So this function call square of 104 was evaluated that returned 10000 816 which was then stored in result
.
So I have another example of a function that returns something it's called capitalize and it takes in
a string like the word Paris and what it does is it capitalizes the first letter and returns the entire
string with that first letter capitalized.
So Paris turns into Paris with a capital P.
So the whole point of this function is that it alters our original data a little bit so we pass in string
and then we get back a version of the string that has the first letter capitalized.
The logic of how it actually capitalizes the first letter is not what I want to emphasize here.
What I do want to emphasize is this right here I have a variable city which is Paris lowercase P..
And then I'm capitalizing it capitalized city and saving the return value to a new variable.
So this is something we'll do a lot will run a function save the return value to a variable so we can
use it again somewhere else.
So if you are wondering how this function does work the first part takes the first letter.
So the character at index 0 and an upper case is it.
So that would give us upper case P and then string that slice takes a number.
In this case 1.
So that takes everything from index 1 onwards.
A R I guess all lowercase and it smashes that together with the plus sign with the capital P So we're
capitalizing the first letter and then taking everything else that's after the first character and combining
the two and returning that.
So another aspect of the return keyword is that it stops the execution of a function.
So as soon as we return something the function is done.
So the whole point of a function is that it takes some sort of input and then it returns something.
So as soon as it returns that's just the end of the function's execution.
So here's an example.
This is the same capitalized function except with a small difference.
And this is checking if we pass in a number instead of a string which is what this line does if type
of input is equal to number then let's just return that's not a string.
We don't want to bother with any of this.
So this return if we pass and a number will short circuit and this code never runs even though there
is no L statement.
So this code should run.
It actually doesn't run at all because this short circuits it.
If we pass in a number otherwise if we pass in a string like Paris this isn't true.
So this return statement is never run.
And then this return statement is wrong.
So the very last thing that I want to just add on at the end here is that there are two different syntaxes
for declaring a function and the first one is what we've been using.
It's called a function declaration.
So we write function and then the name of our function.
And then we pass in the arguments in and rewrite our function body inside of the two brackets.
There's another way of writing a function called a function expression.
And the way that we do that is we actually write a variable capitalize and we set that equal to a function
.
So these are two ways of defining equivalent functions.
This is a declaration and this is an expression.
So there is one small difference which is if I declare function this way var capitalized equals function
.
If I just decided to change capitalized to be equal to the number 10 or the number 15.
My function is lost.
So I'll show you what I mean.
So I'm going to declare a function var.
Say hi is equal to a function and all the function does is cancelled out log.
Hello.
Just like that.
And so I can call say hi and the exact same way as the function declarations that we've seen.
But I can also decide that say hi is now equal to 34.
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
the class.
We will use declarations and expressions and we'll also talk more about why you would use one over the
other.