[MUSIC]
>> Hi, my name is Nitya Narasimhan.
I'm a Senior Developer Advocate on
the Microsoft Developer Relations Team,
and I'm here to talk to you about JavaScript functions.
We're going to cover five things you need to
know when you talk about JavaScript functions.
Let's get started.
First, what are functions?
Functions are basic blocks of code that are executing
a series of statements that you tend
to use over and over again in your program.
By abstracting these into a reusable function,
you end up getting two benefits.
We're going to talk about that in a second.
But there are a couple of examples
of functions that you see right here.
In first case, you have a function that just
prints a very common message.
In the second case, you have a function that actually
computes a result given two inputs.
Keep these examples in mind.
Why are functions useful?
Because when you have code like this that you use
again, and again, and again by abstracting them
into a function that is reusable, you get two benefits.
First, you get readability and conciseness.
Think about a task that takes 10 lines of
code that you use five times in your program.
That's 50 lines of code right there.
By abstracting it into a function,
you can potentially reduce it as a 10 lines
of code for the execution of the task
and five invocation statements, from 50-15.
The second, which is actually
the more appealing use case for me, is maintainability.
In this example, you can see that I wanted to change
how I wanted to do something with the computePrice function.
If I had kept to my original intent of having
that code replicated five times in my program, or
I may have to go back and make
this change at every single location.
By abstracting it into a function,
I only have to make the change in one place.
That makes the code maintainable by anyone who has to come in,
keep, take care of it even after I've gone.
Let's move on to the second thing you need to know.
What does a function syntax look like? How do you define one?
This is an example of a function in JavaScript.
I've highlighted it in different color
so we can quickly talk about
the different components of a function definition.
The function keyword in blue is what
identifies that code as defining a function in JavaScript.
The most important thing you want to recognize here,
before we look at the other components,
is the curly braces that are highlighted in yellow
that scope out the statements
that form the execution part of the function.
Next, pay attention to the fact that this function has a name in
green and the name is what you use to
actually execute or invoke the function.
This is just the definition.
Third, we have parameters, here shown in red.
Think of parameters as place holders for
the input data that you need to pass to your function.
Finally, we have a return statement.
A return statement provides two kinds of value to you.
We're going to talk about this in just a minute.
But think of return statements as
a way for you to ship data out or
provide a result or output from the execution of that function.
All right. The number 3,
what we looked at there was the definition of a function.
But the definition is not the same as invoking it.
Think of the definition as a blueprint that
tells you what the function does.
The invocation is where you actually call it so it does it.
The big difference, when you define a function,
you've got the little curly braces,
there is no semicolon,
you really giving a blueprint for the statements in the function.
To actually execute it,
you would invoke the name of the function
with the standard braces,
pass in any arguments if
that original definition had any parameters and that's it.
Here, the printHello to invoke it,
you literally say, printHello, open brackets,
the actual instance of a name you want to provide
close brackets and you get back the result, hello world.
Item number 3.
We talked about the syntax,
we talked about invocation.
Now, let's talk about the different pieces.
We talked about a function name.
Function names in JavaScript are really about user
friendly readable ways that allow you to immediately,
at a glance, know what the function does
wherever you calling it from.
It's like variable names in terms of conventions.
You can use any alphabet or numerical character, dollar signs,
and underscores, but no other special characters.
Go try it out.
We'll have a little demo video that shows you different examples,
but go try it out and you'll see
that if you were to use any special characters,
you will have errors in your editor.
One interesting thing is functions are themselves objects.
You can use the function ".name" property to get back
a string version of what the function name is,
if for any reason you didn't know what it was.
Finally, there's a special case known
as anonymous functions that don't have a standard name.
We're not going to cover that here,
that will be covered in a different module.
But feel free to go look it up online and
learn a little bit about what anonymous functions are.
All right. Onto item number 4.
We're really roaring through this, aren't we?
Remember how I told you functions have a name.
They can take parameters as
placeholders for inputs and they can return a result.
Let's talk a little bit about the parameter site.
Parameters are placeholders for input values.
You can think of them as variable names that are used in the code,
the definition of the function as placeholders for the execution.
When you actually invoke the function,
you will pass arguments,
actual values that will replace
every location of the parameter
when you execute the function itself.
Parameters are optional.
You can have functions with no parameters whatsoever.
For example, a printThanks
function that just puts a nice friendly message.
Anyone who calls it, gets the exact same result.
If you do pass parameters though, just know this.
When you pass arguments during invocation,
the JavaScript runtime does not actually
check to see if the number of arguments you
provided or the type of arguments that you've
provided match those of the parameters.
What that means is that,
if you were to provide fewer values than were required,
it's not going to tell you,
it's just going to fill an undefined for
every parameter that you
have not allocated an argument or value to.
In this example, you can see in the computePrice function,
when I invoke it, it actually takes two parameters,
but I only passed in one argument.
As you can see from the result,
the second argument was seen as undefined,
and therefore, I might end up with a slightly unexpected result.
One takeaway for you is,
if you are using functions that have complex execution statements,
make sure you validate your data or you validate
your arguments as part of the function definition.
We're down to the last point,
and this is the return statement.
One thing you need to know about functions is those curly braces,
they enclose the execution statements of the function.
If you did not have a return statement,
return statements are absolutely optional,
your function will exit by
default when you get to the final curly brace.
At that point, it returns back to whoever called it.
However, I usually recommend that you do have return statement.
Return statements have two really useful value propositions.
First, they give you
a very clear idea of where your function is going to exit.
This is particularly useful if you have conditional statements.
If within your function,
you're saying based on this input, I want to do this,
this, and this, or based on
data and put our to do that, that and the other.
In this case, you want to have return statement so
that when you finish executing the correct path,
you exit the function
without going and doing things you shouldn't have done.
The other useful value proposition for return is it
allows you to provide
an output result that gets returned back to the caller.
This is a great way for you to provide results
based on the computations or execution of tasks that you did.
In this particular example for computePrice,
we're using the return statement to return the value,
the computed price based on
the cost of the item and the discount that has been provided.
Again, if you didn't have a return statement,
by default, the value returned is undefined.
You'll see in the example there that when I
call computePrice with the right values,
I get a proper result.
But when I call printHello,
which doesn't have any parameters and has no return statement,
I simply get back undefined.
Well, that was five things
you hopefully learned about JavaScript functions today.
What functions are, why they matter,
your naming conventions and tips for naming them,
what function parameters do for you,
and last but not least,
why you need return statements.
See you on the next module.