This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Exercise 1: Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Justin Meyer: All right, thanks everybody for going through this exercise. I will say a lot of our exercises are difficult, right? They ask you to do things that are what a lot of times library authors are doing. So they will be challenging, but it's good to be challenged. So if you have questions, please ask.
[00:00:23] And if you're feeling like, this is really hard, it's supposed to be. We wanna challenge you guys. We want you to learn to be better programmers after this. So I'm gonna through this and I think we're breaking for lunch. I believe. So again, what we want to do is as kinda, what I want to do is make a library called make.
[00:00:46] That allows me to not have to all that allows me to create different tags right? Different elements. I wanna do it how jQuery would probably write it. So there's as little code as possible. The naive way of doing this would be right a make.a, and then just keep writing out the same code out over and over again.
[00:01:20]
>> Justin Meyer: So this is how I createElement a. And then I would just essentially copy and paste this code a bunch of times every time I want to add a new element. I'd have to copy and paste this and create new element. But the beauty of JavaScript is that again you can program your program.
[00:01:42] That's because it's a dynamic language. So instead of doing this, what I'm gonna do is I'm gonna copy those,
>> Justin Meyer: And copy these tags.
>> Justin Meyer: And I'm gonna save them in a variable called tags and make each one string. It's taking a little bit because I don't have my mouse.
[00:02:24]
>> Justin Meyer: Okay, so I'm gonna create each one of those tags. And instead of doing this, I'm going to create a for loop that goes through every tag.
>> Justin Meyer: I'm gonna save the tag name.
>> Justin Meyer: And then I'm going to do, what I might think to do next is just write make tag.
[00:02:59] I'm gonna add a the tag property. It might be a. It might be div. I'm gonna set that equal to a function,
>> Justin Meyer: And now I'm gonna make that function whatever it's called return document.createElement and make it return,
>> Justin Meyer: An element for that given tag. Now there's a problem here.
[00:03:27] Because tag when it's all said and done after this for loop at this point here or in this test here. When it's all said and done, tag is going to be left at undefined.
>> Justin Meyer: No, it won't because tags, it'd be left at h4. Yeah, because it's exiting here.
[00:03:51] It's never getting tags. It'd be left at h4. So here, I'll only be creating h4 elements and that's not right. There's a bunch of different ways solve this problem. The way that we learn from doing it with for loops would be to wrap this in a function,
>> Justin Meyer: That calls itself,
[00:04:15]
>> Justin Meyer: And I'm gonna pass the tag name to that outer function and I'm gonna put as tag here
>> Justin Meyer: And now this code is essentially creating a bunch of tags. And if I wanna add another tag someday, I could just add to this list very easily and the function will automatically be generated.
[00:04:43] So yeah, I've got my list of tags. I'm going through each one and I'm creating a closure just so that the name of tags stays permanent when this inner function tries to look up the value. It's not gonna get some kind of global tag name, so this is how it works.
[00:05:02] How many of you guys get this a little bit?
>> Speaker 2: Some people get it.
>> Justin Meyer: So some people, okay, awesome, very good. Any questions for those who don't? Things that are confusing about this that I could explain. I know I'm holding you up from lunch right now, but it's sill late to answer any questions you guys have.
[00:05:22]
>> Speaker 3: Yeah, I'm confused about the syntax with the make brackets tag. I'm not sure what that's-
>> Justin Meyer: Make this thing?
>> Speaker 3: Yes, exactly.
>> Justin Meyer: Okay, so, all right, good question. So Alex has touched on this just very briefly when he was talking about the operators. Objects, like make, I can assign a make property like foo.
[00:05:44] You might have seen that and I could set that to 2. That's the dot operator. There's also an index operator, which does the same thing if it looks like this.
>> Justin Meyer: All right? It'll evaluate whatever's inside of here. Whatever's inside the brackets. And whatever that is it'll turn into a string and set that property to whatever is on the right hand side.
[00:06:12]
>> Speaker 3: So it's not interchangeable with the dot notation though?
>> Justin Meyer: You can't write make foo like this, but they do the exact same thing. It's just this is in some ways like you can almost think this is a hard coded way. It's like you're setting make.foo this way.
[00:06:30] I could have a variable like called propToSet.
>> Justin Meyer: And I could set that foo, and then I could have propToSet in here,
>> Justin Meyer: Right, so this is gonna set the foo property. And if something else later changed propToSet to, or before setting to bar. It would set the bar property to 2.
[00:06:59] And I could do even weird, crazy things, like propToSet, toString a function that returns,
>> Justin Meyer: baz and now it would set baz. So essentially, this is a way to kind of a variable set a property name. You don't know which property you're going to set. It's gonna be dynamically set.
[00:07:25] This is you're always gonna be selling foo. Think of it that way. So that's what we're using here because we're going through every tag name and we're assigning those properties that way, cool. All right, Stephen in here showed another way, which is nicer to look at, which would be to use the untags.
[00:07:50] You can use for each and that will get called back with each tag name. And because this tag name is already gonna be this is kind of what we're making this function that we did here. It's pretty much doing the same thing. We can just do this and this is a nicer way of over rating it,.
[00:08:19] Well, I think this is how I would actually write it. But we have want people to write it the other way. Just because we wannamake sure people understand closures and the problems with them and things like that. So here's another good way of writing it, but the way you probably should write it.
[00:08:33] And this works again because this function is called for every single tag. So there is a call object created with tag in it and that's what this tag is gonna look up is this this tag here. So we're already doing a lot of our work. Recap of functions.
[00:08:48] So what happens whenever a function is defined? So whenever a function is defined, a function object is created in memory. It has a prototype property that points to an object and the function knows about its parent call object. So function is define. It's created memory. It's got a prototype.
[00:09:09] No, it's about its parent. Those are the only three things you really need to know whenever you see a function defined like that. And when a function is called or invoked, here are the things happen. Let me get those things in memory first. So a function is called, a new call object is created, and its arguments are translated.
[00:09:33] So in this case, sorry, well, missed it. Let me do it in the order these are in. A call is just created. It's this is set up to point to whatever this is in that indication function. So if this is looked up inside FN, the body of a fn.
[00:09:51] It'll make sure it gets a window back, and then the arguments are translated. So in this case, arg1 is gonna point to the same thing that the me pointer, me variable's pointing to. And arg2 is gonna get its own copy of val. And then finally, the function is gonna run and any variables that are created while the function is being run are put in there.