 All right, good morning. I think you can hear me. That's pretty loud. So welcome to the Learn JavaScript deeply track that we're going to have today. Really quickly, I'm just going to give a little bit of information about kind of what's going on. I know part of what I'm going to talk about is in the schedule, but I just figured it'd be worth kind of reiterating how this is going to work today. So the whole track today was something that we put together with a blank slate. So we knew we had an entire day to plan out an entire course of JavaScript. And the goal was to take someone who knew a little bit of JavaScript, probably was using stuff with jQuery and take them from that to being ready to start to write React. So that was the goal for the whole day. So what we did is we sat down and we came up with a list of classes that we wanted to give or periods of instruction, and we wanted them to all build on each other in a way that made that feel very seamless. And hopefully that's what we've got. You'll tell me later if it was horrible or not. So the way it's going to work, though, is there's three presenters today that are going to be presenting. So I will be presenting three of the talks. I'll be doing this talk. I will also be doing the Intro to React and Advanced React. And then we have Kevin, who's from Human Made. And he will be giving the modern JavaScript talk. And he will also be giving the next JS talk at the very end of the day. And then we have Jean, who's a co-worker of mine. And he'll be giving the React Native course so we can start to build mobile apps. So that's kind of the plan for the day, even though it says there's multiple names. That's kind of how it's going to work out. Each talks about an hour. And we're going to try and stick to that, of course, because we feel like while we've made this thing a complete training program, we understand that people are going to probably come and go and only catch parts of the talks. So there were some instructions I was given. And one of the big ones was the parking. So I guess if you haven't registered your car through parking on the website, there is a link that you can go to. And from what I've been told, you have to log into the website and actually register your car there. So if you haven't done that, it sounds like you may be in for a surprise later today. So maybe you should do that. And I'm pretty sure he told me about five other things. I remember one. And that's that there's no vegan lunch today. I feel for you. I used to be vegan. A leaner, skinnier version of me was a vegan. Maybe I should get back on it. I'm not real sure. The results say I should, I think. But anyway, I'm just going to talk about myself once at the very beginning. And then the rest of the talks today, I'm just going to assume you know who I am. So my name is Bobby Bryant. I work at a company called Crossfield Digital. It's an agency that has offices here in Miami as well as in New York City. And we do Rails development, WordPress development, and we do mobile apps. And then we also do some combination of the three. So it's not uncommon for us to do a WordPress back in with a mobile app front end or something like that. All right, so JavaScript beyond jQuery. So the journey starts here. So what this talk is really going to be about is it's going to be about learning some fundamental things about JavaScript. These are things that when you're using jQuery, kind of get abstracted away and you don't really see them or hear about them or think about them. It's such a good library that it almost masks a lot of how JavaScript works. And so in order for us to use React, we really need to understand JavaScript. And the reason we need to do that is because one of the key features promoted by React is that at the end of the day, you're just writing JavaScript. So that's a great benefit. But it's also a big detriment as well. Like if you don't know JavaScript, you're going to have a very hard time picking up React because at the end of the day, it's a very small view library that only does a small subset of things. And you'll kind of start to see that as we go out throughout the rest of the day. But really quickly, let's just talk about jQuery. Because one of the things I don't want this talk to be is like me saying jQuery is horrible and you should never use jQuery, because that's definitely not the case. Again, I'm just saying that it really limits your view of how JavaScript works under the hood because it does so much for you. But jQuery, the whole reason that we, the primary reason we have jQuery is because at the time in 2006 when it was released, browser support was horrible. And writing JavaScript in any type of application or website was extremely difficult with the cross browser compliant issues that we have. You would end up writing a whole lot of code just to do a very small thing. So it was created by the founder to improve the JavaScript language. And I would say it did a pretty good job of that. Initially, it just worked with the DOM. And he credits the fact that he had a lot of documentation in place as to why it took off so well, because it wasn't the first tool out there doing this. There was prototype and mood tools as well. But he credits the fact that he had really good docs that it took off. And surprisingly, things like Ajax, something that in the WordPress community we rely on heavily, that was not something he even built. It was just community driven and kind of, it came later. And he also provided this explicit plug-in process so that authors could make their own jQuery plug-ins and make it even more useful. And I'm pretty sure we've all probably used lots of jQuery plug-ins. And then for us, why would we want to use jQuery? Well, it comes prepackaged in WordPress. So in the broader JavaScript community, people really do bash on jQuery, I think. And one of the things that they'll say is you can do anything with vanilla JavaScript as you can with jQuery, and to a large extent that's true. And one of their biggest reasons for wanting to do this is why would you want to load this entire library, which is pretty big, onto your site if you don't really need it. But for us in WordPress, that doesn't really apply, because we have it whether we want it or not. So that's not really an advantage for us to want to move away from jQuery. Really, I think the biggest advantage for you to want to move away from jQuery is just to understand the language better. One other thing on here, too, real quick, is that surprisingly, with vanilla JavaScript, it has a lot of methods that can do a lot of functions that do a lot of stuff, but surprisingly, some of them are actually not as fast as they could be. And so jQuery also solves some of those things by making similar methods that do the same thing, but even do them in a more performant way. And even libraries like Lodash, which is another popular utility library in JavaScript, its whole purpose in life is to not only make utility functions that make your life easier, but make them even faster than what you have with the actual vanilla methods. All right, so the first thing we're going to talk about is we kind of transition from jQuery to JavaScript as traversing the DOM. And the reason we're going to start here is because it's the easiest one, not going to lie. So at the very bottom here, we have var li equals $li. So this is how you would go and find an li on a page with jQuery. And then at the top, it's kind of how you would do this with vanilla JavaScript. So if we wanted to do the same thing, we could do document.querySelector.li. So what's happening here is the document is the root element for the whole page. And querySelector says, look down that tree from the parent command and look through all of its children and find the first instance of an li. So when we say document.querySelector, we're saying in this entire document, find the first li. Likewise with querySelector, you'll see that it's very much like the jQuery initializing method is you can get stuff by class. So you can say .querySelector and the do .myClass, whatever your class name is. And again, it'll go find the first instance of that class in the document. And again, kind of like jQuery, you can use it. It's very versatile, just like jQuery, where you can do stuff like with finding inputs that are text fields. And you can even do some I don't, I'm not going to lie, I Googled that last one. I don't really do that kind of a query. But you can actually do some CSS3 attribute type queries with document.querySelector. So other than typing more, it's about the same. But it's not, but it's about. All right, so the UL, again, so here we're going to do document.querySelector and we're going to go get the first unordered list on the document. And then the next one, var listitems, we're going to say UL.querySelector, go find the first li. So listitems will actually should not be plural. And what it's doing is just getting the first list item within an unordered list. So instead of going document.querySelector, again, I'm just trying to show you that querySelector is very much like find in jQuery, where you're just going to look down the tree at its children of the document or the parent element and find the first instance. And then also you can change stuff together just like you can with jQuery. Personally, I don't really do that. I really want to do document.querySelector, get UL. And then once I have an unordered list, I'll usually do like an if to check if it's null or undefined. So I want to make sure that it exists before because if you were to write this code and there isn't a UL on the page, it's going to give you an error because when the second querySelector runs, it's going to be trying to run querySelector on something that's undefined and you're going to get an error. But again, it's very much like what you would do with find events. So in the very top is the vanilla JS way. So document.getElementById. So there's another way to query stuff on the page and that's by ID. And it has a special function that you call called getElementById. You give it an ID and it'll go find that element. And then to register an event, you'll do addEventListener and then add your event and your function. So pretty much everything past addEventListener is exactly the same as what you do with jQuery. It's just more typing. I don't know if you see a trend here, but it's just more typing. But the same events exist in jQuery is in vanilla JavaScript and you'll find that changing over is pretty easy. You just, instead of typing on, you're going to do addEventListener. So working with classes. So if we look at the very bottom, you can see that I go and I find an LI that has a class or my class and then I call li.addClass and I add a new CSS class to that item. So this is something that you'll commonly do whenever you're trying to do animations. So if you use CSS animations, usually by just adding and removing a class, you can make some type of CSS transition kick in and have these cool fading in and out effects. So this is how you would do that with jQuery. And at the top, again, if you look at the first two lines, that's how you would do the exact same thing as the bottom as on the top. But then I also list out here how to do other stuff, like removing a class, toggling a class, does it contain, does this element have a class in its list of classes? But again, you have to type more. So this is a really good resource for traversing a DOM. It's called You Might Not Need jQuery. I only briefly use jQuery myself for a limited period of time before I started to just write vanilla JavaScript. But this was really instrumental in helping me switch over, because essentially I would just have it open in a tab, and I would just search it do command F to find whatever it was I would have wrote in jQuery, and it has the equivalent right beside it in JavaScript. And in the rare case that there is still a cross browser thing where maybe you're trying to do something that doesn't get supported in IE, because that still does exist a little bit, it'll tell you even how to do it so that it'll work cross browser. And then the Mozilla developer tools. So anyone here who uses a codex? Anybody? Codex. Who here thinks a codex is written in another language? And it never helps. One person's willing to admit. So this is very much like the codex, where when you first get to it, it's like this is in another language. I thought this was supposed to help me. It's not helping me at all. It's going to be just like that. But as you start to work with it, you'll find that it has great code examples, a really good documentation about all of the various pieces of JavaScript when you're working with objects in the DOM and some of the other stuff we're going to talk about today. So it's a really good resource. All right, so if we bring this full circle, what we get is that query selector in Manila.js is very similar to jQuery's dollar sign parentheses initializer. That's not the name, but that's what I call it. And then when you use this to find an element with jQuery, what it returns back to you is what's called a jQuery object. And so this jQuery object has a reference to the elements that it found, and then a whole bunch of all the methods and functions that you run on that object. Whereas in Manila JavaScript, what it returns from you is what's called a node element. And again, if you go to the Mozilla tools, there's a huge thing. It talks all about the node element. And just like jQuery, where jQuery has like dot find and dot add class and all of these things, the node list elements in JavaScript have all of those same things. So if we go back here and look, class list and add, these are just methods that are on the node list element or add event listener or query selector. These are just functions that are on this node list element or object in JavaScript. So they do work very similar. And I hope to make this even more clear as we get deeper into the talk. So if it's not clear yet, bear with me, I promise it'll get better. All right, so JavaScript objects. So we would probably talk about something a lot more simple than objects, but I felt like to really understand JavaScript, you really need to understand objects. So when putting together this presentation, one of the problems that I had or faced was that when you're trying to teach something like this, there's like this chicken and egg problem with what should come before what. So I've reshuffled these slides many times. But we're gonna start with objects right here. And the really important thing to understand is that nearly all objects in JavaScript inherent from this root main object. And also these links that you see here, I shared the slides out here on Twitter. I didn't put that out there. So my Twitter is Mr. Bobby Bryant. And if you go there, you can get these slides, get access to them. And these links, they take you to a thing called JS bin, which is like a sandbox JS environment, which I go to all the time just to like hack together some quick little thing. And what you'll see, you'll find a lot of the code that I'm gonna be showing you in here. You'll actually find the code at these links and you can mess around with it and run the code and see and break it and fix it and learn more. And I would encourage you to do that because the URLs are pretty hard to read. All right, so the first and most, the easiest way to create an object in JavaScript is what's called object literal notation. So right here I have var me, so I made a variable and I make it equal to these curly braces. And that's literally how you would instantiate an object really quickly in JavaScript. So this object in particular has a property called name that's set to my name. And then it has a method or a function called say name, which simply logs out this dot name, which will log out the name. So if I were to write this code and then run me dot say name and execute that function, it would say Bobby. Very simple, this is like the, this is the quickest and easiest way to create an object. Likewise, you could then take that same var me and you could say var u equals me and then you could say u dot name equals John. And then if you said u say name, it would say John. But if I were then to go say me dot say name, it would say John again. So you would have overwritten my object that you had inherited from essentially. So it's a little different than probably what you're used to in PHP. And this is a common trend that you'll find in JavaScript where there really are no private or protected methods per se, at least maybe not until later talks. But there's ways to get around this and we're gonna see some of these later. So here what I'm showing you is if you were to take this same object that I created and do me dot to string, you would actually get something out print it out that would say object object. So what I just did there is this me object, I called it a function that I didn't define over here. And the reason this works is because when you create a object literal like this, you inherit it all of the properties and methods from the core JavaScript object with it. And so I got all these other methods and there was a couple more that come free of charge because I created an object. And here I'm just showing you that that does work. But just to show you that I didn't do it except if you go me dot YOLO, which would be a great function. It gives you a type error and it says me dot YOLO is not a function, which I'm a big fan of reading errors. And if you really take the time to look at that error, it's saying that the me object doesn't have a function called YOLO. And it doesn't because I didn't define it and that's not something that's part of the core of JavaScript. All right, so the next way that you would create an object and this is what you'll see more traditionally done, at least before the newer syntax stuff came out, this is probably how you would go about creating an object. Especially if you were making a library. So here what we're gonna do is we're gonna define a function and I've named it to var person. And the fact that person is uppercase is not really anything special. It's just kind of a best practice that people generally do is uppercase variable names for things that are gonna become an object. So this function just takes a name and then it just sets that name to this dot name. So down and then once you have the object or once you have the function defined then you can initialize this object and you do that using the new keyword. So something very similar like the object oriented stuff you would do in PHP. Under the hood it's not anything like it but it just feels and looks similar. So you'll initialize a new person and pass in a name and then if I were to console log out me dot name, it works as you would kind of expect. So this is a very simple example. Obviously it doesn't do anything yet but we're gonna make this a little bit better. So the next thing that we can do once we define a function like this is that we can start to work on what's called the prototype and this is where a JavaScript prototype will inherit and stuff comes in and to be honest with you that's not something we're gonna dive too deeply into today because it's a very confusing and complex subject but I have given some talks about it at previous word camps and I think they're on wordpress.tv. I have like a 50-50 chance of my talk being on wordpress.tv so it may be there, it may not, if it's not I'm sorry. So what you can do is you can say person dot prototype and then you can make a new function name. So I'm gonna make a new method on this object or a function called say name and it's gonna equal function and naturally I'll have access to the this which is the scope of this object and I can say this dot name. So very similar to what we did with the object literal notation but using constructor functions. So here you can see that I'm going var me equals new person body and I say me dot say name and the same kind of stuff applies with inheritance that you saw with the object literal notation. So here's a little bit better example of like it's a slightly more real world. So here we're creating an object called promo so you can imagine this is promo codes for an e-commerce site and all it does is initializes an empty array called promo codes and then what we're going to do is we're gonna set two more methods on this object called set and is validated and I don't want you to focus too much on like what these functions are doing right now but what as far as the code goes but what is happening is set simply takes a name of a new promo code as well as the percentage you want to give off for that promo and pushes it into the array and starts to build up an array of all the promos that you have that are good and then is valid simply takes the name of a promo and checks to see if that matches up with any of the promos that you've registered. So here's how we would use it. So we'll do var promos equals new promos then we'll do promos dot set and we'll give it a name like 50% and then we'll say that that's half off and then if I were to console log promos dot is valid 50% it would say true because we just set that and if I did 40% it would say false because I haven't set that. So really we're just creating like some getter and setter methods essentially for this promo codes array but if I were to do something like this where I wanted to do chaining and I did 50% and 40% I would actually get a type error that says cannot read property set of undefined and the reason that set doesn't work and that second one where I do 40% is because the result of doing the first promos dot set does not return anything so therefore the second one doesn't get anything it gets an undefined and so therefore it can't do anything but we can fix this and all we have to do whenever we're doing stuff with our prototypes is just remember at the end of the day with any of our methods so long as we return an instance of this then any type of function that chains after it will then get that copy of this and it'll actually work. So now if you were to run this both of them it wouldn't give us an error and both of them would come out as being as valid. So that's a really neat feature to remember about if you wanna do chaining. So one of the downsides to this is that again there's no private or protected methods. So if I were to initialize a promos put in a 50% discount into my promos and then if I were to go promos dot promo code which is that array that's inside of our function that we're kind of manipulating to store all of our promos I can actually reassign it just without anybody could just take your code and reassign it to something else like a string and now when we were to run is valid it's gonna say this.promocodes.filter is not a function and the reason that is is because it's expecting this.promocodes to be an array and array is something that has a filter function. Now it's getting a string and string does not have a filter function. So because someone overwrote our code we're getting this error and again there's gonna be ways that we can solve this and we're gonna see some of those in a little bit but it's just worth knowing that nothing's safe in this world. Oh yeah, I actually had a slide for that. That was some smart thinking. All right, so JavaScript functions. So again kind of the chicken and egg thing we've talked a lot about functions in a roundabout way when we were talking about objects but now we're gonna talk about JavaScript functions in a little more detail. One of the things I'm not gonna talk about is I'm not gonna talk about like there's three different ways to like make a function and all that stuff. We're really gonna talk about what makes a function special in JavaScript. That's really what we wanna focus on. So in JavaScript functions are what are called first class citizens. So if you've been doing a little bit of homework and trying to learn JavaScript you probably didn't get two seconds in before you heard someone saying this and so yeah. In programming languages what this means is in programming is when you're able to pass, return and assign a type, in our case a function, that function is considered to be first class citizen and you can do this with functions in JavaScript. So let's look at what that looks like. So this is assigning. You've already seen this but we're just, assigning means that we can create a variable and then assign an anonymous function so to say to that variable. So here we've assigned a function to the variable myassignment and that just means that we can call myassignment parentheses and pass into numbers and it'll add them up. So simple function and that's assignment. Callbacks, so again to be a first class citizen it means that you can pass a function to another function. So here we have the top we're defying our past function. So this function takes an a and a b and then it takes another function which is funk and what it's gonna do is it's gonna do the whole a plus b like it did before and then it's gonna pass the results to our callback function and our callback function here is we're gonna call double and all it's going to do is double the value. So when we run this we'll say past function or first function we'll pass it to one and the two and then we'll just pass it the name double of our other function that we've defined and you'll get six because it'll do one plus two and then it'll pass it to this funk and then funk down here gets that value and multiplies it by two. So this is passing a function and better known as callbacks and then returning functions. So functions can actually return other functions. Now this right here is not gonna look like it makes much sense, sound and look really stupid but it's probably one of the coolest things that you can ever do and again it'll make sense, I promise. I feel like I'm making a lot of promises and I'm making a lot of promises. Anyway, return function. So we're gonna define a function and that function is gonna return another function which really is just our original function we wrote which was a plus b. So if we were to do var returned and were to execute this return function what we would get back is another function. It wouldn't give us a, it wouldn't do anything yet. It simply returned us another function which again seems pretty pointless. So I'm not sure why that's on there twice but so we do var returned equals return function and then if we were to actually execute the return which is what we say here again this is a function then we pass our values in and we get three. So again doesn't seem real useful yet but it's just important to know that that's what makes it a first class citizen and here soon you'll see that it is actually very powerful. But one of the things I really wanna point out here is that in JavaScript it's all about objects being linked to other objects and this is from a guy named Kyle Simpson. He has a bunch of books on GitHub that you should absolutely check out called You Don't Know JS, you don't know JS. It's all on GitHub, there's lots of them. They're really, really good. And really what you come to find out in JavaScript is like almost everything is an object and they're just inheriting from each other. So what does this look like? Well earlier when we were doing the traversing the DOM, again I told you query selector returns you a DOM element. Well if we were to go look up the element in the Mozilla tools, we'll see that that element has properties like children, class lists, some of these things you saw and it has methods like get attributes or get bound in client wreck. That's if you're trying to do some scrolling stuff without jQuery which is painful. So you can see here that the query selector just returns you an element that is just an object and it has properties and methods just like our objects we were creating when we were doing object literal. It's not anything special, it's just an object. Likewise, we haven't talked a whole lot about arrays yet but arrays in JavaScript, they're just objects and just like any object they have properties like length and they have methods like filter and some other and find and some other stuff that we're gonna use later. It has all of these functions and this is just scratching the surface by the way, I couldn't fit them all on the slide but an array is just an object. Functions, they're actually objects and they have properties and they have methods and you saw that when I did the two string in an earlier slide but functions are objects as well. Strings, guess what, they're objects and they have properties like length and they have a whole bunch of methods which if you've done a little bit of JavaScript you've probably seen where you're uppercasing stuff or swapping things around or splitting strings. Those are, it's just an object that has a ton of methods and functions attached to it. And this is just an example of kind of showing you that. So in JavaScript if you wanted to create an array you can just do square brackets and that's like initializing an array. And you can see here if I do console log square brackets dot length, I didn't do anything, I just square brackets dot length. It'll give me a zero as the length of that array. So it literally initialized the array and it has methods on it right away. Like there's no real initialization that needs to happen. But you can't actually call it like I do on the second line where I do new array. And if you do this it'll yell at you and say that's not how you're supposed to do it. But I just wanna show you that it works just the same. So, but again I just wanna drive home the point that these are just objects, they're not these mythical things that have weird, like some of them have these weird functions that you can call. They're just objects that have properties and methods. That's really important to understand and that they inherit from each other and can share functionality. All right, so closures. Has anybody heard closures, the term closures? All right, so closures was one of those things that I've heard for the longest time and well they were partly scary and I didn't really understand them. And once I finally started to figure out what was going on, I was like, this makes JavaScript the most amazing language ever. So, so what this means, let's read this definition. It says, a closure is a combination of a function and the less lexical environment within which that function was declared. No wonder it took me forever to figure this out. We're gonna explain that a little bit better and again there's some links that I'll take you to some code that is kind of referenced in this next slides. So, closures are essentially a combination of using functions in what's called variable scope. So really what closures are is it's just using functions and using how variable scope works in JavaScript which we're gonna look at and using that to our advantage to kind of essentially cache values and remember them for later. So first we're just gonna define a basic function. So we're gonna start off with the basics. So here we have a function called calculate discount which takes a total one of discount. We're gonna replace the percentage that it gets so the 50% so that we get a number and then we're just gonna do some math to figure out what the discounted dollars we should remove from this total. So we haven't done anything yet with closures. This is just a function we're working with. But one of the things we could do, so instead of having a discount get passed in, we could actually just have discount being defined in the same scope as the function so they're on the same level within the file and what that means is that that function actually can still access that discount variable. It still can see it and knows about it even though it wasn't passed or defined within the function. That function just inherently knows about this. In PHP this is where you'd have to do the use clause and actually explicitly pass it in and JavaScript it just happens for free. So this function would still work. So this is just me kinda walking through more or less what I told you but you'll see that it still calculates out because it can access discount. However, if I were to console log percentage outside of the function so we've already closed off the function and we're now back outside the function, if I were to try to console log percentage which is inside the function, it would say undefined. So a function can reach outside of its scope and pull in variables but nothing can reach inside of it and pull stuff out and so in essence that's what we have as a closure. That percentage is not accessible out to the outside world and we can do some really cool stuff with this. You know that seems like a ill time slide but I'm sure there's some useful stuff there. So let's start to use this. We're gonna use our new understanding of closures and we're gonna use that really crappy thing we saw where we could return a function. So we're gonna create a function, the same function called calculate discount and it's gonna get past the discount and what it's going to do is it's gonna return a new function and that function is gonna expect you to give it a total and it's gonna do the same logic that we did before where we calculate how much off the discount should be of the total. So it's literally the exact same function, it's just it's returning a function and that function expects a total. What this lets us do is it lets us do things like this where we can kind of start to compose new functions out of an existing function. So if we were to run calculate discount, again it returns a function and we know this. So half off isn't a value, it's simply a function. So we can do calculate discount 50% off, calculate discount 10% off and we can assign those to half off and 10% off variables and now we have this half off function and 10% off function and they're sharing logic through what's called composition. So this is vastly different from inheritance and the things that you would do with classes in PHP but it's kind of powerful and it uses the same concept of trying to reuse code and the reason that this works is because half off again is a function that expects a total but it also remembers that discount. It still knows about it, it saves it as a reference. It knows what discount is even later and if we were to run these and give them totals it would give us the same results, like half off they should get five off and if 10% off they should get a dollar off of their $10 purchase. But again we're using closures, we're using that whole concept of first class citizens and returning functions and using variable scope to remember those. And this is important because you're gonna see stuff like this when you start to do the react stuff. So this is another thing that you can do that's really cool with closures and it's called the revealing module pattern. It has a couple of names, that's the name that I go by. So what we've done here is we've defined a function. This is very similar to our original code that we wrote where I showed you that you could override the promo codes array. But now we're gonna fix that. So before we couldn't have a private or protected method. So what we're gonna do here is we're gonna use the power of closures to try and give us a pseudo private or protected method. So this is the same code as before where we can set a promo or get a promo or get the discount or all that kind of stuff. And I've shortened the functions because I don't really want you to focus on the functions because that's not what's really important here. What's important is that we have our array that we initialize and we have these functions that are set within this other function. And at the very end what we do is we return an object using object literal notation and we specify like add is add promo and discount code is discount code. And what this means is that we can actually call these methods because it's returning an object. So let me just show you this and make more sense. So we do var promos equals create promos. Notice you don't have to call the new keyword. And then right away because we returned get promos we can do promos.getpromos and it'll show us that we have an empty array because we haven't pushed anything in yet. Now if we were to add one do promos.add which again is something that we explicitly returned you'll see that we get an array that has all of our promos and right now we just have one promo. And we can do total and we can get our we can call promos.getdiscount because we've exposed that. But if I were to do console log promo codes and try to access it it'll say it's not defined. So again all of these properties or all of these variables inside of this function and even things like add promo, get promos or add promo, get promo you can't even call those. Those are protected via the power of closures. The only thing you can access is what I explicitly said you could access down here. So I've essentially made getters and setters like we did before but now we have this protectiveness about our code to where someone can't just inject in and completely wreck everything. Right so it's a way to build out a complex object give it a lot of functionality kind of like you would with a class and then return an object and explicitly state right here in the return what people should be able to access. So this is the revealing module pattern. Until I started doing more stuff with the ES6 and started doing more modern JavaScript this was like a go to thing for me. Another common thing that you see with closures is what's called ifys which is immediately invoking function expression. I don't think I got that wrong. It's called an ify, it's a really weird name. So really what's happening here though is that you're creating a function you're defining a whole bunch of code that code's actually running so you've defined a function, you're calling the function, you're logging stuff like you're writing your entire application code but it's inside of a function that's then wrapped in parentheses and then it calls itself right away. So this is again a weird thing about JavaScript's functions is that you can define them and immediately execute them right away and that's what you're seeing here and what's cool about that is that outside of all of this code if I were to try to log promo codes again I couldn't touch it because it's not accessible to me. This is a common thing that you'll see and you'll actually see this a lot in WordPress development where you don't have a build set or a build process in place so you end up with like these massive JavaScript files and you don't want people just being able to access your stuff in the global state. You'll wrap everything in an ify and just kind of close it off from the outside world so that no one can mess with your code. So it's like a, this was more of a traditional best practice again prior to the more modern JavaScript stuff. What I just wanted to show is it's another example of like how closures work. All right, higher order functions. I hope you're ready. These are the coolest thing in the world. I'm hyping this stuff up. I'm hoping you guys think it's hyped. This is pretty cool. So in my learning of JavaScript I was starting to do a lot of the DOM stuff. I'm giving a little bit of history here real quick. Life story. So I'm learning a little bit about JavaScript. I'm really just doing DOM manipulation stuff. But anytime I really need to do anything really difficult I'll send that stuff to like an Ajax thing and I'll do it all on PHP because that's really what I know. And then I found a YouTube video which you should definitely check out called Fun Fun Function. Mainly just because the name's cool. But Fun Fun Function is this guy from Sweden. He's a JavaScript developer and he has really fun and very informative talks. And he gave some talks about higher order functions. And when I saw those talks and I really started to grasp how higher order functions work it opened up a whole new world to where like I pretty much could do anything I wanted in JavaScript. And that was kind of the end of my PHP. I still write a lot of PHP. That was the end of my love affair with PHP and the start of JavaScript. So let's look at them. So higher order functions. So a higher order function in theory is any function that accepts or returns another function. And in JavaScript, the array object has three functions on it called map filter and reduce that are very useful. So map is useful if you just want to loop through an array of data and then modify each item in the array. Filter is if you want to loop through an array of data and pull just certain parts of it out based on some conditional logic. And then reduce is a super complex one that loops through an array and essentially it returns a new single value. But that's a bit misleading and we're going to kind of debunk that here in a minute. Reduce is actually way really powerful. Reduce is actually so powerful that you can implement map and filter within it. So let's take a look. So here I have an array called data and it has two objects in it and each of those objects has a name and a job. And what I want to do is I wanted to output those, I want to have a new array that has their name dash and then their job. That's what I want to do. I want to change this array's data and the way I'm going to do that is with map. So the way you do this is you take your array data dot map and you pass it a function. That function is going to get each item in the array one by one in a loop as if you'd written for each loop. It's going to loop through that array one at a time and each loop through is going to give you the first object then the second object. And what you're going to do is you're going to take the person object that you get and add a new property called dot title equals and you're just going to sign it to name dot person plus dash plus person dot job and then you're going to return the object changed. So you're not getting rid of anything in the array. You're just simply changing parts of the array. So let's see what this returns us. So if we were to console log out data now after we've modified it you'd see that we still have an array. We still have the same number of things. We just now have a new property called title and it is what we want it. The name plus dash the job. So again, it's a really simple and quick way to modify an array slightly. Here's another example. In this one, all we want to do is change the name to be uppercase. So again, we're just going to loop through there with our function, we get our person. So the first time through, person is the one that has named body. So in here on the first time through person is the first object and then a second loop through is the second object. And what you'll see is we get literally the same data back. It's just names now uppercase. And then here's just one more example where we're doing slightly more modifications instead of returning. So on these previous ones we would do some stuff to the person and then return the person. Here we're just returning the part we want, just the name. And what that gives us down here is this array that just has the names. But we still have the same number of items in our array. All right, so filter. Filter is if you want to take an array and pull some items out based on some type of conditional logic. And all you really have to do is do return and then some type of conditional check. So here we just want to get the developers. So if we were to go and do data.filter, pass it a function just like map, we get each person on each loop and we just check the person's job title to see if it equals developer. Only the people whose job title equals developer will get put into this new developers array we're creating because these higher order functions they return a new array, a completely new copy of the array. And so this new developers array is just going to have the one person. And again, none of their data has changed, it's just we've filtered this array. All right, so reduce. Again, reduce is extremely powerful and it is slightly different. So here our data is just one, two, three, so some numbers. But what you'll see that's different here is that we call data.reduce, but our function actually gets a lot more variables. It gets what's called an accumulator, which I'll explain in a second. It gets the current value, which is the current item in the loop. So the first time through current is one. The second loop current is two. And then the index is the actual index of the current item. So the first time through, while current is one index is zero because arrays are zero indexed. And then origin is literally the original data array. So you get a reference to it. And then what we're going to do inside of here is we're going to take that accumulator and we're going to push it and add these numbers up. And really quickly, yeah, I'm breaking this stuff down, so let's just go through this. The important thing is that at the end of each loop you return the accumulator and this zero down here is how you set the default for the accumulator. So in this example right here, accumulator we're setting to the number zero. So the way this works is the first time through current is one, accumulator is zero. So in here when we say accumulator zero plus current one, so zero plus one equals one, accumulator now equals one, we return accumulator. The second loop through, accumulator is what we would just return, which is one, the current is two, so we're going to do one plus two is three. And if you just keep looping through here, essentially all it does is add up all the numbers in the array and returns us a six. Again, this one's very difficult to understand and so you're going to want to mess around with really trying to grasp the full power of reduce, but essentially it's giving you the previous value in the loop and the next value and you're able to do stuff with them. Here we're doing a very simple example where we're just adding up numbers because reduce can only return a single new value. But we can do more complex stuff. So here we have similar to our last array where we have a lot of people in job titles and what we want to do is we want to loop through here and we just want to find what job titles exist. So we don't want any duplicates, we just want the job titles. So here what you'll notice on this array reduce is that instead of setting the initial accumulator to a number, we're going something way more advanced when we're sending it to an array. And then what we're going to do is we're going to check the accumulator and see if it has the current item, so the first object and its job, so developer the first time through, does the accumulator array have developer in it? If not, then go and add it to the accumulator and then return the accumulator. So the first time through the array is empty and so developer is not an accumulator, so it puts it in the accumulator. The second time through, accumulator just has developer in it and it gets teacher and it says as teacher in the accumulator, no it's not, only developer is, so it adds teacher. But then the third time through when it gets it, it's going to get Amanda and developer and it's going to say is developer inside a accumulator and it's going to say yes. And so it's not going to do the accumulator.concata, it's simply just going to return the array unchanged. And so we end up with an array that just has our titles and no duplicates. Again, these are just hypothetical examples that I could come up with that kind of show you the power of reduce, but it's very, very powerful and it allows you to really kind of manipulate data on JavaScript. It's also worth pointing out that includes is not IE supported, so the traditional old school way without a polyfill would be to do index of negative one, this really weird thing that makes no sense. You really have to wrap your head around that one. And I made another example, man, what was I thinking? So here we're making an even more complex initial accumulator. It's an object that has name and has job and each of those is an empty array. And what we're going to do is we're just going to say a accumulator.name, which we set to be the current name and then job to be the current job. And we essentially are making an object that has all of the jobs and all of the names each in separate arrays. So again, we're just transforming this data, which originally was this data array. All right, so now what I'm going to do is I'm going to go into this jQuery example. So the goal of this right here is to kind of bring what we've been doing so far full circle, so to say, and start to kind of show all the stuff that I've covered and kind of how jQuery utilizes a lot of these things to be what it is. All right, so let me adjust some stuff. All right, so this page, when it loads this HTML file, you'll see that it has two unordered lists and they have list items in them and you can see that off to the right. So what I've done is in a JavaScript file is I've done our constructor function kind of thing where you can create a new jQuery object and you can use the dollar sign thing to initialize this. So when you do down here, when you do dollar sign dot list and tell it to go find a class item, this function just wraps around this, calling the constructor function, which is jQuery, takes our selector and then it calls it a knit function and this knit function does a lot of stuff that jQuery does. So jQuery, you can pass it a class, an ID, you can already pass it another jQuery object, you can pass it a lot of stuff. And so really this knit function, it takes that whatever you passed it. In my case right now, I'm passing it a class name but it's going to do some checks to see like, is this an ID? If so, I'm gonna call get element by ID. Otherwise, I'm just gonna do query selector to find a class. I also check to see if it is a node, which means it's already an object and in that case, I simply return it. But the whole point of initializing with this dollar sign is to return me an object that has all these methods and properties and in the zero index of that object, it has my selector, very much like jQuery. So that's how I'm initializing and getting the element. Then you'll see that I call dot CSS like you would in JavaScript. And this again, I'm just going jQuery dot prototype, I'm expanding on my object that I created, making a function. And this function is going to loop through, it's expecting an object, right? So when you'd use jQuery and use CSS, you pass it an object that has key value pairs of CSS property, CSS value, CSS property, CSS value. So what this function does is it just loops, it loops through that object and it takes those keys and values and it calls the vanilla JavaScript way that you would set a style, which is the element dot style dot the name of the style. So let's say you wanted to set the color, you would say element dot style dot color equals and then quotes red or a hex color. So this is a little bit more complicated because I'm looping through some an object, but again, I'm just using the vanilla JavaScript way of adding styles to an element. And one of the things you'll notice with all of these functions is that I returned this, similar to what I showed earlier, where if you want to be able to do chaining, which is what I do here, where I add CSS and then I call dot find and then I add a class. The only way for that to actually work is if I return an instance of this. But this is, again, jQuery is way more complicated than this, right, it's thousands and thousands of lines of code, it has a whole lot more edge cases than what I'm doing here. I think I probably made this even too complex just as an example. But I just wanted to kind of demystify that jQuery is really just a JavaScript object that has prototypal methods and has a way for you to extend those prototypal methods via plugins and is what it is. So just as an example, you can see right here on line 71 that I'm using traditional vanilla JavaScript to go and get an element by an ID and then I can take that and I can pass it into my jQuery object and you'll see that it finds the next one. And if we look at the HTML, we can see that the second unordered list is the one that has an ID of my list and so I'm getting a different element and then of course I can change these things to different stuff. And I think if we inspect, you can see that each LI in this class has YOLO, my favorite term to use. I can't tell you how much I just console log out YOLO. You're gonna see it, I'm gonna be live coding later today. God help me. And you're gonna see YOLO a lot. I'm gonna be living YOLO for the next couple hours. But you can see that it actually did go, so right here what I did is I went and found the second unordered list, I added some CSS properties to it, I called it something called .find which in vanilla JavaScript is query selector all. So query selector, what you've seen and then add all to it and it'll actually instead of finding the first element in the DOM, it'll find all instances of that in the DOM, which is what find will do. And so at this point, my JavaScript object is now no longer just the unordered list, it's actually a list of LIs and then I'm able to add class which is again, I just wrapped around vanilla JavaScript, class list.add and I add YOLO to each LI in that. And so that's what you see. I don't really know if there's another slide. Oh, there it is, thank you. So that was the first talk.