Introducing JavaScript Functions0:00
Alright, let's move on to functions and how we can use them. We've already made use of some of the built-in functions in JavaScript, so you might already have an idea of what they are for. They provide some sort of action, or perform some sort of task. So when working with JavaScript, we'll definitely be making use of the built-in functions like we've been doing so far, and we'll also define our own custom functions that lets us define our own custom functionality. So as a reminder to some of the functions we've already used, for example for strings we have toUpperCase, so if I just define a string here, say myString, and say .toUpperCase, we can call a function with these two brackets, and if I hit enter here, you'll see that
we have toUpperCase, so if I just define a string here, say myString, and say .toUpperCase, we can call a function with these two brackets, and if I hit enter here, you'll see that myString in all uppercase is returned to us, and we'll definitely make sure to take a look at what return means as well. We also made use of a bunch of functions using Math, so if we did Math.sqrt, for example, we can pass in a number as an argument, and we'll definitely take a look at parameters and arguments, so in this case the square root of 25, and if I hit enter here, you'll see that we get 5 as a result. And of course we've been using console.log everywhere to print out our results. So if I do console.log here, you'll see it gets printed out to the log, and in this case
And of course we've been using console.log everywhere to print out our results. So if I do console.log here, you'll see it gets printed out to the log, and in this case it's returning undefined, because nothing is returned. So in DevTools, if you see this arrow here, if it's pointing to the left, then this is what is returned. Now you might hear the term method and function being used interchangeably, and for the most part they're the same thing, except methods are attached to some sort of object. So for example, Math is an object, and sqrt is a function on that object, so we can refer to sqrt as a method. So again, if we do typeof Math, you'll see it's an object, and sqrt can be referred.
Writing Function Declarations1:43
refer to squareRoot as a method. So again, if we do type of math, you'll see it's an object, and squareRoot can be referred to as a method, because it's attached to an object. However, if it's not attached to an object, then you can just refer to them as functions. Again the definition is pretty loose, so I think it's okay if you use them interchangeably. Now let's take a look at how we can define our own functions. So I'll go into my code editor here, and there are several ways to define functions, and we'll take a look at all of them in the next video, but for now let's take a look at the most common way. So first you have to declare your method, so let's put a comment here, let's say function
most common way. So first you have to declare your method, so let's put a comment here, let's say function declaration, it's also known as a function definition. So you would use the function keyword, and then give it some sort of name. Let's call our function sayHello, then we have to give it some brackets, and within here you can add optional parameters, but for now we'll keep it empty, and then now we add our curly braces. So within here is where we would write the code for what the function actually does. So within here is the function body, and you can have multiple statements in here, so for now let's just console.log hello, and let's console.log myName here, just to show you.
So within here is the function body, and you can have multiple statements in here, so for now let's just console.log hello, and let's console.log my name here, just to show you we can have multiple statements, or multiple lines of code. And when you're writing function declarations like we're doing here, we don't need to add a semicolon here. Okay, so let's save that. So we have our declaration in place, but now to run this function, we have to write some more code. So to run it, we have to refer to it using its name, just like variables, in this case sayHello, and then add the brackets in here.
Calling Functions and DRY3:12
So to run it, we have to refer to it using its name, just like variables, in this case sayhello, and then add the brackets in here. So this is what's referred to as calling the function. So let's put a comment here, say function call, also known as invoking a function, maybe executing a function, or maybe even running a function. So now if I save this, if you look in the console, you'll see we do get those two console logs. Now say we wanted a similar method, but it says hello to another person. So if you want, you can just define another method, and call it sayhello2, and then just change the name here, so hello Bob.
So if you want, you can just define another method, and call it sayHello2, and then just change the name here, so hello Bob. And that would work. We'd have to call the second method here, called sayHello2, and now we get hello Andre and hello Bob. But as you can see, we are duplicating a lot of code here. And one of the golden rules of programming is to keep your code dry, so don't repeat yourself. So in this case, what we want to do is provide a parameter to the function. So let's get rid of sayHello2, let's get rid of this as well.
Using Parameters and Arguments4:07
So in this case, what we want to do is provide a parameter to the function. So let's get rid of sayhello2, let's get rid of this as well. And let's add a parameter to our original sayhello method. So in this case, in between the brackets, we can say firstName. So think of firstName as a variable that's available within this sayhello method. So instead of console.log Andre here, we'll console.log firstName. And this will come from the function call. So if I try to run this, let's see what we get. We get hello undefined, because when we call the method, so right here, we have to provide a firstName.
We get undefined, because when we call the method, so right here, we have to provide a firstName. And in this case, I didn't provide a firstName, so it's console logging undefined. So we can just provide a firstName when we're calling the method, say Andre, we can do another one for Bob. And now if I run this, we get the expected results. So one for Andre and one for Bob. Now you can have multiple parameters if you like, just add a comma and add another parameter in here. So let's say lastName.
in here. So let's say lastName. And let's console.log the lastName as well. And now we have to provide that when we're calling the method as well. So we'll say comma, my lastName here. And for Bob, let's say his lastName is Builder. Okay, let's save that. And everything is working. So again, within our function declaration, we are accepting parameters here. And within our function calls, we have to provide parameters here.
So again, within our function declaration, we are accepting parameters here. And within our function calls, we have to provide parameters here. Now sometimes you might hear the terms parameters and arguments being used interchangeably as well. And again, the definition is pretty loose. But the difference is parameters are for your function declarations. So in this case, firstName and lastName are parameters to the sayHello method, or the sayHello function, sorry. And then when you're calling the function, so in this case down here, when you're passing actual values, then these are arguments.
Adding Default Parameters5:54
And then when you're calling the function, so in this case down here, when you're passing actual values, then these are arguments. So Andre and Matterang, my last name, are arguments to the sayHello function. Again, the definition is pretty loose, I tend to use them interchangeably. But that is the difference between parameters and arguments. Let's take a look at default values here. So again, if I were to say sayHello, without any parameters, then we get unexpected results based on what we're doing. In this case, we're getting undefined here. But if you want, you can provide default parameters.
In this case, we're getting undefined here. But if you want, you can provide default parameters. So when you call it without any arguments, then you won't get these unexpected results. So to do that, within our parameters, we can say =, and then give it a default value. So in this case, for firstName, we'll say 'john' as a default value. And for lastName, we'll say 'doe'. And now if we provide arguments like we did here, everything should still work the same. But if we don't, it should use the default parameters. So if I save that, you'll see we do get 'john doe' here. Okay, let's define another function here.
Returning Values and Scope6:52
So if I save that, you'll see we do get johnDoe here. Okay, let's define another function here. So we can take a look at returning stuff. So let's say function, how about we name it add? And this will just add two numbers. And we'll have two parameters numOne and numTwo. Okay, and let's add our curly braces. And like I said, all we want to do is add the two numbers together, and then return it to the user. So how about we do this?
it to the user. So how about we do this? Let's make a variable in here, say const sum equals, and we'll just add up the two numbers. So numOne plus numTwo. And if it's not obvious, this is just an example. And if you actually needed to add numbers, you would just do it this way. In this case, I want to demonstrate what return does. Okay, so we have this sum variable, and we have our function declaration in place. So now we have to call it somewhere. So let's say add, pass it 2 and 3.
So now we have to call it somewhere. So let's say add, pass it two and three. And let's save that. Okay, so nothing is showing here. How about we try to get the result by console logging the sum here. So let's try that console.log(sum), save that. And we're getting this error that says sum is not defined, but it's defined right here. Why is it not available here? And this has to do with scope, which we haven't taken a look at yet. But scope means where our variables and values are available to us.
And this has to do with scope, which we haven't taken a look at yet. But scope means where our variables and values are available to us. And in this case, if you're defining a variable within a function declaration, that is only available within that function definition. So within these two curly braces here. So outside of that, for example, here, it's not available. And this is what's known as block level scope. And we'll get into that in a future video. So how do we get the result of this function outside of it. So that's when you would use the return keyword.
So how do we get the result of this function outside of it. So that's when you would use the return keyword. So let's say return the sum. And now we should have access to it outside of the function declaration. So now we can store the result of this add method in a variable. So we can say const sum equals add. So right here, we have two and three as arguments, it's being passed into this method here. And then we're adding the two parameters together and storing it in a variable named sum. Not to be confused with this sum here, let me just name this something else, say result. Just so you're not confused.
Not to be confused with this sum here, let me just name this something else, say result. Just so you're not confused. Okay. And then here we are just console.logging the result. So let's see if this works. And it does, we do get five here. So again, if your function wants to return some sort of value, then use the return keyword at the end of your function. So return statement should always be at the end of your function. And if you write any code after it, then it won't get executed.
So return statement should always be at the end of your function. And if you write any code after it, then it won't get executed. For example, if I console.log something here, you will not see that. So if I save that, this should still work, but you will not see this console.log. So again, make sure your return statement is always the last thing within your function declaration if you need to return something. And you don't always have to return something. But when you do make sure it's at the end. So if you're not sure if your function should return something, if you give it a good name, then usually it should be pretty obvious.
So if you're not sure if your function should return something, if you give it a good name, then usually it should be pretty obvious. For example, we named ours add. And if you were to tell someone in real life to add two numbers, then you would expect some sort of answer from them. So if you tell someone to add three and two, you expect them to answer five. And in this case, that's the return statement. So same for the built in functions that we've been using, for example, for math.sqrt. If you ask someone what the square root of something is, they should respond with the
And that's what's happening. So now if we want, we can rewrite this function here to make use of return statements. So let's grab this. Let's paste it down here. And let's return it instead. So we'll no longer console log stuff. Let's delete this, delete this. And let's just return. Actually, I forgot to show you that we can shorten this function here. Instead of using a temporary variable, we can just return it directly here.
Actually, I forgot to show you that we can shorten this function here. Instead of using a temporary variable, we can just return it directly here. So return num1 plus num2. And we can get rid of this. And that should still work. So let's make a new function here. Let's say sayHelloAgain. The parameters are fine. But now instead of console.log, we'll just return. So we'll use backticks here.
But now instead of console.log, we'll just return. So we'll use backticks here. We'll say hello. And we'll interpolate the variables here. So ${}, we'll do it twice because we have firstName and lastName. Okay, add our colon here. And now if we call this, so let's say sayHello again, it is going to be returned. But since we're not explicitly saying to console.log it, then nothing will show here. But if we wrap it in a console.log, then that should work. And there it is.
But if we wrap it in a console.log, then that should work. And there it is. And since we didn't provide any arguments in here, it's using the default values. But if I were to provide my name here, then that should show. Or if you do it directly within DevTools, DevTools will automatically show what's returned, like I've been showing you. So it should be available in here. So let me just save this. And if I were to say sayHello again, and if I didn't provide the brackets here, you'll see that it's returning the actual code for the function.
And if I were to say say hello again, and if I didn't provide the brackets here, you'll see that it's returning the actual code for the function. So we have to make sure to call it with the brackets. And in this case, I won't provide any arguments. But if I press enter, you'll see that hello JohnDoe is returned. And again, look at the left arrow here, which indicates that is what's being returned. So again, as a final example of the difference between a function and a method. So these are functions because they are not associated with an object. But if I were to add a function, I'm going to paste in some code here. It's a Person object, like we did in the last video.
But if I were to add a function, I'm going to paste in some code here. It's a person object, like we did in the last video. And you can see we have this howOldAmI key, and the value is a function. So in this case, howOldAmI is a method, because it's associated with the person object. So in this case, it is console.logging the age. So I can just say person.howOldAmI as a method, and that should work. So yeah, that's an overview of functions and methods. In the next video, we'll take a look at the different ways we can declare a function.
