When you define a function, it can be defined as a part of a function declaration or a function expression. Now you're going to see both in different JavaScript code that you view. And so it's important to understand both it's also important to understand the difference between the two. What you choose to use is really up to you. Both are used quite extensively throughout JavaScript code, I generally prefer the function expression. Let's first take a look at the difference between a fun function declaration and a function expression.

And then I want to show you the difference as far as how they are handled within the JavaScript code. So examples of both types First, let's look at a function declaration. Basically, a function declaration is you're simply declaring a function. This is the syntax pattern which we showed in the previous model. Use the keyword function, the name of the function name parentheses, curly braces, and then inside the curly braces the code block to execute. Now function expression is declaring a function inside of a wider expression.

And usually that happens when you're when you're assigning the function to a variable. So function can be assigned to a variable just like anything in JavaScript. So in this case, we first declare the variable and then using the assignment operator, we set it equal to a function that we have now defined. that begins with the function keyword, just like in a function declaration, and then the function name is optional. I mentioned in the previous movie that there are situations where the function name is optional. Why here's a situation where it is optional.

You do not need to include a function name as a part of a function expression. You then have to have the parentheses the curly braces and then the code block to execute. So that is a function, expression, function declaration function expression. All right now what? What is the main difference between those two and it really has to do with hoisting. We talked about hoisting in a previous movie, but we mainly talked about it in regards to variables.

Basically, when you declare a variable, the declaration of that variable is hoisted to the top of your code lifted, placed to the top of your code. The assignment of that variable takes place, wherever that exists within the code, but the declaration of it is at the top of your code. Now function declarations are hoisted to the top of the code as well. I'm going to open up sublime So I can show you an example that shows this happening. All right, I already have some code entered. And notice I'm calling the function test three times.

I'm also defining the function test using a function declaration twice, once here. And in that one, we simply display console dot log first test. And then here, and in this one, we display console dot log second test. Now what do you assume? Or what do you think is going to happen? What will print out?

We call test three times. What's going to print out those three times? Well, let's take a look at it and find out open the car So and notice second test is printed three times to the console. So, if that number three is indicated the same thing was displayed three times to the console. Now, how is that happening? Well, it has to do with the hoisting.

Let me jump back to the code. Now, function declarations are always hoisted to the top of your code. So, this declaration, because it comes first, then this declaration comes second. So this declaration overwrites the first declaration. So then when we call each function, it prints second test. So it has nothing to do with where these are located in the code because of the hoisting situation.

All right. So function declarations are hoisted to the top of your code, remember that now let's take a look at a function expression. So I'm going to modify these just a bit. I'm now assigning the function to a variable. So now the function declaration, or the defining of that function is now a part of a function expression. And since this is an expression, technically, we should have a semicolon at the end of it.

Same thing down here. Put the semicolon at the end. Now notice I used the same name as the function, that's fine. That's not a problem. But really, I can eliminate this. Remember with a function expression, I can remove the name.

I don't have to have it there. But let's go ahead and try this as it is. Save that jump out browser refresh, display the console. Now notice first that we have a type error test is not a function. Where's that error coming from? We did find test.

Well, it happens to be here. Now variables are hoisted, not the assignment of those variables, though. And so the assignment has not been hoisted. So when this executes, basically, it's saying this needs to be a function because I put parentheses after it and the parentheses mean I need to execute some code. Well, right now, when it gets to this line, JavaScript only knows that that's a variable. It does not know that it is a function, and it contains code to execute, because that hasn't happened yet.

All right, so let's comment out that and try it again. Now we see first test, second test, jump back to the code. So the first time we executed test, this one had been had been defined. And so it printed first test. Then the second time we executed this one had been defined and overrode the previous and so second test was printed out. Okay, so hoisting does not happen with function expressions.

That's the main reason that I choose to use function expressions the most. I've used both, and I continue to use both, but I probably use function expressions the most. Now one more thing to mention before I leave this, this variable here doesn't have to match the function name. I just happened to do that in this example, and as I said, the function name could be completely remote. Let me do that really quick. Save that.

Go ahead and execute again. And you see we get the same results. Now one more change. I could change that variable. But now that I've changed the variable when I execute, I need to use the variable name. It doesn't know what test is if I don't change these lines here.

Okay, let's save this, take a look at it. Exact same results. So that is the difference between a function declaration and a function expression. just in summary, a function declaration is simply declaring the function. A function expression is a function that's defined as a part of a larger expression. And usually, that happens when you're assigning the function to a variable.

There's other situations that can be a function expression, but Most common is assigning it to a variable. All right, let's continue to the next movie.