Introduction to Web Development Anonymous Functions

Transcript from the "Anonymous Functions" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Holt: I have an add function here. I have a subtract function. Pretty simple, right? One of them is just taking some numbers and adding them.
>> Brian Holt: We have subtract function here. It's taking a function or taking two numbers and subtracting them from each other. And then here's kind of an interesting one here.

[00:00:22] We have this math function, right? That takes a number, another number and then a function. So it's a function accepting another function as a parameter or functionception. Just kidding. So, this operate function is then going to be called within this function. Again this is kind of a contrived example, but

[00:00:48]
>> Speaker 2: How does it know that operate is a function?
>> Brian Holt: It doesn't, so, you have to know that, as the programmer. So, if this was not a function, it will just throw an error and die essentially. Which is scary, but you just have to make sure every time you call math, you have to give it two numbers and you have to give it a function, okay?

[00:01:13] So, does that make sense here? This operate is a function that is then being called. So, you can pass different functions into here and they'll be called. So, let's just look this very first line here. Math the name of the function up here. I'm giving it two arbitrary numbers one and four for example.

[00:01:31] And then I give it the add function. Right, cuz add is function up here. So, what would you expect these to be then? I'll give you a hint it's over here. It is five, right. Does that kinda make sense that this math function is taking an add right here, or rather it takes it in right there.

[00:01:54] And then it's calling add. Right so this function is being passed into the function and then called. Again, this is one of the powerful parts of JavaScript. You can pass functions around like variables.
>> Speaker 3: I was just wondering the slides have the links to the Code Pen, but I noticed they're under your account.

[00:02:15] Are they gonna stay available or should we be trying to snag the code?
>> Brian Holt: Yeah. I won't delete them. So they should be there indefinitely. Yup. Okay. So add one and four, for example. Right. That makes sense. So now we're doing subtract five from one right, that kind of makes sense?

[00:02:42] Okay, I'm seeing mostly head nods which is awesome. Okay, I pulled this one out just to make it a little bit more clear. So here I'm storing the answer of this math function right here, I have four and five. And this is what we call an anonymous function right.

[00:02:58] So this function does not have a name. It's only actually being used right now in this moment, and then it just fizzles away into the ether right. So essentially right here what I've done is I've written my multiply function, but I wrote it just straight in there. Right.

[00:03:15] Like I just through it straight in this math function. So in this particular case it's a function where it's returning the multiplication of the two. It's storing here at answer and then it's just writing the answer out right here. So looking at this knowing how the other ones work, what would you expect the answer to be?

[00:03:35] Should be, 20 right? Are we kind of, does that make sense? Yeah?
>> Speaker 4: Question here, can the function be called inside another function without passing function as a parameter?
>> Brian Holt: Yeah, the answer is it depends on what context it's in, right? So for example subtract right here actually is on the global scope.

[00:04:00] If you're writing your code right you put very little into the global scope cuz it's really bad. It's really easy to overwrite stuff. So I actually could say add right here. And then everything would become add. But that makes this math function loose its power, right? What was cool about this math function is you could kind of define the behavior of the function from outside the function.

[00:04:26] Which is kind of why we use this operate pattern.
>> Brian Holt: Make sense?
>> Brian Holt: Cool, so I think one of the questions you probably might wanna ask yourself is is this a useful pattern. This seems kind of contrived. Usually being explicit is better than being implicit. Because you wanna be able to communicate with yourself and other developers like this was my intention with this piece of code.

[00:04:58] So what I would say to that is, in certain cases this makes a lot of sense. We're about to jump into jQuery where we're gonna use anonymous functions all over the place.
>> Speaker 4: So on line 17 then, when it calls function(a, b), it's not really doing anything because there's no operate defined, right?

[00:05:22]
>> Brian Holt: Right. Right, so this is just purely a function definition. So this function is not being called. Much like when we define this function right here, it's not being called. We're just-
>> Speaker 4: It's just an empty definition, then?
>> Brian Holt: It's a function definition that is defined it's just simply not called yet.

[00:05:40] So I mean put that in like the context of the subtract right here.
>> Speaker 4: And it's local to that function down there so.
>> Brian Holt: Yes, so it's going to exist in the scope of this function right here and then it's gonna fizzle away and go away and never come back.

[00:05:56]
>> Speaker 3: So it's like a one-time?
>> Brian Holt: Exactly. So it gets called operate up here, then operate is called, and then it just floats away, never to be seen again. That kind of make sense?
>> Speaker 4: So what's the point that you're making by showing this example?
>> Brian Holt: The point is that one that it's possible and you're gonna see it all over the place.

[00:06:19] And two that these can be very useful. We're gonna get into click listeners here and just a second. And if you had to define the different function for every click listener that you ever created it will be a huge pain. This is just shorthand essentially, it's much shorter to write.

[00:06:36] And so thus it's written all over the place.
>> Speaker 2: In terms of execution speed is there a difference between the inline function declaration versus having a globally defined?
>> Brian Holt: It's gonna be positively trivial. The answer is I'm sure there's some implication but we're not even talking about a millisecond.

[00:06:57]
>> Brian Holt: Or in other words, don't worry about it. There might be, but it's not worth ever worrying about.
>> Speaker 2: Just wondering if you had to iterate through a lot of the same.
>> Brian Holt: I'm again I'm sure you could do millions and tens of millions, and it would still make trivial amounts of difference.

[00:07:20] My answer probably is the same.
>> Brian Holt: Cool. Other questions on this? This is, again, kind of intermediate type JavaScript stuff that we're talking about here so if this is hard, it is hard, so.
>> Brian Holt: Cool.