Functions

[00:00:00]
>> We have been plowing through our quick wins, like just racking up the Ws. And in so doing, we've been sort of reviewing some features we know, we've been finding out some little fun facts and things. And we have been using a lot of functions but not really talking about it as much.

[00:00:23]
So that's gonna change right now. [LAUGH] So functions, little itty-bitty topic that you could spend your entire life thinking about, and many people do have, I guess. And for example, we've been seeing a lot of these callback functions, right? Like when we pass in handlers to the addEventListener method, or when we pass in callbacks to the timeout and interval setters and cancellers.

[00:00:55]
And we as JavaScript developers might just be used to thinking, yeah, of course, I can just pass in a function as an argument to some other function that does some other stuff, but then also uses that function, sends it to the queue, and then it eventually ends up on the call stack, and we're, we kinda take that for granted a little bit sometimes, at least I do sided.

[00:01:20]
But it's actually really cool that JavaScript does this and totally crucial for our lives. And so just to throw a little bit more jargon at you, we're talking about, the fact that JavaScript has functions that can accept other functions as arguments or return other functions as return values means it has a feature that's often referred to as first-class functions, meaning functions are sort of first-class data.

[00:01:48]
They can be passed around like a string or like an array. So in JavaScript, you can pass a function as the input or the output return value of another function and we do that all the time with our adEventListeners and our set timeouts and whatnot. And so those functions that take in other functions or might return another function as a value would be in the Jargon world, something we could call higher-order functions, meaning they're functions that operate on other functions.

[00:02:26]
This can become important for certain things, for example, earlier we noticed that our math random value wasn't updating because it was captured outside of a function and then passed in or used in the body of another callback function. So that is sort of something that often tends to happen when, not just when we're declaring functions within a particular, or variables within a particular scope in our program, but also when we're, let's say returning a function from another function, from a higher order function.

[00:03:08]
Now, you might say why would you want to do that? Why would I need a function back from my function? I already had a function, I don't want another function. How many times am I gonna say the word function today? I don't know anybody's guess. It's gonna stop having any meaning to all of us because of whatever that thing is that's called that your brain does.

[00:03:25]
Anyway, these functions that return other functions can be very useful when there's like a particular operation that you tend to have to run a lot and you want a kind of more compact way to call it. So for example, in the console, have we tried so in addition to console.log?

[00:03:51]
Have we used things like console.warn, console.error? Try it out if you haven't in your browser console, just try seeing what those do. So there's so these are the different log levels that we can access in our JavaScript console. So for example, if I do, console.log ('hello') I get a regular old message that we're used to looking at but if I do console.warn, it's full as well yellow, whatever, and even more scary I could do like console error.

[00:04:35]
No, okay. And now it's very intense looking. And what's nice is in when you're debugging, sometimes, have you ever loaded a page and just poked around in the console and there's just a bajillion things and it's like how am I supposed to find anything? Well, we can tell our console to only display certain levels of information, for example, maybe I only want errors, I don't wanna see the warnings or the logs, or maybe I don't know, just yellowing and I don't want the word errors.

[00:05:11]
[LAUGH] But in any case, so log levels, right? So maybe I want like, as a developer, maybe I am super excited to not have to type console dot every single time, [LAUGH] and I can make a logger function where I give it a certain log level that I want to be using, and then I return a function that Itself will take in the message I want to log, that returned function, which I've called log here, but I don't even really need to give it a name if I don't wanna.

[00:05:49]
That is gonna find the appropriate console method by using the property access in the square bracket that we can do on objects. We can access a programmatically determined property without the dot using the square brackets, and then call that on the message that I gave it. So the way I could use this then is like I've determined a particular level, and I've determined that I don't wanna keep typing console.warn, I wanna just type worryUser, and then my message.

[00:06:25]
Probably not something you would write in prod, but you get the idea. So I can make a logger with this level, and then I will get, when I call worryUser a console.warn little warning flag, and it'll be in that level of my console logs.