Function Return Values

[00:00:00]
>> Let's talk about return values. So we saw this return keyword. This creates a return statement. So when I say return some expression, semi-colon, I'm saying, hey JavaScript, make this the value that this expression evaluates to once you've received the given arguments and mapped them to the parameters that I told you about.

[00:00:23]
Make that value the output of this function, the thing that the function gives back. And so that means that we can capture that value by, for example, as we've seen a couple of times, assigning it to a variable. So in this example, our function square it takes one parameter, named x, and it returns the value of the expression that we get when we use the star operator on x and x.

[00:00:52]
So we expect square of 3 to be 3 times 3, which is 9. Yeah, question.
>> Would it be different than l console.log, x times x would it be the same result there?
>> Great question, let us find out. So I think the question is if we have this function square, and let's use our original example square here, which says return x times x.

[00:01:18]
And then we do const 9 = square(3), and we asked for 9, we have the number 9, yeah? Okay, now, Let's find out what happens if we make a new function. I'm gonna call it, confusingly because of math terms, log square, which is going to instead of returning, it's going to console.log x times x.

[00:01:52]
Is this what you meant? Okay, so now if I call logSquare in the console on 3, I'm gonna see the value 9 print out. But what happens if I do const logNine, let's say, is logSquare(3). What happened essentially in this case is a good question. So, let us see what happens when we have a function like this, a function that doesn't return anything, of which our logSquare is another example.

[00:02:27]
So, here we have a similar one, it's called, sayHello, it takes in a name and it logs out, Hi, plus name, plus exclamation point. So if I say, sayHello(Marc), I'm going to expect to hear, Hi, Marc. Anybody see The Room? No, it's movie reference, whatever. Now, the question is, what is gonna happen to that value?

[00:02:50]
So let's find out in our logSquare example, very similar function. All right, so we printed out 9 to the console as expected. What is the value of log 9 gonna be, do you think? Any guesses? Let's find out.
>> Undefined.
>> Log 9 is undefined.
>> Because we never passed in the parameter.

[00:03:12]
>> Because we never, sorry?
>> Because we never pass in the parameter for logSquare.
>> So it's not so much about the parameter cuz actually logSquare had actually the very same parameters as square. The difference is the missing return statement. So every function in JavaScript returns something. There is gonna be some value that this function, when I call it, logSquare(3), is going to evaluate to a value.

[00:03:48]
And that value is gonna be whatever the function returned. And so, in this case, I didn't have a return statement. I did some other stuff, like console log was doing other stuff, but it didn't have a return statement. And in JavaScript, when we don't have a return statement, we get undefined as the return value of the function.

[00:04:14]
So it's essentially like JavaScript always has a kind of default return undefined in every function unless you specify what function it should return. Or, excuse me, unless you specify what value it should return using the return keyword. So in this case, logSquare(3), it printed 9 to the console, but it returned undefined, because we never used that return keyword.

[00:04:43]
So the value of logNine is whatever the value that the logSquare(3) evaluates to, which is the return value of the function, which in this case is undefined. Now what we could do is, let's say have a logAndReturnSquare function, where we first log the square, And then return the square, for example.

[00:05:16]
So if we now say, result is logAndReturnSquare[3], what do we expect is gonna happen?
>> 9.
>> Any guesses?
>> It's gonna be 9.
>> Go ahead.
>> Our result's gonna be 9.
>> So result is gonna be 9, and is anything else gonna happen?
>> Print 9.

[00:05:39]
>> And it's also gonna print 9, let's find out. So here we have result of, sorry, we have 9 got printed. Now, we do see an undefined here, which is confusing because that is gonna be the value of this whole statement, which doesn't have a value in JavaScript.

[00:05:56]
But if I ask for result, it did indeed capture the return value of 9. Okay, so if you want your function to give you a value that you can use later, you wanna a return statement. That doesn't mean that there aren't useful functions. And in fact, we're gonna do some that don't have a return statement, because sometimes we actually want the function to do other stuff then give us back a value.

[00:06:23]
Maybe we wanna log things to the console, maybe we wanna change something on the HTML DOM, right? So there are plenty of cases where you're gonna have functions without return statements, and anytime that you don't have a return statement, the implicit return value is undefined. I have one more question for you.

[00:06:43]
What if I had a function returnAndLogSquare, which looks similar to our earlier one but with the lines reversed? So here we're gonna have a return x times x and then console.log x times x. Yeah, okay, what happens if I try to create that function, the browser's already giving me a warning that there is unreachable code.

[00:07:14]
And if we were to try to capture returnAndLogSquare(3) as a value called attempt. Notice what didn't happen when I called that function, returnAndLogSquare, we didn't see our 9 print out, Like we did before. Now, in this case, we're seeing a 9 because that is the value returned, which was the value that we got in attempt.

[00:07:47]
But we didn't see two 9s, which is what we had before in logAnd, where'd it go, logAndReturnSquare, where we had a 9 and then the return value is was not given. So, this warning, unreachable code after return statement, is because essentially JavaScript stops running your code inside of the function body once it hits that return statement.

[00:08:12]
So this line, console.log, here, is never gonna run. JavaScript doesn't really complain when you declare the function. Here my browser is trying to help me out a little bit. It's like, hey, warning, you're doing something you probably don't wanna do. But it's valid JavaScript, it's not throwing an error.

[00:08:31]
Yeah, question.
>> We have people in the chat saying that the return statement exits the function.
>> Exactly, that's another way of saying, yeah exactly, that's another way of saying that the return statement tells JavaScript, hey, we're done with this function, get out of here. Send out this value, this return value, and then get out of here, exit the function, great point.