1.2 A Refresher on Functions

So before we jump into our project, which you see here on the screen, I wanna spend just a little bit of time talking about what functions are. Because that's gonna basically lay the groundwork for everything else that we do in this course. So don't worry too much about this beer list right now. In the next video, I'm gonna walk you through setting this up. But, just for now, before we actually have some JavaScript files to work in, I'm gonna use the console to demonstrate what functions are. So, to get that, in my Mac, I can do Cmd+Opt+I, and that brings up the console directly. I am in Chrome, so I'll be using the Chrome console. Most modern browsers have something similar. Where you would right-click, in Chrome we would say Inspect Element. That's gonna bring up our list of HTML. I'm gonna use the console just because it's a nice, easy way to show some JavaScript running, without having to set anything else up. So in here I'm going to just create some functions, and we're going to talk about what functions are in JavaScript. And some of this will be really simple. And then we'll kinda quickly get into the more advanced concepts and lay the groundwork for the rest of the course. So let's create a function called print that will take a message and just, it's gonna just use console.log. And if we print a message like hello, you can expect that it's gonna do exactly what console.log does and just print it out here in the console. So that's what this line is. If I did console.log hello, it does the exact same thing so you can see you see that our function is being run. This here is one way of declaring a function where we give it a name. We use the function keyword, and we give it a name. And then we can refer to it by that name here. Another way to create a function is to create it anonymously and set it to a variable. So we could create a variable called says or say, and we can make a function, that a function. And you can see here we used the function keyword without a name. Like we did up here, we had to give it a name. So this becomes an anonymous function. And we can take a person's name and a message. And we have an error because I left out the closings parentheses here. So a nice little trick in the console, if you're using it, just push up and you get the last thing that you typed. So I'll fix it. [SOUND] And now my say variable is correct. If we do typeof say, we're going to get a function, because it is, the function value has been set to the variable. You can run it by typing the name say, and we'll give it just Sam, saying hello. All right. So, another thing about functions is that the parameters are optional. So if we run our say function again, and give it Sam hello how are you, JavaScript is really nice to you about this, which is sometimes good and sometimes bad. It just prints out Sam says hello and ignores your other parameter that you sent it. And this works the other way too if I say, you use the say function and type just Sam. When we run it, it just continues on. It doesn't throw an error. But it has a va, no value for the message. So that value is then undefined, and then it prints out Sam says undefined, which isn't great. We can actually do better. We can kind of watch for this, since we know that parameters are optional. And we can make a new one. Let's call it saybetter. And then in parentheses, I'm just gonna say message, use the double pipe there for logical or, so if message is falsey, it will switch over to nothing at all. And so saybetter now with just Sam prints out that Sam says nothing at all. You'll also notice that all of our functions so far haven't returned anything. They're just doing things. This is a kind of a fundamental difference between styles of functions. Do functions kind of affect other things, do they have side effects, or do they just return a value. And in functional programming you're gonna find that we talk about how we want our functions to just return values. So let's clear this, and create a sayfunctional. And instead of logging our message, we'll just return it. [BLANK_AUDIO] So now if we run, sayfunctional with Sam and nothing, it returns our string to us, and we can do whatever we want with it. So we start to push functions together and create new things. So now we print out Sam says nothing at all. But sayfunctional doesn't do the logging for us, we can use it for something else. If we're gonna talk about functions, we should probably quickly talk about scope as well. Scope is basically the answer to the question, what variables do I have access to at a given time? What you should remember about scope in JavaScript is that it's just about functions, which is why we want to talk about it right now. So If I have a function, where I have just defined a variable person inside that function, I obviously have access to it right here. So console.log, and then we'll just print out the value of person. So if I run my function, it doesn't return anything, so it should say undefined. But it will log out inside that function and say, all right, inside my func we have person and the answer is yes, Sam. Now, what happens if I want to actually access person? Does that exist? We can just inspect it here in the console by typing it. And it will say person is not defined, which means we don't have access to it because it was defined inside this function. So the only place where you have access to it is in that function and in any function defined inside of it. So it goes down, it gets nested. So if you had another function right here, it could refer up and look and find that there's a person defined above it, and you could have access to it. All right, but outside of that function you don't have access to it. And the last thing I wanna mention about functions before we move on to the project is that functions are objects, okay? So, like we said, if we did typeof and what's say. All right? So we defined say before. The type is a function. But, it is, in JavaScript, a kind of object, which means that it has some methods on it. Right. So there are some defined functions by JavaScript that you can run on functions. All right. The easiest one to look at is toString. So if we, you know, we're not running the function here. We, we're not doing the, the parentheses. We're just going to use the function called say. And then dot to get at its methods, which in the console, it's going to actually show us all the methods that it has. All right, so here's toString, okay? I can just click on it and then run that, and that's going to print out the function as a string. Another one that you may have heard about, especially in reference to functional programming, is one called call. So you can actually call a function using its call method. And what's really nice about focusing in on functional programming is the value of this, which is the biggest, one of the biggest confusing things about JavaScript. It's almost entirely irrelevant. We're not gonna even care about it. So, when we use call here, the first value is supposed to be setting the value of this. And we don't care. So, just trust me on this that we're just gonna type, type in null and not worry about it. If you remember, say takes a name of a person and a message. So, we can right now just start listing those arguments. So now we could use Morgan. I like cookies. And what this is gonna do is it's going to call the say function, and pass in these parameters. If we run this, we'll see, Morgan says I like cookies, which is what we expected to get had we just run the function directly. And there are times when this comes in really useful. And since we don't care about the value of this, we're just passing in null for that, and not worrying about it. So this is a really quick overview of what functions are in JavaScript, and we'll be using a lot of these features of functions throughout the rest of the course. So if it's not totally clear, or if you're a little bit confused about why we mention certain things, just hang in there, and we'll get to it. So in the next video, we'll take this beer list that's been hanging out over here. And I will walk you through how to set it up on your machine if you'd like. So that you can just run it as a file, and then we'll be editing the JavaScript files throughout the rest of the course.