Welcome back! Functions are the hardest part of JavaScript.
And it will take some time to fully get it. However,
in this video we're going to try and do that.
We're going to learn JavaScript functions.
So, let's start off with, "What are functions?"
Well, they're piece of code, that perform actions. Without functions
JavaScript wouldn't really do anything.
The beauty is that functions can perform one action or multiple actions. But we'll get back to that. First,
let's talk about how you already know some JavaScript functions without even realizing it.
You've seen them before.
'alert' - that's a function. 'prompt' -
that's a function.
You've seen these before.
So, JavaScript provides for us some functions, that are really-really useful, so that everybody who writes
JavaScript, can use them without having to write them over and over.
So with functions we have 2 options.
One - is using existing JavaScript functions, like 'alert' and 'prompt'.
And two - we can create our own.
So, before we get into how we create our own functions and what is so useful about them, you might have
noticed - noticed one thing: these brackets, that are right next to each other with functions.
What do they mean? Well, that in JavaScript means to execute the function.
So, let's see if what happens, when I just type in 'alert' and press 'enter'.
I get 'f alert()' and some weird stuff. Hmmm, 'f' over here stands for function and can see when I hover
over it.
It says 'function alert()'.
This is what running a function means: in order to run
'alert()'
I execute it by calling it like this ['alert()']
So, these brackets mean 'calling a function', so I can call a function.
And you also noticed, that within 'alert' I can add things like
"hi there!"
These are all called 'arguments' and I know, I'm throwing a bunch of jargon, a bunch of words at you, but these
are just things that you'll hear over and over,
when you're a developer, and they'll stick to you - it won't the first time, but, like I said, just try and
get there one step at a time.
So 'arguments' are what's given to functions.
For example, when we did, in our example here.
"Hellooooo" and the 'console.log' was an 'argument'. And the interesting thing is that you can have multiple arguments:
for example, if I removed this and just have, let's just have 'console.log' for now.
I can do "How are you".
I save and refresh and I get.
"Hellooooo How are you".
See, I can have multiple arguments, but just adding a comma. But again, that depends on the function.
Now, again before we start creating our own, let's review. 'alert' is a function, 'alert' with the brackets,
I'm calling the 'alert' function and I am calling the 'alert' function with the argument
'Hi'. 'alert' needs to be called,
otherwise it's just sitting there.
Now the big reason to use function is that you can call them as many times as you want.
Think about 'alert', imagine having to say every time "Hey, computer, create this 'popup' window and print whatever
argument I put in" every time.
I mean that would really suck. Isn't it nice, that we can just call 'alert' and that popup window pops up for
us and everything's done for you?
Well, that's pretty much what functions do.
They make life easier by having actions, bundled up, so you only write them once and then you can just
call it.
OK. So let's get to the fun part.
Let's create our own functions. So, if we go back to our document here, let's see right here. We have 2
ways of creating functions and I'll show you the first way.
Actually, I'm going to show you this one first.
So, let's create our own function, using the first method, which is 'function declaration'.
And we're going to use our 'script.js' here, that's linked to our HTML, that we did at the previous video.
So, here I can say 'function sayHello()'
is 'console.log("Hello")'.
Again the syntax a little bit different, but you just have to remember it.
I'm saying 'function' - is going to be called 'sayHello'.
We have those brackets, that are very familiar to us. And then 'console.log("Hello");'. Let's see, what happens
when I save. I refresh.
Hmmm, nothing happens.
Why is that?
Well, we declared this function.
But remember, what we did with 'alert'? Well, it exists, but we haven't run it.
We have to call the function, so we have to say 'sayHello', like so. Now when I refresh.
I get "Hello".
So think of this with the variable. When I say 'var a equals 5',
that's not going to do anything, until we actually get the 'a'.
And that's when it prints '5'.
OK. So that's one way.
What's the second way of creating a function?
The second way is called 'function expression'.
And this goes like this.
I can say 'var sayBye = function()' 'console.log("Bye");'.
Again I'll save this and refresh.
And again we only get 'Hello' because, well, again we have to call that function.
So, I say 'sayBye', run it and refresh. "Hello", "Bye". Now
one thing you may have noticed here, is that we're assigning this function to the 'sayBye' variable, but
what is the name of the function?
I mean here clearly function's name is 'sayHello', but here we're, we're just assigning to the variable.
I mean, technically the function doesn't have a name and this is called an 'anonymous function'.
We've assigned this function to 'sayBye', so we can reference it through 'sayBye', but otherwise we can't
really access this function.
Well, you'll see why that's important
in later videos.
But you could technically do this: and call this function 'byebye'.
OK.
So, now that we know, how to create functions, why do we need these arguments?
Remember, why do we need stuff inside the brackets?
I mean - these look useful enough, right?
Well, let's try something. 'sing', let's do a function 'sing' and this 'sing' will have, will have 'console.log'
and I'll say "AHHHHHHHHHHHH". That's, that's me, singing.
And it also has 'console.log("TEEEEEEEEE")'.
That's how I sing. Now, if I save this and refresh, make sure it still sings. Oh, I have to call it!
Let's refresh.
Beautiful song: AHHHHHHHHHHHH, TEEEEEEEEE.
But now, every time I want to change to a different song, maybe I wanted to say 'laaa deeee daaa'.
Well, I have to either delete this and change this to 'laaa deeee daaa' or I have to create a new one, calling
'sing2'
'console.log' and you can see over here, how annoying that is, that I'm typing the same thing over and over
and just changing these things.
And now I have to run 'sing2'. And I refresh, and phew, that was tiring! OK.
I did all of this and now imagine, if we had thousands of songs, that we want to sing; we're 'Spotify' and
we want to display all the song lyrics.
I mean that's pretty-pretty tiring, right?
And one of the rules with developers is this idea of "DRY: Do not repeat yourself".
Ideally you want to make things as efficient as possible.
And one thing you can do is - by adding arguments. So I can add something like 'song' and now - let me just
delete this for now.
In the 'console.log' I can just say 'song'.
So now any time I want to change the song, I can say "Laaa deee daaa". 'sing("helllloooooo")
Then "sing
("backstreets back alright")
Now I save and refresh.
And look at that! You see how many lines of code we just saved and how I can now use 'sing' any time I want,
and I can customize it to what I want.
Kind of like 'alert'.
That's what arguments do.
Arguments allow us to not repeat ourselves and make our functions what we call more extensible.
They can be customized.
Let's do one other thing to learn a fun thing about functions.
We're going to delete this and try 'function multiply()'. And we'll give it 'a' and 'b', so it'll accept two
arguments and we'll do 'a*b'.
And now within 'a*b' we'll say 'multiply', and we'll call 'multiply(5, 10)'. Save and refresh.
And now we should have 'multiply' available to us.
You can see over here 'multiply(a, b)' that's 'b' exactly what we wrote.
OK, so what happens if I do 'multiply'
(5, 10)?
What do you think I'll get?
Let's see!
Hmmm, that's really weird.
Let's try that again with a different number.
Still 'undefined'.
Why is that? Well, this is called debugging.
Let's see if we can figure out what's happening here.
I'm going to do a 'console.log' here.
And I'm going to log out 'a' and 'b' to make sure that this function's actually running.
So I'm going to save and refresh. OK. 'console.log', 'a' and 'b' and I just run the function again.
'console.log'. OK. So it looks like it's running, but then I'm getting 'undefined' over here.
Well, I can show you this in a diagram.
So, a function is an 'input'.
We give it some sort of an 'input', maybe sometimes it's empty, so that's whatever's in the bracket.
In our case it's 'a' and 'b'.
So those are numbers, so '5' and '10'. And then the function does whatever we tell it to do.
In our case it was to 'multiply 5 and 10'. And then we get an 'output', but we're not getting that 'output'.
Why is that?
Well, because a function works like this.
And don't worry, I've just added a bunch of arrows, but I'll go through everything and explain it to you.
The 'input' is receiving '5' and '10'.
The function does some stuff, and up to this point we've only done 'console.log', and the way 'console.log'
works is, the function is saying: 'Just log it to the console in the browser'.
But we've never done it where we've returned a 'value'.
Let me show you what I mean.
When we don't return something, we get 'undefined'.
When we return something, we get the 'value'.
So let's see over here if we can explain this.
So, here whenever I am saying 'multiply (10 ,5)', and I'm going to remove the 'console.log' just so it doesn't confuse
us, save and refresh...
I get 'undefined'.
That is because as you see in this diagram we're not returning anything.
So, in JavaScript the way you return things is - you have to put in 'return' inside of a function.
So, now it's going to 'return a * b' and you see, that it's a - it's a special word in JavaScript - it
highlighted in red.
Well, now it's saying 'Yep, we're going to return the value'.
So, even if we added 'console.log'. You'll do 'console.log' and then ask "Hey, do I have a 'return'?".
If I do, I'm going to send it a value.
Hopefully, that's not too confusing.
Let's see if it works.
I'm going to save and refresh.
And now if I do 'multiply (5, 10)', I get '50'.
Yay! We got our function working and that is a very important key concept, that we need to remember
is that we need to return something from a function.
I mean we don't have to.
But ideally we do, so we don't get these cases, where we just have 'undefined' and we don't know what the
function does.
It's kind of like a 'black box', that does something and we might get a 'console.log', or not but we don't
know what's happening inside.
It's nice to have a 'return' to make sure that the function acts the way we expect it to.
Ok, what if we do something like this?
What if I do 'return a', and I forgot a semicolon here, and 'return b'. What do you think will happen? Let's
refresh and run this.
OK.
What if I change the order and I put 'a' first?
Let's try that again.
I get '5' and 'return' is the final way to end a function if that makes sense. So, as soon as you say
'return' in a function, the program exits.
So, to go through this I say 'multiply (5, 10)'. It goes to the function, it says: "Yep, I have the function
'multiply'. I'm going to put 'a' as '5' and '10' as 'b'".
And now it goes into the function and says: 'return 5', which is 'a'. So it returns that and exits the function.
So now these two lines aren't being run at all.
The program simply reads this, goes to here, reads the first line of the function and then exits.
So, in a function you should have one 'return' statement, or is that right?
Let's see a case where that might not be correct.
Let's add an 'if' statement to this.
Let's say that we want to do 'multiply', but we're also kind of lazy and we don't want to be too hard with
the computer.
So let's say we want to say that, 'if' - we remember the 'if statement'. "if 'a' is greater than '10'" or "if 'b' is
greater than '10'".
We can say 'return "that's too hard";'.
Otherwise [else]
we'll return 'a * b'. Let's see what happens here.
I'm going to save and refresh. Let's do 'multiply (5,4)'.
I get '20'.
What if we do '5' and '40'? I get
"that's too hard", because now it's reading the function '5' and '10', and it's saying: "Hmmm, 'b', which is '40' is higher
than '10'".
So, according to the 'if statement' I'm going to go "that's too hard".
And because a 'return' exits the function, it never gets to this, even if I do 'return a * b', you'll never
get there, because the 'return' exits the function. Just to double check,
let's do that: let's do '5*40'.
And it never gets to any of these lines, because as soon as this sees a 'return', it exits the function.
I know it's a lot.
And we'll get to why these things are important in the next couple of videos.
But I wanted to also show you that you can have inner functions. So in JavaScript functions are 'variables'.
And what that means is, that we were able to assign
functions like this. Right?
And if we did something like this,
well, we can call 'a' in the same way that we did and we just assigned function as a variable.
So technically we could do something like this.
So let's have 'multiply' - Let's go back to the way we had it. We'll leave 'multiply' the way it is in the
simple form.
And we can actually
say 'alert(multiply)'.
And then here we'll do '3' and '4'. And I know that's a lot of brackets.
Don't worry we'll go through it.
But, let's just save this and refresh and see what happens.
I get '12'. Because what's happening is: We're starting with the inner function and we're saying: "Hey, we
want to alert something!".
"What do you want to alert?"
"Well, we want to 'multiply'"
"We want to call this function and give 'a' it '3' and '4'".
So it goes to 'multiply' and it says: "Yep, we'll assign 'a' and 'b' to '3' and '4', and I want to return 'a' and 'b'.
So now 'multiply' gets changed to '12' and then we 'alert'.
So, you see that now, instead of having something like 'total', 'multiply(4,5)' and then putting 'total'
here, we can just assign 'multiply' into here.
Whew! that was, that was a lot!
But I want to show you that we've - we've tackled,
I think, the hardest topic in JavaScript, which is functions. And you've also covered the 'return', which
is very very good.
The one other thing I want to show you is that a lot of people get confused with the terminology and
I don't think it's as important but I just want to clarify it.
There is the concept of 'parameters' and 'arguments'.
Now 'parameters' and 'arguments' kind of are very similar but just slightly different.
So 'arguments' as we've said, are '4' and '5'.
So functions can have 'arguments' and they get called with 'arguments'.
'Parameters' are what 'a' and 'b' is.
So 'multiply' has two 'parameters' of 'a' and 'b'.
I know that's a little bit confusing.
You can read up on it a little bit more.
I don't think it's important to really know the difference, but just so whenever you're reading articles
or learning, maybe through YouTube, that you'll hear these words almost interchangeably.
They pretty much mean the same thing, just a little bit slight difference in them.
All right!
I know, I know I've thrown a lot of terminology at you!
But after repeating it a few times it will make sense, so stay strong. But that's it for functions.
It's time for you to try some exercises.
Rewatch this video if you need to.
You really want to make sure you understand functions, since it will be the core of JavaScript.
Just remember, what we're doing with functions is, we are creating new words in the language, in the JavaScript
language. So we can create 'variables' or we can create 'functions' to add vocabulary to the language and
up to this point that's all we've been doing.
We got this JavaScript that had a few words, that we can use, and we've added new ones like 'multiply' and
'total' in order to make it more useful to us.
And that's what programming is.
I'll see you in the next one. Bye-bye