2.8 Functions

Hi folks. In this lesson, we are going to take a look at the general work course of our JavaScript applications, the function. A function is a named grouping of one or more expressions. A function can be invoked at anytime to execute all of the statement inside the function. We'll use functions a lot, and they can be used in a variety of different ways. So it's important to understand them fully. The most basic way to find a function is using the function keyword followed by the functions identifier, followed by opening and closing parentheses, followed lastly by opening and closing curly brackets like this. So just to recap, we have the function keyword, followed by the functions identifier, which in this case is function one, the parenthesis are the parameter list. In this case, the function doesn't receive any parameters, because the parenthesis are empty. And lastly, all of the expressions within the function are contained within curly brackets. In this case the function doesn't have any expressions inside of it, but that doesn't make it any less of a function. Let's just add an expression however inside of it. So this form of defining a function is called a function declaration. To invoke this function, we use its identifier followed by a single set of parentheses. Like this. And we can take a look at that in the browser. And we should see the log message that we added within the function. If we want to pass values into the function, which are treated as variables inside the function, we can list them as parameters in the function declaration. So in this case, we have specified that function one should accept a single parameter, which is called msg. And inside the function we just log whatever is parsed as that parameter to the browser's console. And then following this, we can invoke the function any number of times that we want, and we can pass in a different string each time. And whichever string we pass in will get logged to the browser's console. So this is very useful, because it makes the function reusable. We pass different data into the same function and get different results. There is also a subtle distinction to be made here. When we declare the function, we list the parameters that the function accepts. When we invoke the function, we pass it arguments. This is the difference between parameters and arguments, but you will very often hear them used interchangeably. We can list as many parameters in the parentheses of the function as we want by listing multiple parameters separated by a comma. So these parameters that we have specified as part of the function declaration are named parameters. And named parameters are made available inside the function, as if they were variables. Functions have access to another special value inside of them which is called arguments, and this value contains all of the arguments that are passed through the function. So this time with the log args function, we haven't specified any named parameters. But we can still get access to any arguments which are passed when the function is invoked using the special arguments keyword. And you can see that arguments is an array like object and all of the individual arguments are available within this. You should be careful when working with arguments, even though it looks like an array, it's not a true array and so it doesn't have any of the methods that true arrays have. Another thing about functions that they always return a value. In the two functions that we've looked at so far, we haven't returned a value explicitly, so both of these functions actually return undefined. To specify what a function should return, we can use the return statement. So now, whenever the logArgs function is invoked, it will return the string some value. What the function returns depends likely on the purpose of the function. If the function is to compute some value, it should probably return this value. If the function fails to do what it should do, it could return false. As soon as the function returns, it stops executing completely. Another way that we can define functions is as a function expression. A function declaration always starts with the function keyword. So any expression which defines a function but doesn't start with the function keyword is a function expression. Function expressions are usually, but not always, functions that are stored in a variable. Like this. Function expressions largely behave in the same way as function declarations. We can still evoke them, but this time we used the variable name rather than the function identifier. In this case the function that we have saved in the variable f is known as an anonymous function because it doesn't have an identifier. Function expressions can also make use of functions that have identifiers. We just need to specify the identifier after the function keyword. So this time the function has the identifier f and it is also stored in the variable f. This can be useful for debugging purposes. So it is advised to try to always use identifiers even with function expressions. When a function expression has an identifier, like this, it's known as a named function expression. We can nest functions inside one another, we can pass functions to other functions, and functions can return functions. This means that JavaScript supports first class functions. Let's just spend a moment talking about hoisting. When your browser loads a JavaScript file there are two phases which occur. The browser first reads the entire file, this is known as the parsing phase. And only once it has parsed the entire file, does the browser execute the code in the file. This second phase is known as the execution phase. Variables are processed during the pausing phase, before any other code is executed. What this means is that even if we declare a variable halfway down a function, it will be available at the top of the function. JavaScript hoists it to the top. Let's look at a basic example. So we'll take a look at this in the browser's console in just a second. But before I switch back to the browser, what do you think the function is going to log? Let's take a quick look and see. You can see that it's logged undefined. Let's go back to the code and just talk through why. So what actually happened, when the browser loaded the index.js file, it first pass the entire file and in doing that it created any variables that were declared. So in this case the declared variable is test variable. So test variable was declared in the first phase, the parsing phase. The code is then executed in the second phase, the execution phase, and in this case the browser executes the code inside the file on a line by line basis from top to bottom. So when the test variable was declared in parsing phase, it was given the value undefined. The browser then executed the file and so the console.log statement appears before the value test is assigned to test variable. Because variable assignment happens in the execution phase, not the pausing phase. It is only the declaration of variables which happens in the parsing phase. So actually, it is as if we wrote the code like this. Even though we didn't write the code like that, that's how the browser interpreted it. Hoisting literally means that the code is lifted right to the top of the function. It's hoisted. So this only affects variables declared using the var keyword. Lets and consts do no exhibit the same behavior. Hoisting used to be problematic, especially for newcomers to Javascript. But these days, because it is recommended to use lets or consts most of the time, we can largely avoid these hosting issue. So in this lessons we looked at some basic facts about functions, such as how we can create them and invoke them, and how we can specify which parameters they accept. We also looked at how we can create functions that are invoked immediately. We also looked at the difference between function declarations and function expressions and variable hoisting. We'll now move on to the next section, which focuses on the data structures available to us in JavaScript. Thanks for watching.