Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Functions!
You have completed JavaScript Functions!
Preview
Now that you've learned the basics of functions, it's time to create and call a function.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up