- 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
Introducing Functions in JavaScript
4:08Build your JavaScript skills by learning another fundamental building block in JavaScript: functions. Functions are at the heart of how JavaScript (or any programming language) works. At its simplest, a function is a set of instructions that you want to run over and over again.
[MUSIC]
0:00
Hi everyone, Guil here, a developer and
JavaScript instructor at Treehouse.
0:09
I'm happy that you've joined me here to
continue your JavaScript learning journey.
0:13
So far, you've explored many
of the key concepts and
0:17
features of the JavaScript language.
0:19
You're getting more familiar with the
syntax, as well as working with variables
0:22
built in data types and objects and
conditional statements.
0:26
In this course, you'll continue to build
your JavaScript skills by learning another
0:29
fundamental building block in JavaScript,
functions.
0:32
Functions are at the heart
of how JavaScript or
0:36
any programming language works.
0:38
At its simplest, a function is a set of
instructions that you want to run over and
0:40
over again.
0:44
For example, imagine that one magical
morning an assistant showed up
0:46
to take care of some of the tasks
that take up extra time in your day.
0:50
One of those tasks is getting coffee
from your favorite coffee shop
0:54
that's a few blocks away.
0:57
It's your assistant's first day, so you
provide them detailed instructions on how
0:59
to get to the coffee shop and
what drink to order.
1:03
Keep in mind that your assistant
doesn't actually get you anything yet.
1:06
They just keep the instructions in memory.
1:09
A little bit later in the day, at around
the time you usually go out to get coffee,
1:12
you say to your assistant
go to the coffee shop and
1:16
your assistant very kindly
goes off to get your coffee.
1:19
Since you already gave your
assistant instructions earlier,
1:23
you don't have to tell them how to get to
the coffee shop or even what to order.
1:27
From then on, anytime you want coffee you
can just say go to the coffee shop and
1:31
your assistant returns with your drink.
1:35
In fact, you can say go to the coffee
shop over and over again and
1:37
each time you'll get a new cup of coffee.
1:41
Later that day, you might even provide
your assistant different sets of
1:43
instructions for, say, doing the laundry,
washing dishes, or feeding the cat.
1:46
To get a test done, you just call
out a command like do the laundry.
1:50
Okay, now let's get back to reality.
1:54
JavaScript functions work
in much the same way.
1:56
They let you group
a series of statements or
1:59
instructions together to perform
a specific task needed by the program.
2:01
Let's get into how they work.
2:06
You start by declaring the function,
2:08
that's like you providing
instructions to your assistant.
2:10
In JavaScript you use the function
keyword, followed by a name for
2:13
the function, a pair of parentheses,
and a pair of curly braces.
2:17
You can name your functions whatever you'd
like as long as you follow the same rules
2:21
for naming variables.
2:25
For example, function names can only
be made up of letters, numbers,
2:27
the underscore, and dollar sign
characters, but they can't start with
2:31
a number and you can't use spaces or
other punctuation in the name.
2:34
Following the name,
you place a set of parentheses.
2:39
This is one way you can
identify functions.
2:41
Whenever you see parenthesis
following a name,
2:44
you know you're dealing with a function.
2:46
After the parentheses comes a pair of
curly braces which form a code block.
2:48
You learned about code blocks in an
earlier course when you wrote conditional
2:53
statements.
2:56
For instance, in a conditional statement,
2:57
you use curly braces to create a block of
code that runs when a condition is true.
2:59
Also, like a conditional statement,
3:04
there's no semicolon
after the final brace.
3:06
Now don't worry about the details.
3:08
Just remember to leave off
a semicolon after the final brace.
3:09
In a function, the JavaScript you
place inside the curly braces
3:13
runs whenever the program
activates the function.
3:16
To activate the programming inside
a function you call the function,
3:19
which is just like you saying go to
the coffee shop to your assistant.
3:23
To call a function and
run the code inside of it,
3:27
you write the name of the function
followed by a set of parentheses.
3:30
The parentheses are important.
3:34
They call the function and
activate its programming.
3:36
When programming you'll often need to
perform the same tasks in different places
3:40
of the program.
3:44
For example, check if a user
correctly filled out a form field or
3:45
display a specific message to the user.
3:49
Imagine having to repeat or
retype the instructions for
3:52
a task everywhere you needed them.
3:54
That would make your code messy and
unwieldy.
3:56
Functions provide a way to efficiently
execute code that you want to repeat
3:59
again and again.
4:03
Then you can call that code whenever you
need it using a single short command.
4:04