- 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
Create and Call a Function
4:57Now that you've learned the basics of functions, it's time to create and call a function.
Now that you've learned the basics of
functions, it's time to create a function.
0:00
You can code along with me by launching
the workspace with this video.
0:04
Open the file named random.js,
located inside the js folder.
0:07
This file is already linked to index.HTML.
0:12
You'll see that the file already
has a single line of code.
0:15
You've seen this code before, in
a previous course on JavaScript numbers.
0:18
This code creates a random
number from 1 to 6, and
0:22
stores it in a variable
named randomNumber.
0:26
Functions are just about
everywhere in JavaScript.
0:30
In fact,
we've used lots of functions so far.
0:33
For instance, notice the parentheses
after Math.floor and Math.random.
0:35
Math.floor and
Math.random are also functions.
0:40
They're functions that are built
into the JavaScript language.
0:43
You can also create your own functions,
to perform just about any task you want.
0:46
In this case, let's create a function
that displays an alert dialog box,
0:51
with a new random number in
it each time it's called.
0:55
First, create a function
named alertRandom,
0:58
with function alertRandom,
1:03
followed by a set of parentheses,
and a set of curly braces.
1:06
I'm writing the function at
the top of my random.js file.
1:12
It's common for programmers to place
functions at the top of the file.
1:15
Remember, the code in the function
does not run immediately.
1:19
JavaScript creates a space in memory
to save the function definition, and
1:22
assign it to the name alertRandom.
1:27
Similar to the assistant memorizing
the directions to the coffee shop.
1:29
I want to create a new random number,
each time I call this function.
1:33
So next, I'll move the random
number-generating code into the function.
1:37
And just as with conditional statements,
1:42
you should indent any code
inside your function.
1:44
This makes it easier to see that
the code belongs to the function.
1:46
Lastly, I'll display the random
number using the alert method.
1:50
And look, more parentheses,
1:54
which means that alert is also
a built-in JavaScript function.
1:57
So now, I have a small collection of code
that does something, it has a function.
2:01
I'll save this file, and
preview the workspace in the browser.
2:07
Notice that nothing happens yet, but
something did happen behind the scenes.
2:10
The browser read the function into memory,
and
2:16
it's now prepared to act on its
instructions, as soon as it's called.
2:18
It isn't until you call
the function that its code runs.
2:22
So in my JavaScript file,
2:26
I'll call the alertRandom function just
below the function definition, like this.
2:28
I'll save the file, and when I refresh
the browser, a random number pops up.
2:35
What's great about a function is that you
can use it over, and over, and over again.
2:41
To run a function, call it.
2:45
For example,
I'll call alertRandom three more times.
2:47
In the browser, I get one random number,
two random numbers,
2:53
three random numbers,
and four random numbers.
2:58
So just one short line of code,
where I call the function,
3:02
triggers the browser to run
multiple lines of code.
3:05
Now, imagine that you have a function
with 50 lines of JavaScript.
3:09
Calling that function,
using a single short command,
3:13
will run 50 lines of JavaScript.
3:16
JavaScript functions are an invaluable
tool in your programming tool kit.
3:18
As you've learned,
they let you run two, ten, a dozen, or
3:22
hundreds of lines of programming
by typing a single line of code.
3:26
You'll use them constantly in JavaScript,
to make your programs more modular and
3:29
easier to update.
3:34
Functions also change
the flow of your programs.
3:35
For example,
the JavaScript programs you've written so
3:38
far start at the top of a file, and
run line-by-line to the end of the file.
3:42
You learned in an earlier course that
conditional statements can change the flow
3:46
by doing some things based
on one condition, or
3:51
other things based on another condition.
3:53
But even then, the program still ran
from the top to the bottom of the file.
3:55
It's just that the flow is sometimes
diverted to different paths.
3:59
Functions, however,
break that top-to-bottom flow.
4:03
For example, if you look at how
the alertRandom function operates,
4:07
you'll see that the JavaScript
engine constantly jumps around.
4:10
Each time you call the function, the
JavaScript engine jumps into the function,
4:14
runs the function's code,
4:18
then returns to the spot in the program
where the function was called.
4:20
In fact, in this code, there are built-in
JavaScript functions at work, Math.floor,
4:23
Math.random, and alert.
4:28
So when each of those are called,
4:29
the JavaScript engine has to jump
into them and execute their code,
4:31
then return to the spot it left off
within the alertRandom function.
4:35
You'll often need to perform a similar
action in many places in your program.
4:39
As you become a more advanced programmer,
you'll write lots of functions to
4:43
efficiently run code that you
want to repeat again and again,
4:47
without having to type
the same code multiple times.
4:50
Up next, we'll dig deeper into
how to write and use functions.
4:53