Object hasOwnProperty

[00:00:00]
>> So Object, this capital O Object is a pretty special object in JavaScript, it has a no prototype. So what is the deal? Ever seen this string before, square, bracket lowercase object, capital Object, square bracket? It's a common, I don't know how many random airline websites or whatever, no shade on anybody who works for airlines, [LAUGH] but you know.

[00:00:34]
Random websites around the world, where, some thing didn't work out as it should and I see this string, object Object, and it's like, welcome object Object. And I'm like, [LAUGH] that's a little objectifying but okay. So, and as the, again, I haven't been on Twitter and the artist formerly known as Twitter in a long time.

[00:00:59]
But there was a classic tweet of like, if you wanna mess with your friends, set your profile name to object Object and all your developer friends will just get totally nerd sniped trying to figure out what's going on, but really you just hard-coded the string. So anyway, the, if we call the two string method on the prototype of the prototype of the engines array, we get this string.

[00:01:34]
And now we're getting into, where do we find these properties from these objects? If we have an object, That is just super random, but we'll call it objectina and is she a genie in the bottle? Yes, the capital O, Object.entries method is a convenient way to enumerate some of the properties of an object in JavaScript.

[00:02:10]
And in general, this will be pretty similar to what I declared this object to have. In the case of Object.entries, what it returns is an array with the key value pairs captured by this object. So the key is the property name and the value is its value. So the first entity in this array is an array with name and then objectina, and then the second entity is isGenie true, and so on and so forth if I had a much longer object.

[00:02:49]
So like a fun game would be calling Object.entries on navigator, let's say, or anything else that's fun in the global scope of your console. Now, if I have my little obj and I try to access the toString property, I get a return value that evaluates to a function that is called toString.

[00:03:19]
Okay, but I didn't write a toString property in my objectina object, so what is the deal here? And that's where the .hasOwnProperty method comes in, is it can differentiate, am I, Getting this value for this property from the object itself? Because if JavaScript looks for .toString on obj, and it only finds name and isGenie, and there's no toString, it's gonna look up the prototype chain to whatever the prototype of obj is.

[00:04:09]
And if it finds a toString there, it's gonna use that value as if it were objectina's own value. But the property doesn't belong to obj, it belongs to the prototype of obj and so hasOwnProperty, like this is my own, as a tiny little objectina that I am, my own property toString does not exists.

[00:04:42]
It does not have its own property. However, it does have this property in every sense of the word because of the prototype chain. Because JavaScript keeps looking up and up and up and up the prototype chain until it finds a correspondingly named property or it goes all the way to the end, all the way to the top of the food chain which is object Object and it doesn't find that, Property.

[00:05:17]
And then it says, I don't know what you're talking about, that's not a thing, reference or I don't have it, there's no such thing. So, in this case, if we call .toString on our obj, on many, many, many other objs out there, we will get our prototype to end all prototypes implementation of toString, which is to return the extremely helpful string, object Object.

[00:05:49]
And I think this is one that's caused a lot of the JavaScript community great harm and trauma, so we're all healing as we go, we're working on it. But at least understanding why this happens is hopefully the first step in the right direction. So yes, so going back to our map confusion of like, why did for of work on both, but map didn't work on both?

[00:06:13]
Well, because .map is not a universal property or in this case method, because it's a function. It's not universal to every JavaScript object. It is actually implemented by the Array object, capital A Array, which is the prototype for all other arrays, which is why our engines.map worked. But HTMLCollection, which was the kind of group of things that our element.children gave us, that's not an array.

[00:06:49]
It doesn't have array anywhere up to the prototype chain, and it doesn't implement a .map property, so there is no such thing. So this is just shedding a little bit of light on what happened before, but this still might be asking the question, but then how did the for-of work?

[00:07:14]
Because is it not just calling, top map under the hood or what? So, I felt compelled to include this face meme which I personally make it my computer, most days if not all days, yeah, same? Same, yeah. All right, so let us ponder that question for a moment.