- 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
Return a Value from a Function
4:32Functions can also give something back when they finish. This is called "returning a value," and it's common when working with functions. To return a value from a function, use the return keyword, which creates what's called a "return statement."
You're learning that functions are a way
to run several lines of JavaScript code by
0:00
issuing just a single command.
0:04
When you call a function,
0:06
you tell the JavaScript engine to jump to
that function and run the code inside it.
0:07
Remember back when you said,
go to the coffee shop, to your assistant?
0:11
They dashed off to the coffee shop.
0:15
When your assistant returned,
they handed you coffee.
0:17
Well, functions can also give
something back when they finish.
0:20
This is called, returning a value, and
it's common when working with functions.
0:23
For example, let's say you needed
a way to get the current time so
0:28
that you can display it on a web page.
0:32
You could create a function
that gets the current time and
0:34
actually writes it to the page.
0:36
Better yet, you could create
a function that just gets the time and
0:38
gives it back to you.
0:42
That way you can not only write
the return value to the page, but
0:43
you could also use the return
value in other ways,
0:46
like displaying it in an alert box,
or printing it to the console.
0:49
In other words, creating a function
that just does one thing,
0:53
returns the current time,
makes the function flexible enough
0:56
that you can use it in
many different situations.
0:59
To return a value from a function,
you use the return keyword.
1:03
This creates what's called
a return statement.
1:07
When the JavaScript engine, or
1:10
interpreter, encounters
the return keyword,
1:12
it immediately jumps out of the current
function and provides the value to return.
1:14
The value that's returned by the function
can then be used in your program.
1:19
For example, in this case, the return
value is given to the alert function.
1:23
So the message, your coffee is on its way,
appears in an alert dialog box.
1:28
But you could use this return
value in many different ways.
1:31
Print it to the console, or
even save it in a variable.
1:34
Let's look at the alertRandom
function we created earlier and
1:39
see how we can improve it.
1:41
Generating a random number
from one to six is useful.
1:43
You can use it to build a dice-rolling game,
for example.
1:47
But the function we created is limited.
1:49
It generates a random number but
always displays it in an alert box.
1:52
What if we wanted to show
the random number on the page,
1:56
appear on the console, or
store it in a variable?
1:58
We can make this function more useful
by returning the random number only.
2:01
That way we could use it
any way we wanted to.
2:05
I'll show you what I mean by
first removing the alert method
2:07
from the function.
2:10
Next, I'll add a return statement
to return a value from a function.
2:12
You use the return keyword.
2:16
And what do we want to return?
2:18
Well, the value stored in randomNumber.
2:20
So now the function name alertRandom
doesn't make a whole lot of sense,
2:23
because the function no
longer pops up an alert.
2:27
So I'll change it to getRandomNumber,
because that's what it's now doing.
2:29
So now I can use this function anywhere
I want to get a number from one to six.
2:37
For example,
in an alert dialogue like this.
2:42
I can also print it to the console
with the console.log method.
2:58
I can even store the function in
a variable that I can use later.
3:11
For example,
const dieRoll = a call to getRandomNumber.
3:15
And that's right,
3:22
a function call itself can be a value
that gets stored in a variable.
3:23
Creating functions that only return
a value is common in programming.
3:29
For example, you might create a function
that computes the total cost of an item,
3:33
including tax and shipping.
3:37
The function would return that total cost
so that you can use it in other ways,
3:38
like displayed on the web page,
or use it for more calculations.
3:42
Lastly, functions always return a value,
3:47
even when they don't
have a return statement.
3:49
If you don't specify a return value,
the function returns undefined.
3:51
For example, in the console,
3:56
I’ll paste the alertRandom function
we first wrote, then call it.
3:59
When I run this code,
the browser pops up the alert, and
4:07
notice that undefined
displays in the console.
4:10
Undefined is one of
JavaScript's built-in values.
4:13
When returned by a function, it means
that there's no return value specified.
4:16
Now, I'll call the getRandomNumber
function here in the console.
4:22
And this time,
the console inputs a random number value.
4:27