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 "$.extend()" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: We're going to start building our own version of jQuery, and the first thing we're gonna do is start building a lot of jQuery's functional utilities. Hopefully a lot of you've used dollar extend, or dollar proxy or dollar make array or dollar each. We're gonna be building our own versions of those, because we'll be needing them for when we build more complex things like jQuery's html function or things like that.
[00:00:33] So with the end goal again, is we're gonna build this cute tabs widget with this html. So, all of this stuff you can find in, let me go through the setup real quick. I'll probably have to go through it tomorrow again anyways, but we're starting out, if you go to the exercises Dom, you'll find a my jQueryJS that's going to look like this.
[00:01:02]
>> Justin Meyer: And these are the things we'll start with implementing dollar extend today and then we'll leave pretty everything else to tomorrow. And then, eventually there's a test page, too, that you can open. If you open domtest.html. So I'm gonna change my JS to Dom up here, and I'm gonna go to this to test the additional.
[00:01:30] This will run all of those tests. So I'm gonna explain the first exercise, and then I'll walk through again the set up. So, first exercise is implementing a small version of jQuery's extend. jQuery's extend takes one object, one set of properties and copies them into another object. So, it takes one object, goes through all of its properties and puts them on another object.
[00:02:04] So, if I have a target and I have a object, if I call extend object into target, really, is kinda how you should read, read it backwards. It's gonna take what's an object and copy that into target. So this is you're gonna be using a for-in loop. If you've never used one of those, ask and we'll show you how to write one.
[00:02:30] So essentially, as a result of this, result should be the same as target, so it kind of returns the target but also result in target should both have the same thing in memory, but now they have that additional property. So that's the, so why do you use it?
[00:02:49] Essentially, a lot of times it's used for cleaning up things. Even in our examples, that we'll be running on jQuery. It's nice not to always have to write $.something = function or $.prototype.text = function. Instead you can use $.extend to kinda clean this code up. So you don't have to always be writing dollar each time or dollar.prototype each time.
[00:03:15] It's a nice handy reason to use dollar extend. And default values, this is used very commonly, say I have a move function that animates one item from one's position to another one. And if people don't provide options from and to, I want default values. Instead of everywhere from and to are found, and time, having it kinda like this, where it checks each individual place what those defaults are.
[00:03:47] Extend is commonly used to copy, to kind of set up the defaults to change options so it has the default value, so you can just write from that point on. You can just read from options, cuz it will be setup defaults if the value wasn't provided.