 Okay. Good morning, everybody. So i'm glad to see so many people come out to this new JavaScript fact. We kind of put this together at the last Minute based on the new events in the word press world. So i'm actually, i don't actually have anything to do with The word press. I'll talk about myself later. But i do know my javascript. So that's sort of why i'm here. So today we're going to be talking about advanced topics Of javascript exploring the function. So functions are really important in javascript. And so we'll take a look at what that means. Okay. So please feel free to interrupt me, Raise your hand, whatever, for questions. I'm totally, totally, totally, totally okay with Interruptions for questions. This is for you guys to learn. So i want you to have, you know, all your questions answered. And at the end of this talk i'm also going to be at the Happiness bar hanging out at least for the next half Hour after my talk. And then i'll just be here For the rest of the day. So please feel free to ask me Questions. It's fine. All right. So today we're going to be talking about the wild world of Functions. And so let's give a little context About what we're doing here before we start. So javascript is a bit nutty. It's a bit crazy. And unfortunately it will remain so forever. Okay, not forever, but maybe for the foreseeable future. Why is that? Because we, like, it has a lot of quirks. It was made in actually like two weeks. And we don't want to Break the web. We want pages from 15 years ago, Their javascript to keep working just like it did 15 years ago Today. So we have a problem. All those crazy things that it does, we're, they're here to Stay. We're not getting rid of them. So instead what we're going to do is to maintain backwards Compatibility, we're going to, a, learn about the things That are bad and stay away from those. And b, the standard is Going to be updating itself constantly. Not with changing the Old things, but with introducing new things that fix the things That the old things do bad. Okay. Anyway, i'm not going to talk about that, but just so you Know, we're not breaking the web. That's why javascript is so weird and wacky because we Just can't fix those things. I have to point this over here. Oops, wrong button. It's my bad. So it's especially crazy and eccentric with functions. Eccentric is a euphemism. Some of you may know that for Insane. Anyway, so, and functions are One of the most important things that javascript has. A lot of in javascript you do with functions. It's really, really important. So it's really weird that it Does so much things with the most important, their most Important object, but we have to learn about them because Well, they're important. So that's what we're going to Try to do. So we're going to try to address some of Those weird things that javascript does. And things especially that throw off new developers when They're learning this stuff. So we're here to help with Those things. So, number one, functions are Values. That's the first topic. In javascript, functions are values. What does that mean? It's odd for a language to have this property. So you might have heard this term. Functions are first class Citizens in javascript. How many people have heard that? Okay. How many people know what that means? Okay. Like a fourth of you. What that means is when you create a function in javascript, It is an object. It is a value. Just like when you create a string, that is a value. Our numbers are values. Our arrays are values. And all those things are values and objects. Just like a function is. That means you can assign it to a Variable. So when you create a function like this, You have a variable automatically created for you. So let's say i have this console log function here. And so i can call it. See, in that first line, They're saying, greeting, open parentheses, close parentheses. I'm calling the function. But i can also print out Greeting itself. By defining a function, Greeting itself is a variable that's created that has the Contents of this object that is a function. That's what that means. Okay. When you define a function in other languages, they're not Objects. They're not values. You can't assign them to a Variable. You can't pass them around. So a similar thing you can do in php, i'm assuming that some Of you are familiar, maybe more familiar with php than With javascript, you can do a similar thing by assigning A function to a variable like this. And so by assigning this function to a variable, you can Call it with its variable name, but the variable itself, if you VAR dump it, it's an object. It's an instance of a class or Something. So you can also do a similar Thing in javascript where you're assigning an anonymous Function, what we call that, to a variable. And that also works just the same as the previous example does. Now, you'll see me in my examples, i'm mostly going to use This style, which is using the function keyword and then the Variable, but ultimately it's the same and result most of the time. There are exceptions, but we're not going to talk about those. So mostly i'll be doing something like this. Okay. All right. So the first thing i want to show you is that the function Is an object and most objects in javascript are immutable. You can set properties to them. So here what i'm doing is Aside from just hello world like i did before, i'm also Keeping track of this amount property of this greeting object. So i'm starting it at zero, over here, starting it at zero. Then every time i call it, i'm calling it twice, i'm Incrementing it by one. And so at the end, i'm going to Console a greeting amount. That's going to give me a result of two. So it keeps track of that property just like it would In a regular object. Okay. And because a function is An object, you can do that. And because it's a mutable object, You can do that. If you assign a number to a Variable like this and try to set a property on that number, you Can't do it because numbers are immutable. You can even assign a Function as one of its properties because it's an object. And we'll circle back to doing this kind of thing later. So this is kind of making a makeshift method. I'm treating this greeting thing like an object, like a class, And then i'm making a new method on it called the spanish version Of hello world, which is or la mundo. So here i am calling it. So greeting itself is a function. I'm calling it. Greeting that spanish is also a function or a method, and i'm Calling it. And that works. That's fine. Doesn't complain about that. With me so far? Great. So practical application of Functions being values, passing functions as arguments to Other functions. So when you pass a function as An argument to another function, the past function is called a Callback. A callback. And basically when you're using A callback you're saying run this function that i'm providing For you when blank, when something happens. Now that something could be when the user clicks a button, That something could be when the page loads, that something Can be in three seconds. The condition under which the Function will be called will change, but the concept is the same. Passing some instructions to you to do when that thing is right. So what does that look like? Well, like i said, one of the Common cases for callbacks is click handlers in jQuery. How many people here are familiar with jQuery? So how many people here, their javascript code is centered Around the use of jQuery? Okay. So most of you. So here what i'm saying is, Okay, well, slug my button and then run this instruction when The user clicks that button. And that's it. So that anonymous function that i'm defining there, that Anonymous function is the callback. So function values you pass into other functions are known as... Oh, i just said that. I went back. Sorry. Let's go forward. Okay. And you can also pass in a function by using its Variable name instead of having an anonymous function. Okay. And again, in this case, i'm naming the function. I'm saying function do stuff. This is my callback function. And then i'm passing it in as an argument, just like you would Pass in a regular variable as an argument. Yes. The question is, if there's an Advantage to doing it this way as anonymous functions, Readability is the only one, the most of the biggest one. There may be other advantages too, but that's the main one. Actually, i'll show you an example with a settimeout Function later, especially with a settimeout. It's really way better to do it this way than the other way. Although i'll be using both in the examples. Good question. What's that? Oh, yeah. You can reuse it as well. If you name the function, you can Use it in multiple places. In this example, i'm only using One, so it doesn't matter. Okay. And just as a reminder, the callback is not click. Click is not the callback. Do stuff is the callback. The callback is the function that you pass. All right. So part three. Function, scope, enclosures. This is another really important thing that's really weird. This especially is really weird that javascript does. And obviously it's centered around functions. So let's talk about this. So local variables in javascript Have a specific scope. Okay. So local variables are those that are created with var. Notice in my examples i've been creating, every time i do a var. Looking for one here. Okay, here. Var greeting equals function whatever. That makes reading a local variable. Okay. Okay. So a variable scope determines what Parts of the code it can be used in. So the scope is about the visibility of the variable. Where it can be seen and where it can be used. So if else statements, another nonfunction blocks do not Constitute a new scope. So for example, in my first Line here, i'm saying var pizza equals pepperoni. By the way, all my examples are pizza related. I apologize if you're hungry. Anyway. So here, my first line is saying, okay, i'm setting pizza Equal to pepperoni, it's a string. Fine. Then i'm saying if true, that makes the if always happen. And i'm saying, okay, var pizza equals mushroom. Even though i said var pizza equals again, it's actually Referring to the same pizza variable. Okay. So inside that if statement and outside the If statement, we're both talking about the same scope. It's the same set of variables here. So pizza there and pizza inside, they're both the same pizza. So when i change pizza in the if, it gets changed outside The if as well. Okay. So i get mushroom here. Mushroom. But javascript has function scope, which means that you Create a new set of variables inside a function. So in this example, i'm starting out the same way. Pizza equals pepperoni. And i'm making a new function called print pizza. And in print pizza, i'm making another instance variable called pizza as well. I'm sending it to mushroom. Inside the function, that pizza is mushroom. Outside the function, pizza is still pepperoni. So print pizza prints out mushroom because in here, pizza is mushroom. But outside console log pizza still remembers, oh, yeah, i have this Variable called pepperoni. So this pizza and that pizza are two In separate bubbles. They're in parallel dimensions. They don't know about each other. They have the same name, but They're different. They're different variables. So when you open up a function, you have a new set of Variables. But there's some caveats. Like everything in javascript, there's some issues here. So the key thing to remember about javascript function scope is Disney pic star. And i find mnemonics are a Really good way to learn tricky concepts. So i don't know how many have heard the mnemonic righty Tidy, righty tidy. When you're twisting a screw, You twist it to the right and it's tightened to the left. So we're going to learn one for javascript. Here we go. Ready? Variables can be seen from the inside out. Disney pic star. Disney pic star. Inside out. You can see variables from the Inside out, which is to say that variables declared outside can Be seen from the inside, but you cannot see variables Declared in the inside from out. You can see inside out. Disney pic star. I say Disney pic star because it's hard to switch. It's easy to switch up inside out and outside in. Inside out. Okay. Good. So what does that mean? That means that i can see inside out. So inside this new print pizza, i can see that the value of this Pizza variable is hawain. This variable, i can still see it Because from the inside of print pizza, i know the stuff that's Outside it too. So print pizza still results in The right value, the value you'd expect. On the other hand, if i have another function called print Large pizza, and then here i'm defining a new variable called Large pizza, and that's a large four cheese pizza. So inside, that works. So over here, when i'm calling Large pizza, that works just fine. But outside, i try to use Large pizza and i get a reference error. My javascript blows up. Because i cannot see outside In. I can see inside out. So that large pizza, that is a local variable inside of Large pizza and inside of print large pizza only. Outside, that thing does not exist. And you will get an error like this one. Yes. So the question is, and this... It doesn't destroy. So the question is, if i go back a Couple of steps, over here. So i've declared here a pizza Variable inside print pizza. And does that override? Does that destroy it? Well, with javascript, it doesn't destroy it. Just for this scope, i can no longer access the previous pizza. I only have this new pizza. So what it does is that it has Basically an order in which it looks up names. If you name something, if you try to use something called pizza, It's going to look in things in order. It's going to say, okay, first, let me look at this current Function scope. It's going to look for inside print pizza. Do i have something called pizza? Okay. If it doesn't, it's going to look at the next scope above that. Do i have something here? It's going to keep doing that because You can have functions inside of functions inside of functions Inside of functions, but it's going to stop when it gets to What we call the global scope. And if the thing doesn't exist In the global scope, you'll get a reference error. But it does not override it. It's just that in this scope, My local variable pizza takes precedence over the one in the Outside scope. And once you define inside, You can't get the outside anymore, and there's a really Weird thing that happens exactly because of that. I don't have the example here, but ask me later and Okay. Okay. So the key thing to Remember here is this var part. It's because of this var. Because i'm making this a local variable inside print large pizza. That's what makes it local to the function. If i don't have var, i'm going to get a global variable. That is accessible everywhere. That is not a good thing. We're not going to get into why, but it's not a good thing. Stick to your vars. Stick to your vars and Scope. That's our goal here. Okay. So practical application of this Scoping thing, you can actually use that to your Advantage. If you define a, if all your Application is inside a function, other scripts cannot Access it. Access any of your variables. They're protected. They're protected from any Outside tampering. This is especially important when You're installing a bunch of wordpress plugins that Install a bunch of javascript that you don't Have time to read every single line of javascript that's Running on your page. You're adding all these other Scripts. Because if you have all your Stuff inside a function, then all your stuff is protected. They can't accidentally change the value of a variable or Rename a function or anything like that. They can't mess with your stuff. Everything is protected. So this looks weird, but you'll see this a lot. How does this work? Well, i've got an anonymous function Here, and what are these? What are these? Okay. Well, this is called an iffy. It stands for immediately invoke in function expression. And so even though i don't have a name up here, i can add These parentheses around the function definition but also After, and what that does is it invokes the function Immediately. It defines a function on the Fly and calls it immediately even though i don't have a Name. Now, if i don't put these parentheses Outside the function definition, around the function definition, I'm going to get an error. And these two parentheses are Actually just to run it because since functions are values, If you put the name of a function without the parentheses, it Just says, oh, yeah, that's a variable and doesn't try to Run it. So i need these two parentheses To run the function to invoke the function and then i'm Going to get an error unless i put these around the function. So this is a way, you'll see this all the time. This is a way to basically put all your stuff inside a function That's protected against other people, other scripts. There's a link up here to an in-depth article about iffys. It's like five years old, but anyway, it's still good. I promise it's still good. Iffy. You'll see that a lot. That's why i teach you. So scoping can also be used to make variables private. There's no way to make a variable attached to an object private By default. So if i go all the way back to that Example where i was doing, i was counting. I had pizza dot amount or greeting dot amount and i was Counting the amount of times i was running, greeting. Well, there's nothing preventing you from actually resetting That to zero or somebody else resetting that to zero. So to make these variables truly private, you have to Take advantage of scoping. So let's see. I don't have an example of the price. So remember that this works inside out. So for example, if i had this function, do pizza stuff. And i'm setting a local variable pizza called onion and garlic For onion and garlic pizza. And then inside that do Pizza stuff, i have a print pizza function. And i call that pizza function. This still works because of inside out. Inside the print pizza function, i have access to the var pizza Of do pizza stuff. That's fine. This works as an inside out. So when i call do pizza stuff, It sets this variable, it defines what print pizza is, and it Calls print pizza as well. Okay. But typically, what you do is, Well, this works because you can, this is called a closure. So when you have a function that makes use of a variable That's not in its scope, that is called a closure. So in this example, my print pizza function over here is a closure. Because it uses pizza. It uses a variable that's not in its scope. So now this is a really contrived example because you're Just calling this function that's making this function. It's calling this function. But okay. Let's see how you really use this. Typically what you do is you return the closure. Which is to say that if i call my function create pizza Printer and i send it a variable, i send it a value. And then i return this function called print pizza over here. So let's look at what this does. I'm saying, okay, var Onion printer equals create pizza printer. Create pizza printer receives this kind of, the type of pizza. And then it returns, they find this function print pizza. That says, hey, i'm just going to print that thing out. And then you're returning this variable. So onion printer is now print pizza. But it has, it's bound to the value of onion and garlic. So if i call onion printer, it's always going to print out Onion and garlic. I know. I know. It's complicated. It's complicated. So this is a way of basically making this function onion printer That always prints out onion and garlic and no one can tamper With that pizza value. No one can tamper with it. It's still there. Like, pizza remembers that pizza Is onion and garlic. It remembers that. But no one can go in and mess with it. No one can change the value of pizza. So you will see this a lot. You will see this a lot. You'll have a function that returns a function. And basically it's just creating a function with a certain set of fixed values. So just to recap, create pizza printer is receiving this pizza the string. It's creating a new function called print pizza. And it just prints that string, and then it's returning the new function. So onion printer is now print pizza, but except that this Variable pizza is always going to be onion and garlic. So, yes. Yes. Nothing changes. So notice that onion printer is analogous to print pizza. What are the arguments of print pizza? So the question was what happens if i pass in an argument to onion printer? Well, print pizza doesn't have any arguments. Create pizza printer has arguments. And that's only being called one time. And even if you call create pizza printer again with a new string, That will not affect onion printer. Because every time you call create pizza printer, This is actually creating a new print pizza function for that one call. So if i do this, if i say i have onion printer this, and then Pepperoni printer with a different kind of pizza, print onion printer remembers that I'm supposed to print onion, pepperoni printer remembers it's supposed to print pepperoni. So what you send to onion printer does not matter. Because print pizza doesn't receive any arguments. Oh, yeah. Of course you can read, declare the variable and change it. Yes, that works. No problem. If you pass into a variable into onion printer. So what happens if you pass into a variable with onion printer? Well, it just ignores it. It just ignores it. So there's no argument errors. So some languages, if you don't pass in the right amount of arguments, You'll get an error. JavaScript does not care about that. You can pass in 57 arguments into onion printer, and it won't Complain, but it won't make use of any of them. Because this function is not defined to use any arguments. So it just ignores them. So practical application of this function, again, making variables private. So if i have a create counter here, this is a much better Version of what i was trying to do before. I have a function create counter that it sets up a variable count. And then it returns a function in anonymous closure that makes use of count. So create counter is set to my counter. What does that do? It sets count to zero and returns the function that adds One to count and then returns that new count. So every time i call my counter, i'm going to get incremented by one. But nobody can touch my count variable. Even if i create 50 counters, each of those individual counters Will have its own count variable. Everybody will have their own stuff. Everybody is protected. There's no way that i know of to mess with the count, except by calling the function, the my counter function. So if you have your counter, i have my counter, and somebody else has their third counter. Everybody has their own count. Nobody can affect each other's count. And nobody can reset or touch each other's count. Everybody has their own count, and the function is the only one who is able to access that count. So basically what i'm doing is i'm making var count private. Every time i do create counter, i'm making a function, and i'm making a new count variable. And that thing is roped off. Nobody can touch that. And you can also use this to make properties and methods on an object private. Although i'm not showing an example of that, but that's something that has happened. That's called the module pattern. You'll see that a lot. Module pattern. All right. Scope. Wow. That was tough. Okay. So aside from function scope, there's also a thing called function context. So function context and this. Let's talk about that. So functions also have a context in addition to a scope. And the context is basically an object that owns the call to the function. That owns the call to the function. Okay. Let's see that in action. So every function's context in that particular call Is represented by this magical keyword called this. Every time you call a function, this is going to have a value. And you don't have to define that. That just happens automatically. It's magic. Okay. It's magic. So here i have another pizza function. Here my pizza is fancy arugula because some pizzerias try to get fancy And they just throw arugula on the pizza. And so i'm printing out the pizza and also printing out this. Okay. Which is the magically defined keyword. So let's see what that does. So this is magical because it changes Depending on how the function is invoked. Depending on how you call or execute the function. So it can have potentially different, it can potentially have Different and unexpected values and we'll see why. And boy, this is the source of so many problems. Especially when you're starting out. Everybody, like literally everybody gets hit by some sort of this Context problem. Like this will happen. Okay. Even if you know about it, it will happen. So the manner of execution of the function determines the rules For the context. The rules for this. We're going to see a couple different examples. Not all of them because one of them is really weird. So imagine that. The ones we're seeing are weird. The two ones we're seeing are weird. And there's a third one that's even weirder. That we're not going to see. Anyway. Okay. So if i have a regular function. Regular function just like the one i had before. Oops. Spoiler. Regular function. Just like the one that before. What's that going to do? It's going to print fancy arugula because pizza is fancy Arugula and it's also going to print an object called window. So when you define a regular function and call it just like You always do. That thing, in this particular case, This is going to be window. What does that mean? When you call a function like this with just the name of the Function in argument, nobody owns that function. That particular call of the function is like a ronin. It's like he doesn't have a master. And so window is the global object. What is window? All global variables and functions are Properties of window. It's the global object. Every javascript environment has a global object. I'm using here. I'm assuming that most of you are going to Be running javascript on the browser. And in the browser, the global object is window. So everything is on window. Everything. This is just a small sample of all the things that are on Window. The array class. The number class. The object class. The regular expression class. The console. The where we use console log. The document where you do Document on ready and all that stuff. Set timeout which you're going to see later. Everything, everything, everything, everything, everything That ever was in javascript is on window. So when you call a function like you normally do, this is Going to be window. The context is window. It doesn't really have an owner. So the default owner is the global object which is window. With me so far. The other main way to call function is As a method of an object like we already saw. So let's make a simple pizza object and call a method on. So let's get this simple pizza object. It's got two properties. Toppings and cheese. I don't know why you want to change the cheese of a pizza, But bear with me. Toppings and cheese. So toppings here are fancy. It's fancy arugula like it was Before. Like those fancy pizzarias trying to be fancy. And then cheese is mozzarella because it's mozzarella, guys. Come on. Why do you want to change that? So because i have this object called pizza, i can do pizza Dot toppings that will get me fancy arugula. Because i have this object and it has a property cheese, i can Say dot cheese and it gives me mozzarella. With me so far. So let's add a print method to that. So we're just saying pizza dot print and we're modifying this Object in real and memory and saying let's add a function to This. Let's add a method to this. It's called print. So it's going to do this. It's going to say console log. So i'm shortening the pizza To one line because it looks better on the slides. So let's see. Pizza dot print. What we're doing is console logging, this dot toppings, this Dot cheese and a bunch of strings. When you call a method, this is no longer the window because It has an owner. Print has an owner. The owner is pizza. So inside that method, whenever You call this, this is going to be pizza. So this dot toppings is really pizza dot toppings. This dot cheese is really pizza dot cheese. So you get this message, fancy arugula and mozzarella pizza. So this is like a self-referential thing. And php works the same way. You have this and a stabby Arrow and the name of the variable. Same thing. So here's where it gets Complicated. Apologizing in advance. Here it comes. Here it comes. If you assign that method to a variable like this, VAR print pizza equals pizza dot print because pizza dot print, Because it's a function in javascript, it's an object. You can assign it to a different variable. If you do that, this and you call that function like a normal Function because you're calling it like a normal function And not like a method, it no longer has an owner. It is, it went rogue. It goes rogue on you. And this inside this function now is window dot toppings and Window dot cheese. And if you don't happen to buy Some weird accident, have a dot cheese and toppings variable That are global, you'll get undefined and undefined pizza. And i think we can all agree that nobody wants an undefined pizza. We want to know what's on there. We want to know what's on there. That's the only joke i have today, i'm sorry. So, so you can do this. This is crazy, but you can do this. You can say, okay, i'm going to take this method. It's an object, i'm just going to assign it and then call it And then boom, your this is, your this is all Borked. Your this is all screwed. So what do you do? What do you do? Oh, you want to take a picture? Okay, you're good. Anyway. Cool, right here. So one thing you can do. One thing you can do. Not saying this is the thing That you should do, but it's a thing you can do. After you assign that pizza, instead of calling it like you Normally call it, you use this method that all functions have. It's called dot call. What dot call does, it allows you To set the context of any function explicitly. You're saying, okay, call pizza, but make sure that this is pizza. That's what that's doing. So if you do that, this and this Inside of that function, they're going to work like you would Expect them to. We're getting to that. I'm guiding you. You have to trust me. If you don't do this, what do you do? Well, before we get to what you actually do. The problem with this is that you have to do dot call every time You want to call the thing, and that's not practical. That's not practical. You have to do dot call, dot call, Dot call. It's very, very wordy. And just as an fyi, wait, no. Okay, but the advantage of this, the advantage of this of Doing dot call is that you can actually change the context Of the function on the fly, which is pretty cool. For example, if i have a second pizza object where the Toppings is bison. And the cheese is cheddar. I don't know why you want to do that. I'm sorry. I don't know what mozzarella. Anyway, so i can do the same. So this is still pizza dot print, which is this function. And i can say dot call pizza, and that will do what it did Before, but i can also say dot call other pizza, and it Just changes dynamically. That's pretty cool. That's pretty cool. That's pretty cool. So as an fyi, you can also do a similar thing with dot Apply. Dot apply is similar to call in this Way and in this way only. There is another really, really Cool and subtle difference between dot apply and dot call, Which we're not going to get into, but if you're curious About that, ask me later. I just want to be thorough. Okay, so again, you have to do it call by call. It's not practical, so you have to do this every time. But another alternative is to use bind. So bind is another method on function. Every function has this bind method. And what this does is it fixes the context. It fixes the value of this for this function. So when i'm assigning my function, if i do pizza dot Print dot bind and then say, okay, bind this to pizza, Print pizza is now going to be bound to pizza all the time. The pizza object is now married to print pizza. Like you would expect it to. And so now every time you call Print pizza, you don't have to do any fancy tricks. It just works. It just works the way you want it to. It just works. Okay. So what this is really doing is it's creating a new function. It's creating a new function with the this fixed. So i'm here, as an example, i'm just saying, okay, print pizza, Is it equal to pizza dot print? are they the same object? No, they're not. Print pizza, because i did bind, That automatically created a new function and returned it. So they're no longer the same function. They do the same thing. The difference is that pizza dot print, that guy has no Loyalty. He can change the this anytime. Print pizza, that guy has loyalty. He's bound to this pizza Object right here. And furthermore, you cannot change The context of that function anymore. That new function that bind creates, that thing is set. It's baked in. You cannot change it. So even if i do that new bound function, if i try to do Dot call and try to change to this and try to be clever, Won't work. Won't work. It's immune to any changes in context because of dot bind. And that's also pretty cool. So practical applications of this stuff. Practical applications of this in context, the problem, the Real problem is that in a callback, this is always going to Be window. Why? Why do they do that? so, for example, set timeout. So here's an example of this. If i did this with anonymous Function, it would look really weird. That's why. Because set timeout takes this Other argument that makes it look really weird. So name functions, i'm saying pizza dot print, set timeout. But wait three seconds because it's supposed to do milliseconds. And then it says, okay, after three seconds it says undefined Undefined because pizza dot print, the context is not Properly set. So some pseudo code for set timeout. Basically what it does is it receives that function as this Variable callback. So it's basically assigning it to a Customer. So it does other stuff and then Eventually it does this callback and calls it. That's why, because i'm calling it with no object, with no Owner, that's why this is window and i get the problems again. Damn. So how do i fix that? How do i work around callbacks in context? a couple of Different things you can take away here. Number one, bind. Like we saw. If you create a new function with bind and you bind it to That pizza, nobody can change the context. So when you pass it to the function that receives a callback, Boom. It's bound. No problem. It's always going to work. I can know for sure that this is Going to work. This, unfortunately, though, is a Bit slow. So if you have to do millions and Millions of binds, your browser is going to be like this. Okay. So not a concern at first. Okay. Wait for this to happen. But just so you know, it could be a problem if you get Millions and millions of users. Okay. How am i doing on time? five minutes. Okay. All righty. Three minutes. Okay. Well, i'm about to wrap up. All right. So bind is one technique that you can do to Prevent the callbacks from transforming your method into Like a non-method function. The other thing you can do is Use a closure. If you make a closure, if you Make a function called print pizza, it remembers that pizza Is this thing. And then if you pass that under, Then that will work. Okay. And so essentially you're Doing basically the same thing as bind. You're making a function, a new function that's bound to Pizza. But you can do it manually, Sometimes, you know, maybe because arguably this is more Readable. Arguably it's easier to Understand, but it's more lines of code. So trade-offs. But this does the right thing. You'll get fancy, regular and mozzarella pizza. Okay. All right. That's it. That's all for the terms of the Learning. We did it. Good job. Good job. Okay. So i do have an exercise In store for you, but i'll put that in the resources. Basically, in this link, you'll find all my resources. They're not there yet. Right now there's only a few Links and the links to my slides. You'll have that. I'm going to be adding, in the rest of the day, a Couple of exercises for you to put this into practice. And also some more in-depth resources that specific Articles and blogs about all this different stuff that You can, you know, read on your own pace. So bit.ly-exploring-js-functions. And that's going to link you to the github markdown file. All the links are going to be there. So, for example, you'll have things such as a link to note School. Note school is a really good Resource to learn a bunch of different javascript Subjects, not just node js subjects, javascript Subjects. Those are interactive Tutorials in your terminal. They'll give you an Exercise. They'll give you some stuff to Consume, some things to learn about, and then you'll have to Kind of write the code that makes it what they're asking for Work. This is a really good thing. A really good resource. And so they cover things like Functions. They cover things like the Basis of javascript. They cover things like there's Even one about git. There's a lot of different ones. I think there's graphics programming. There's new ones coming out all the time. So note school is a really good resource for learning. There's more javascript in depth. Also, as always, mozilla Developer network has a lot of in-depth articles about things Like context and scope and all that stuff. Some of these examples i took from mdn. I just renamed them to pizza themed examples and made it Work. So mdn, they have a specific Javascript section with a bunch of really cool stuff. So definitely check that out. And third major resource i Can recommend is effective javascript. It's a book that came out, i think, in 2014. Really good book. It's written by a guy named Dave herman. He works for mozilla. He works on the javascript standard and really good in-depth Article about every nuance that you could possibly be Interested in in javascript. And spoiler alert, Before wordpress, i have purchased ten books. Ten copies of these. And we're going to be doing Something with them. I don't know if we're going To raffle them or what, but ten people are coming away With a copy of this book. And anyway, i've been in azar. You can follow me pretty Much anywhere at my last name and twitter, et cetera, et cetera, Et cetera, et cetera, et cetera. I'm there and everywhere. And so what i do is i work for ironhack. You can see my shirt here. I'm the lead instructor there. We are coding boot camp here in miami and also in Madrid and barcelona that we teach people web development. So a lot of this stuff is stuff i had to teach beginners. You guys know javascript at least already. Imagine if you didn't know anything and you had to learn this. So these guys, every two months, i have to do this. Luckily they can ask me questions there. So these are the students i'm teaching right now. They're a really awesome group. So they're actually going to Work on their projects for the next two weeks. And the reason i tell you this is because we're looking for Mentors to help our students along their journey. To understand things like i tried to teach you today And hopefully i was successful with at least some of you. And so if you're interested in helping out, being a mentor is A four-hour commitment across two weeks. Obviously you have to be local. I know that all of you are. But if you're interested in doing that, you want to pay it Forward, talk to me and apply to be a mentor. And hopefully a lot of you will want to do that. So that's all i got. Thank you so much for your Patience and for bearing with me and learning scope. And again, that link to any further research, i will be Posting exercises on there for you guys to do. At least two exercises. Thank you.