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: Making a Tag Library" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Justin Meyer: Just a quick exercise. Although it might be a little confusing, if you've not written a lot of JavaScript, is we're gonna make a tag a library. I just wanna make a make object that has an h1 function that, when I call it, will give me an h1 element.
[00:00:24] But the secret to this is I want you guys to try to do it in the least lines of code possible. I want you to use the dynamic nature of JavaScript where it can kind of, if you remember that jQuery example where I kind of loop through kind of properties and values and dynamically generated a version of jQuery, I want you to try to do something like that.
[00:00:48] So, essentially, take maybe like an array of tag names, generate an h1 function, that creates an h1 element, that creates the anchor element. And you'll have to use kind of similar techniques that we just used to fix the for-loop problem. So are other questions about this? Yeah.
>> Speaker 2: Just going back on, can you mention some of the practical uses of closures in JavaScript?
[00:01:19]
>> Justin Meyer: So you use closures constantly in JavaScript. I need to have a function inside of another function, or any time a function is accessing a variable that it, itself, did not create, or is not directly passed to it, you are using closures. For private variables was also another one that Alexis talked about.
[00:01:43] It's hard for me. The counter example is, in some ways, a nice use of it because I created a function that you can just call and it increments itself, almost like using a generator pattern. Hey, call this outer counter function, and I'll give you an inner function that counts.
[00:02:03] That kind of stuff you do all the time when you're building APIs in JavaScript. So, with this example, if you open up this tags at HTML, you can see the functionality. Here's kind of a little starter code and that test code right below it. So you can just take it from there.
[00:02:29] And we're here for questions for, I guess, 15 minutes, and then we'll give the solution. But if you're struggling or you even have questions right now, ask them and we'll try to help guide you through this example.