In JavaScript, functions are first-class citizens. This basically means that we can use functions just like any other type in the language. And this is not like PHP. PHP has a lot of similarities, but functions are not first-class citizens in PHP. Functions are also very important in JavaScript because all of our types are defined as functions. Number, string, boolean, array, object, all of those types are defined using functions. So without functions, the whole language just falls apart. Now, we're not going to dive very deep into functions because we have the opportunity to do that all throughout this series. First of all, I want to talk about the return value of a function.

because we have the opportunity to do that all throughout this series. First of all, I want to talk about the return value of a function because every function returns a value, even if it doesn't have a return statement. By default, every function returns undefined. So here, this doNothing function returns undefined, which means that we can call it and we can assign its return value to this foo variable, which would actually be undefined. So just keep that in mind. Yes, if you explicitly return a value, then that value is returned. Otherwise, the function returns undefined.

Yes, if you explicitly return a value, then that value is returned. Otherwise, the function returns undefined. Now, there are several different ways that we can create a function. The first is what we call function declaration syntax, which is essentially what we see here. We start the statement with the function keyword, followed by the name of the function, the parameter list, if there is any, and then the curly braces to define the function body. We've just declared that some function. So these are all function declarations. Now, I point that out because we can also create functions using what we call function expressions to where we could have a variable, but we assign that variable a function,

Now, I point that out because we can also create functions using what we call function expressions to where we could have a variable, but we assign that variable a function, which in this case, we would return a - b. Now, ultimately, we end up with a function that we can use, but JavaScript treats these two types of statements differently. We have this concept of hoisting, the idea that before any code is executed within a JavaScript file, JavaScript is going to scan the file and it's going to hoist certain things up to the top of the file, regardless of where it's actually defined. So these function declarations are actually hoisted. So we could define these at the bottom of the file,

So these function declarations are actually hoisted. So we could define these at the bottom of the file, but we could still call our sum function without any issue at all. In fact, let's go ahead and alert this so that whenever we run it in the browser, we will see the value of three because we just added one and two together. And this is, of course, very different from PHP. In PHP, you can't call a function unless if it is declared or defined inside of the file first. So function declarations are hoisted to the top of the file. It's done before any of the code executes, but function expressions are different, which makes sense because it is an assignment operation.

It's done before any of the code executes, but function expressions are different, which makes sense because it is an assignment operation. We are creating a variable and assigning a function to it. So in order for this diff function to be usable, it has to execute so that the function is assigned to the diff variable. So if we attempt to call diff before we assign it to the diff variable, we will see an error in the console, uncaught type error, diff is not a function. It eventually becomes a function, but only when that code executes and assigns the function to the diff variable. Now in a lot of modern JavaScript, you are going to see function expressions.

only when that code executes and assigns the function to the diff variable. Now in a lot of modern JavaScript, you are going to see function expressions. And it's not because they're better than function declarations, because ultimately you just end up with a function. But that just seems to be the style that modern JavaScript developers use. Now we also have what we call arrow functions, which looks like this. It's a shorthand, which is very useful for simple functions. This is still an expression. We are assigning a function to a variable called multiply. But all we have here is our parameter list followed by an arrow.

We are assigning a function to a variable called multiply. But all we have here is our parameter list followed by an arrow. And then we have the function body, which in this case simply returns a times b. Even though there isn't an explicit return statement used here, the nature of an arrow function is to simply return the result of the function body, which in this case is multiplication. But we can also define an arrow function that has a more complex function body. In which case, the arrow function begins the same with our parameter list and then the arrow. But then we can define our function body using curly braces.

then the arrow. But then we can define our function body using curly braces. In which case, we could check to see if b is equal to 0. And if it is, we can throw a new Error stating that b cannot be 0. Otherwise, we would want to return a divided by b. So we can define arrow functions that have a very simple function body that just returns a value. Or we can have more complex bodies like a normal function would. Now, there are some technical differences between a normal function used with the function keyword and an arrow function.

Now, there are some technical differences between a normal function used with the function keyword and an arrow function. We're not going to get into that right now because, well, we need to talk about objects and context and things like that. We'll get there. But for now, just know that you can create a function using a function declaration, a function expression using the function keyword, or by using arrow functions. Now, there's another concept called anonymous functions, which function expressions are anonymous functions. Because these are functions that are created without a name.

which function expressions are anonymous functions. Because these are functions that are created without a name. Even though we assign them to a variable, they are created without a name. So we call them anonymous functions. And anonymous functions are very commonly used in JavaScript. And one of the most common things is to use what's called an immediately invoked function expression, or IFE. It kind of looks like this. We start with a set of parentheses. Then we define an anonymous function, and then we execute it.

We start with a set of (). Then we define an anonymous function, and then we execute it. So this is a function expression that is immediately invoked. Now, one thing a lot of people do is forget to encapsulate the function expression with (). Because if you don't, it's actually a syntax error. So the function expression has to be encapsulated with (), so that then you can execute that function. And these are functions that are very useful for protecting your code. Because remember that JavaScript has global scope, and

And these are functions that are very useful for protecting your code. Because remember that JavaScript has global scope, and global variables and functions can be accessed and used at any time. They can also be modified. And a lot of times that modification happens by accident. So we want to protect our code from any outside interference. And we can do that by placing our code inside of an immediately invoked function expression, because functions have their own level of scope. And whatever we define inside of that immediately invoked function cannot be accessed from outside of that function.

And whatever we define inside of that immediately invoked function cannot be accessed from outside of that function. So this gives us the opportunity to write our code and protect it from any outside interference. Now, by encapsulating everything inside of this immediately invoked function, we have also created something called a closure, which is a term that is commonly used in php, and the idea is very similar. A closure gives us the opportunity to maintain the state of a variable or a function. It just so happens that our particular closure here doesn't really do that.

a function. It just so happens that our particular closure here doesn't really do that. It executes and then throws everything else away because we don't hold on to any function or variable, but we could. And that's something that we will see later on in the series. But the next thing that we need to talk about is scope. We know that we have global scope, we have function scope, but we can also have block level scope, and we will look at that in the next episode.