This video I'm going to introduce Javascript functions and functions are probably the single most important
aspect of Javascript.
So we're going to spend a decent amount of time on them.
So we have a few objectives here and the first one is a conceptual one.
We want to understand why we use functions and then the other three are more about actually writing
code.
So we want to be able to define a function without arguments to find a function with arguments and define
a function that returns a value.
So let's start by talking about what functions actually are.
In an earlier video I mentioned that functions are sort of like a variable for lines of code.
So if a normal variable will store a value like hello or 27 a function can store 20 lines of code and
then we can recall that function and those 20 lines of code can be run again.
So it's definitely more nuanced than that explanation but I like it as a simple way to introduce that
functions are just reusable bits of code.
So the next thing about functions is that we must declare them first.
So we define a block of code and we give it a name.
So that makes the function and then we have to run it later.
So it's a two step process.
Declare a function and then call it so you can see here.
This is actually the syntax to declare a function function as a keyword just like var or F or while
so function anything that we want here this is our name.
So this one is called Do something parentheses and then curly braces.
And then we put as many lines of code as we want inside the curly braces and then we can call the function
later by referencing its name with parentheses at the end.
So let me show you what that looks like.
So I will define a function here lets you function.
Say hi and all that it's going to do is cancel that log hello
and we'll have it do two lines cancel that log goodbye just like that.
So when I hit Enter javascript was going to see this code but it's not actually going to run the council
bot logs.
I'm just registering a function called say hi but it doesn't execute the code.
So now if I want to call that function I refer to its name say hi and I add parentheses and I hit enter
and it runs whatever's inside of say Hi.
So hopefully already you can see why this is useful even though it's a very trivial example.
We were still writing two lines constants like Hilo Council d'Artois goodbye and to do that all we have
to do is write this really short line.
So another quick note while I have this open if I just typed the words say hi without parentheses.
And I hit enter.
It just gives me the code back.
So this is a really important distinction.
If I just type the words say Hi it's just going to give me whatever the value of say hi is but it doesn't
run the code.
So I have to have those parentheses there which will go get the value of this function and then it's
going to run the function.
So really important that there's a difference between referring to a function and executing it.
So I have another example here of how functions can help us try up our code.
Remember dry is.
Don't repeat yourself.
So if I wanted to sing this song which is Twinkle twinkle little star I have four concert vault log
statements so to sing the song once i need all of this code and then I want to sing it again.
I need all that code again and so on.
Every time I want to sing this song I have to run those four lines of code individually which is obviously
not very dry.
It's a lot of repeated code.
So using a function I can just write those constant logs one time function sing song whatever I want
to call it.
I put those four lines of code in there and then to sing the song again.
All I have to do is write sing song with parentheses.
So let's do that now let's clear this out which by the way clear is a function that I just used and
this is one that comes with javascript in the browser I don't have to define it but just like other
functions I need the parentheses to execute it.
So back to our singsong function I'm going to write the function keyword and then name and I'll just
go a singsong again and just say you know the convention is to use camel case for function names just
like variable names.
And then I'll add my curly braces and then whatever I put inside of here is part of the function.
So I'm going to paste those four lines constant hotdogging.
Twinkle twinkle little star
just like that.
And I'm going to hit enter.
And now I've told javascript about a function called Sing song.
If I don't add the parentheses it just tells me the code.
But if I want to sing the song I just have to write sing song with parentheses and if I want to write
if I want to sing the song four times it's super easy I just type that four times rather than having
to write 16 Konst about logs myself.
So this illustrates the value of functions even though it's a trivial example of singing Twinkle Twinkle
Little Star.
And it's only four lines.
Imagine when we have functions that are 50 lines of code that we're using 50 times that saving us a
lot