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 2: Finding Properties" 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 write the dot operator as if it was implemented in JavaScript. You will use the hasOwnProperty method to determine if an object has a certain property. - exercises/js/my_js.js

Get Unlimited Access Now

Transcript from the "Exercise 2: Finding Properties" Lesson

>> [MUSIC]

>> Justin: Let's do an exercise here. I apologize for the crowding of the slide. There's a lot of text up here. But let's create some people. We have a person constructor. This is all available and there's a test stud html in the JS folder exercises. I'll put that up here as well.

[00:00:31] We're gonna make this possible, this exercise possible, we're gonna save our person equals a function. This is going to be our constructor function it takes a name and it's gonna set the name to the context of whatever person we're creating. So here we have, person.prototype. This person is gonna be true.

[00:00:55] This is just gonna make sure we can walk up later on, cuz if we're setting something on the prototype. When we use our dot operator we should be able to walk up the chain and find it. The same way we looked for if we had foo equals new objects and we said foo.two string by invoking two string by using dot.

[00:01:17] We were able to walk up to the proto chain to find where two string actually lives. We're gonna do the same thing here for person. So the first four lines is just are boilerplate that we're giving you for this exercise, excuse me, the first five lines cuz the var person = new person.

[00:01:33] This is what we're gonna do, this is actually a really good exercise to do whenever you're trying to get familiar with the internals of a language. We're gonna say, DOT is gonna be a function it's going to accept person and then name as an argument. This is gonna be the same thing I want to have the same functionality as saying

[00:01:59] So you're basically gonna be implementing JavaScript with JavaScript to get to incept your own stuff. We're gonna do the same thing for a person.isPerson. We'll say .person with isPerson as our argument. This is the property we want to look up. So if I say a person.Name, this would return Smith I would expect.

[00:02:24] If I say a person.isPerson I would expect this to return true. And this is what our two function calls should do. DOT is gonna take the object that we wanna look for, that we want to traverse and the property we want to look up. In this case there's only two name and isperson.

[00:02:43] Dot is going to have to walk up the proto_chain right, cuz 2string isn't at the start, isperson isn't at the start. You have to walk up to each additional prototype to say hey do you have this method or property? One more, hint, there is a way to check if the object that you're on has that property, is this property defined on you and not on your proto_chain.

[00:03:13] I just wanna know, do you specifically have this? And there's a method to check for that, that has own property that will check to say, hey I do or don't have this method or property.
>> Justin: Does that all make sense? I see a lot of blank stares.
>> Justin: Cool do you have any questions before we get started and this isn't like a closed book we'll be here to help you too through the course of the exercise.

>> Speaker 2: So, trying not to, how would you say, for the example. If you're trying to write something that's going to walk up the proto_chain, you could effectively do this with like one [INAUDIBLE] line of code. Just a simple line of codes you'd use in the index operator that doesn't actually keep walking up the proto property.

[00:04:04] Don't write it that way, cuz it's cool actually to walk up the proto_chain. It's going to be a recursive function, is another hint if you need me to help you with that. Any other questions?
>> Justin: Cool. Let's take, what, 15 minutes. Do the exercises, and then circle back.

[00:04:29] To understand recursion one must first understand recursion. And let's do it. It's a bit of advice. [LAUGH] And, let me put the, Justin just, put the paths in the chat. But I'll put it up here as well. Exer, make this smaller.
>> Speaker 2: The other thing cool about this is we're gonna write the dot .call, the new operator.

[00:04:56] And I keep the instance of operator in JavaScript which if you write this and understand it, you will really get how the dot operator works. It's not that much different, you'll understand what's happening when the new operator calls a function. The code is only going to be about five lines for the new operator, it's pretty simple, but it is hard to write.

[00:05:17] And it's gonna be kinda hard to come up with, but it's good to kinda flex those muscles trying to think of how you could write a dot operator.