and then if I save that, there's the log in the console. Now in JavaScript, functions can be stored as values as well, so if I were to stick this function in a variable, let's say const hello as a variable equals this function, this should be perfectly valid. So this is referred to as a function expression, but now we have two names, we have the variable name and we have the actual function name here, so if I save this, you'll see say hello is not defined. Now to get this to work, we can refer to it as the variable name instead of the function name. So instead of say hello, we'll just use the variable name.

name. So instead of sayHello, we'll just use the variable name. Okay, now this is still valid, sayHello is now only available within the function body, so if you need some sort of recursion, then you can still provide the function name like it is here. However, for most cases, you don't need this function name, so we can get rid of that entirely, and now this should still work, so if I save, it still works, but the right side is now called an anonymous function, because there's no function name associated with it. So this is an anonymous function. Now anonymous functions have their own uses, for example, you can use them in what's called

So this is an anonymous function. Now anonymous functions have their own uses, for example, you can use them in what's called IFEs, so let me just copy this, let's comment everything else out here, let's say IFE, I-I-F-E, which is known as immediately invocable function expression. So if I were to paste that in, we have our anonymous function, you have to wrap this in brackets and then call it immediately. So just like a normal function, we call it immediately, and that should be the same result. IFEs were used more in the past to sort of provide your own scope, so everything within here would be housed within this function, and would not leak into the global scope. With modern JavaScript, const and let solve most of the scoping issues, so you don't see

Let me just copy this, and paste it in here. So again, this is a function declaration, and this is a function expression. So one major difference between these two is that function declarations, so this one here, are hoisted, whereas function expressions are not. So what does hoisting mean? So hoisting means that you can use function declarations before they're defined. Let me show you an example here. So before we define the methods, let's actually call them. So we have one called hello, which is our function expression, and let me actually change the console.log for our function declaration here.

So we have one called hello, which is our function expression, and let me actually change the console.log for our function declaration here. So function declaration, and then let's also call that one over here. So this one's called hello again, Andre. Okay. Now if I save this, actually, let me put it in the other order. So I'm going to move hello again up, and save it again. You'll see that the function declaration did work, but the function expression did not work. So like I said, function declarations are hoisted, so this is hoisted, and what JavaScript

So let me just comment out everything from here, and we'll start from scratch. Actually, let me grab this, since it's similar to a function expression. Let's comment that back in, but instead of console.log, let's actually return it. So we'll say return, and we'll get rid of these brackets here. And now we have to console.log, hello, and give it an argument to see it in the console. And that should be the same result. Okay, now like I said, arrow functions are a short form version of writing function expressions. So we can keep the variable on the left, we can get rid of the function keyword, we can provide an arrow after our parameters. So after the bracket, we can provide what's known as a fat arrow, so equals greater than,

provide an arrow after our parameters. So after the (), we can provide what's known as a fat arrow, so => , and that should work. So if I save this, it still works. But now we're using arrow functions. Now we can even shorten this even further. If you only have one parameter, and that parameter does not have a default value, then we can get rid of these () here. So if I get rid of these () here, this should still work. So if I save, same result.

So if I get rid of these brackets here, this should still work. So if I save, same result. And if our function body is just one line and returning something, this is known as an explicit return, you can see we actually have the return keyword, and we're returning something in here. But you can shorten this even further if you only have one line return statements. So you can make use of what's known as an implicit return. So to do that, we get rid of the return keyword, we get rid of the curly brackets here. And then we put everything on one line. So this and this is pretty much the same thing.

And then we put everything on one line. So this and this is pretty much the same thing. So again, get rid of the return, get rid of the curly braces, and put it on one line. And that's known as an implicit return. So if I save that, we get the same result. Let's do one more example here. Let's start from a function expression. So say const add equals function. And this takes two params, num1 and num2, and we just want to add them up. So let's add our curly braces.

And this takes two params, num1 and num2, and we just want to add them up. So let's add our curly braces. Let's say const sum equals num1 plus num2, and then we'll return the sum. And we can use this down here, it's const logAdd, and let's add 4 and 3, that should be 7. Okay, let's change this to an arrow function. So again, we can get rid of the function keyword, we can provide a fat arrow after our parameters. And that should be okay for one step, still works. We actually don't need this temporary variable here. So let's just return num1 plus num2 directly.

We actually don't need this temporary variable here. So let's just return num1 plus num2 directly. So let's say return, okay, save that, that still works. Since our function body is just one line and returning something, we can use an implicit return. So let's get rid of the return keyword. Let's put it on one line, let's get rid of the curly braces and the semicolon. Actually we can leave the semicolon. In this case, we have more than one parameter, so we have to have the brackets here. So if I save that, that should still work.

