Object prototype

[00:00:00]
>> Objects, shall we object? Let's talk about for of loops for a sec. We use them. We love them, maybe. Do we? Perhaps, okay, we're okay with them. We earlier were talking about different ways to iterate over stuff in JavaScript. And there's been many options over the years.

[00:00:26]
for of is a relatively new one. We also have the forEach() method sometimes that we can call. We also have the .map() method that we can call sometimes. What's going on with all this? Let's talk about it. But let's start with for of. Okay, so hopefully you've seen this syntax before.

[00:00:49]
When we have something like an array, for example, here I have an array of engines, V8, SpiderMonkey, etc, etc. I can put in a for loop, for (let eng of engines), and then console.log() that engine to uppercase, and we get out, as we would expect, one log for each of the values in my engines.

[00:01:16]
Similarly, when I do an element.children property from our dom API. If I wanna get the children elements of a document, if I wanna get the divs inside of another div that's inside of another div, yeah. If I wanna get the children of an element, there's a .children for that, and I can also use that in a for of.

[00:01:43]
And so, for example, if I log each of the child's tag names, I'll get head and body and blah blah blah. You can try this out in the browser, in the console. The important thing is, in both of these cases, we are able to iterate over this data, all of the strings in an array, all of the HTML elements that are the children of another HTML element, this is iteration.

[00:02:23]
And this is one way of doing it. Now we also know, as we just mentioned, .map(). And if I try to do the .map() approach on the array engines, all good, I get basically the same thing. It's not logged to the console, it's a new array with the uppercase values in it, but I've still iterated over all of them.

[00:02:43]
But if I try to do that on the document children, I get TypeError, not a function. How many times in my life have I seen these words, not a function? Goodness. Anyway, what is going on here? The for of loop worked the same way. The .map() does not work.

[00:03:05]
It works on engines, but it doesn't work on children. What gives? So let's try to dig in, after briefly appreciating this classic meme of confusion, which JavaScript, I feel like, puts me in all the time. All right, so for of worked on both, .map() doesn't work. What's the deal?

[00:03:29]
Okay, we have a typeof operator in JavaScript, so let's see what kinda types we got going on. So if I do typeof engines, I get object, okay, all right? I thought it was an array, but I guess an array is an object. And then what about children? Yeah, that's also an object.

[00:03:48]
Cool, great, fabulous, thank you. This is not helpful typeof. [LAUGH] What if we start looking for the prototype of the object? What are we dealing with, prototype? So we mentioned this briefly in first steps, but essentially, in JavaScript's object oriented programming, everything is an object, an array, a string, sort of, a [LAUGH] function.

[00:04:23]
They're all objects. And, Objects have prototypes, where a prototype is sort of like an object that all of its properties and methods are gonna be accessible to the, we could sort of think of it as a sub object with that prototype. So let's use this, we're just gonna invoke without thinking about it too hard, the capital O object.getPrototype of method and give it a value, like engines.

[00:05:04]
And now we get a little bit more useful differentiation. We see that they're both type object, not helpful, but they have different prototypes. The first one has an array as its prototype. This is the same thing as the built-in array, object. In case you've done array.from or anything like that, we'll talk about it in a second.

[00:05:26]
But also, if we call it on doc.children, we see we get a totally different type of thing. Well, totally different thing. Types really have gone out the window at this point, which is the whole reason TypeScript exists, basically [LAUGH]. Well, no, I'm oversimplifying, but there's other courses about that.

[00:05:41]
We're not doing that here. Anyway, the prototype of the children property on an HTML element is something called HTML collection prototype, which, all right, I still don't really know what that is, but at least we can tell that these are two different kinds of objects. So we talk about the prototype chain in JavaScript.

[00:06:07]
Every object has a prototype, and that prototype, like array, has its own prototype. So we can follow this kind of chain, and there's this sort of secret-ish, not really secret, but fancy, cuz it has double underscores [LAUGH] around it, a property called __proto__ [LAUGH]. And that will tell you also what the prototype is of an object.

[00:06:36]
The nice part is you can chain them together so you can keep going up. Okay, so engines.proto is array, but engines.proto.proto is object, all right? What about engines.proto.proto.proto? Null, whoa! We've reached the top of the prototype chain, or the end of the prototype chain. This is a slightly different chain, a food chain in which plants are at the bottom, that's our individual array.

[00:07:04]
Animals are in the middle, this is our array, then there's humans, and then there's zombies at the top that eat everything.