Advanced JS Fundamentals to jQuery & Pure DOM Scripting

Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 6 and Solution: Implementing $.extend

Topics:
Justin Meyer
Justin Meyer
Bitovi

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.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Exercise 6 and Solution: Implementing $.extend" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will implement your own extend method. After briefly describing the exercise, Justin dives into the solution. - exercises/js/my_jquery.js

Get Unlimited Access Now

Transcript from the "Exercise 6 and Solution: Implementing $.extend" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Justin Meyer: I'm going to show you the answer to extend. Again, what we're gonna do is go through every property in object and copy it to a properties on target. To do this, I'm gonna use a for-in loop. So I'll show you how to write one of those. And write for the name of a variable that I want to take on each property name an object, I'm just gonna call it prop.

[00:00:36] So this is gonna be set to, I'll just write out var prop in object. So prop is gonna be set to a string. That is a string for each property name in object. And that's probably different for every loop inside these curly braces, for the body of the for loop.

[00:00:59] So I can read the prop property of object like this. I mean I'll do var value.
>> Justin Meyer: And then I want to set, this is the value of whatever property name proper presents, I wrote this wrong. And then I'm going to set value on target. So I'll do target, for targets prop, I wanna set that to value.

[00:01:34] Does that makes sense? So I'm reading the value for some given property name, and then I'm setting that value on target for some given property name.
>> Speaker 2: [COUGH]
>> Justin Meyer: I broke it up in two lines like this, but most of you have just written it this way, and I think it's a little bit more simple to look at, like that.

[00:01:58] And then I'm just gonna return target.
>> Justin Meyer: Now some of you, any questions there? Makes sense now? Hopefully those of you who are just beginning with JavaScript, or haven't seen this kinda this index operator are starting to get it. It can be kind of confusing at first, but hopefully it's starting to make sense now.

[00:02:25] A few of you also made sure that the we were only copying the properties directly on object, and not any properties that might be up the proto chain. To do that, people who did this, and this is you don't have to have this in your solution for the example to work.

[00:02:45] It's checking object.hasOwnProperty(prop). So it's making sure that it's only copying properties directly on object, not enumerable properties up the proto chain, and copying it that way.
>> Justin Meyer: Cool. So that's it for today. Unless there's any other questions. Tomorrow we'll probably start with another quick review of all of the JavaScript stuff.

[00:03:14] And then we're gonna burn through jQuery. We're gonna build own version of jQuery just big enough to implement a tabs widget. Which is gonna be awesome. And then you can just publish it as your own open source project, and call it Zepto4, or something like that and become the next big JavaScript programmer.

[00:03:36]
>> Speaker 3: First letter of your name. [CROSSTALK]
>> Justin Meyer: Yeah, so cool. Thank you.