In this case, we have more than one parameter, so we have to have the brackets here. So if I save that, that should still work. Like I said, we need these brackets here if we have more than one parameter. So if I try that, that's not going to work. And we'll get into some differences between the arrow function and function expressions in a later video, but it has to do with the this keyword and how it changes context based on if you use function expressions or arrow functions. Okay, let's take a look at methods. So again, from the previous video, methods are functions that are attached to an object. I'm just going to paste in my person object here.

So again, from the previous video, methods are functions that are attached to an object. I'm just going to paste in my person object here. It has a firstName, lastName, age, and we have this function here. So how old am I? And all it does is console.log, I am this.age years old. So to use this, we can say person.howOldAmI as a function or a method. So we need the brackets here. And that should be 19. We actually don't need the console.log because I'm console.logging it within the method itself. And you can see when we have a method, we are using an anonymous function as well.

We actually don't need the console log because I'm console logging it within the method itself. And you can see when we have a method, we are using an anonymous function as well. You can see this function has no name, the key is the name. So that's how you refer to it. Now we can actually change this to an arrow function if we like. But like I said, this is going to change the context of this. And usually this is not what you want to do. But let me just show you. So let's get rid of the function keyword. Let's provide the fat arrow, and let's save that.

So let's get rid of the function keyword. Let's provide the fat arrow, and let's save that. And now you can see it says I am undefined years old, because the context of this has changed. And again, we'll get into this in a later video. But to make this work again, we have to say person.age. Okay, let me just put that back to what it was before. And there's a shorter version of this as well, which maintains the context of the this keyword. And that's to write it like this. So instead of the key colon, and then function, we get rid of the function keyword, we get

And that's to write it like this. So instead of the key :, and then function, we get rid of the function keyword, we get rid of the :. And that's the same thing. So if I save that, it still works. But as you can see, it's a bit shorter to write. And the last thing I want to take a look at is a callback function. Let me just scroll down a bit here. And let's see what a callback function is. So the definition is a function that's passed into another function as an argument, which

And let's see what a callback function is. So the definition is a function that's passed into another function as an argument, which is an invoke to complete some kind of routine or action. So you'll make use of callbacks all the time, especially when you're working with event listeners. So let's do a quick example here of an event listener. So let me just make devTools a bit smaller. So we can see the contents of the index.html, because I have to add an element in here. So let's go to index.html. Let's add a button here.

So let's go to index.html. Let's add a button here. And I say click me. And what I want to do is click this button. And whenever that's clicked, I want to log something in the console. So we have to make use of event listeners for this. And again, we'll have dedicated videos on event listeners. But for now, we have to select the button first. So let's select that button. Let me just move this up a bit more.

So let's select that button. Let me just move this up a bit more. So const button equals document.querySelector. And let's grab the button. Okay. Now, we want to add an event listener on that button. So button.addEventListener. And we want to listen for the click event. So whenever a click happens, we want to perform some sort of action. So the second parameter to addEventListener is a callback function.

So whenever a click happens, we want to perform some sort of action. So the second program to add eventListener is a callback function. So what do we want to have happen whenever this button is clicked? So how about we define a function named greeting, and we'll pass it in as that callback function. So let's go ahead and define that function, which is going to be our callback function. And we can define it as a function declaration or an expression. Let's stick with a function expression for now. So let's say const greeting = function. And for now, we'll take no params. And we'll just console.log 'hello there'.

And for now, we'll take no params. And we'll just console.log hello there. And now hopefully this should work. So if I save this, if I click the button, let me just open DevTools. So it's mounted to the bottom of the browser here. So if I click the button, we do get hello there. So again, a callback function is a function, in this case, our greeting, which is passed into another function. So it's passed into the addEventListener function or method to complete some kind of action or routine.

So it's passed into the addEventListener function or method to complete some kind of action or routine. So in this case, whenever the button is clicked, perform whatever the function tells you to do. So you can see we're passing greeting as just a name of the function, and not with the brackets like this. So if I did it like this, then the greeting function will be called immediately, which we don't want to have happen. We only want it to happen when we click the button. So if I save this, you can see hello there is being called immediately, which we don't

We only want it to happen when we click the button. So if I save this, you can see hello there is being called immediately, which we don't want. So we just want to pass it like this. And then it will only run when we click the button. And of course, we can provide an arrow function in here if you like. So if I got rid of the function keyword provided a fat arrow, this should still work the same. So if I say click me, that still works. Now if you want, instead of passing a reference to the function here, we can provide an anonymous function directly within here.

Now if you want, instead of passing a reference to the function here, we can provide an anonymous function directly within here. So again, let me just move this up a bit. And we can say function, in this case, no params, and we can do whatever we like in here. So console.log, a non function called, and it's pretty much the same thing. So if I save this, and click the button, it still works. And again, if you want an arrow function that should work as well. So you'll definitely be making use of callbacks when you're writing JavaScript, again, we use it as an argument in a method, and it's ran whenever something else happens.