Functions

So you can’t have fun without functions, or maybe it’s the other way around, functions without fun. And what functions do is they allow us to run a block of code. However, we have to create that block of code and invoke it at anytime within our script. So in this lesson, we are going to be exploring functions, how to create a function, what global and local scope means, and how we can return values from a function and using parameters within a function, and then also function declaration of function expressions, what’s the difference between the two.

So first, let’s go ahead and we’ll create our function expression, and we can call this one output1, and this is going to be an anonymous function, so we just represent a function like this. And then we have our curly brackets, so the same thing that we saw within the loops, and this is where the block of code goes that we want to run. So this is the code that we want to run when we reference the function.

And in this case we’re just going to simply output a message into the console every time this function runs, and anywhere within our code, we can run this function at any time. So using output1, and if we just put output1 like we did with the variable, then we actually get the whole function statement being returned. So in order to invoke the function, we need to use the rounded brackets.

And what this does is, this tells the browser that this is actually code that we want to run. We want to invoke it, and what it will do is it will run through all of the content in the code that’s contained within this block. This is a function expression. And the important thing to remember about function expressions is, you can use them within your code, but you have to declare them before you try to use them.

So if I try to have the output1 before the function expression is declared, I’m going to throw an error. So we’re not able to do that in that order. This is how we use a function expression. There’s another type of way to set up functions, and that’s a function declaration, and these can be referenced anywhere within your code. So we don’t have to have that output in our code before we try to use it, but we do have it somewhere within the code in order to be able to use it within our scripts.

Let me show you an example that. We’re going to create output2, and it’s different than what we saw with the variables where we were assigning values. And in this case, we use the keyword function and then the name of the function. And in this case, we’re calling it output2, and then the rounded brackets and the curly brackets where all the code is going to be held.

And then the block of code that we want to run is following those rounded brackets. So in this case let’s do hello 12, and you’ll notice that we can invoke the code as well. So we’ve got output2. We can have that within our code, or we can output2. And it’s the same thing that if we don’t include the rounded brackets, then it’s not going to actually run the code, and we need to have the rounded brackets in order to run the code.

And the big difference between the two formats is that we can have an invoke output2 even before we’ve added within our code before we’ve declared it. So that’s the big difference, and depending on how you’re developing, you may choose one over the other. So this is a more structured format where everything needs to be declared, and whereas, this is a little bit more free where you can have your functions all grouped together, maybe at the end of your code, and then you can access those functions at any point within your script.

There’s also some more power that we have with functions where we can pass in parameters. So we can pass in the parameter within the rounded brackets. So in this case, we’re going to set up another function, and we can call this one output3. And then within these rounded brackets, we can pass in parameters. And these parameters can then be used within the local scope of the function, and the local scope is indicated by the curly brackets. So anything within the curly brackets is going to be contained as local scope, and anything outside is the global scope.

So in this case, if we want to output3, and I’m going to just update this, so to save us a little bit of space and I’ll just output the message of Hi, and you can see that gets output into the console. And in this way, I’ve got quite a bit of flexibility on running this function at any time. And you can see that hello gets output there, and we’re passing in that value.

So if for instance, we’re looking for a variable called mess and this is what we want to output, and it’s not being declared within the local scope, but it’s going to look to the parent scope in order for value of mess. And in this case, we’re going to set it to hello. And here order does once, again, matter because we need to declare the variable, so the Java script has it stored. It can reference that variable before we try to use it. So again, because we are trying to output3 and output3 was running this function, which was relying on a variable called mess, but we hadn’t declared the variable mess. That’s where we’re throwing that error.

So this is something to keep in mind when you are creating your functions that the order of where they’re presented within the script does matter. And that’s why oftentimes you’re going to see all of the variable declarations at the top of the script, and then the functions can go at the bottom of the script, and some of the code that interactions of the code are going to be in the middle there. So sending those arguments into the function so it can pick it up as a parameter and then make use of that variable in a number of different ways.

So in this case, let’s look at how we can take in parameters and use those parameters and return a different value back into the function and into the part of the code that’s invoking the function. We’re going to do the different type of function, the function expression. So we have a little bit of variety here creating our function. And we’ll call this one output4 and equal that to an anonymous function.

You can also have named functions within the expression as well, and it’s passing in within the rounded brackets. So this is where we’re going to pick up the parameter. We’re going to send the argument. In this case, we’re going to take a number, and then we’re going to calculate a value. and that’s going to be the number times the number, so it’s going to give us the square of the number, and then it’s going to return back the value to the function.

So now when we refresh and if we type in output4, it’s expecting a parameter. It’s expecting a number. So we can see that when we put that number in, what’s happening with the calculations being done, it’s taking in num, and that is a value of 5 in this instance, and it’s multiplying 5 by 5 and returning back a value of whatever the calculation is, so that in this case, it’s 25.

So we can set up value and equal it to, whatever, output. And this could be fully dynamic, so we can have quite a bit of flexibility here. Console log, whatever the return value of val1 is. And you’re going to see in this case, we’ve got 64 being returned back into the console. So you can see that functions are very useful when we’re creating code. We can do all these different calculations. We can run these various blocks of code and return back different values and reuse these blocks of code.

So this is one of the most important things that if, for instance, we wanted to run the same calculations but we’ve got a number of different numbers that we want it to run in and maybe there, some are big, some are small, we can see that we’re doing all of these calculations, and we’re setting different values for the return. So we’re able to use the function as a block of code where we can dynamically add values and then make some calculations with those values and then return the newly calculated values back into our script.

So go ahead and try this out then. Functions, of course, are a very integral part of coding, so do try out different examples of functions, how you can run a block of code, how you can pass in parameters into a function, and then lastly, how you can return those values from the function and then make use of them within your own code.