Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 8: Implementing isArrayLike()

Transcript from the "Exercise 8: Implementing isArrayLike()" Lesson

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

[00:00:03]
>> Justin Meyer: So, the next exercise is going to be making is a isArraylike, and this is an internal method that jQuery uses, it doesn't really expose, which is unfortunate because it would be handy. But it's needed, we'll need it for dollar each, which will do right after this. IsArraylike just let's you know if something is an array.

[00:00:24] It's something that you could enumerate through. It's got numbered properties, and it's got a length property. So, things that are array-like is, well obviously, an array is array-like, but also, there's an arguments object that you can access, a functions arguments it was called with. That's not a true array, but we want that to be array-like, it does have a length property, and it has numbered properties.

[00:00:54] Things like these no lists that a document.getElementsByTagName would return this is not a true array, but we want it to be array-like. Yeah, so things like this. So, there's this concept called duck typing which is, that a lot of dynamic languages use words you can't check the shape of an object.

[00:01:24] And you see hey, does the shape of this object, does it look like what we want? And if it does, we'll do something with it. This will learn about Jqueries each, which iterates through a bunch of items. If I pass jQuery each arguments, I'd like it to loop through arguments.

[00:01:40] If I pass it node list, I'd like it to loop through a node list. I don't wanna have to always convert everything to an array for jQuery each to work. That's why there's this is array like. So, we use duck typing to see which way we're going to loop through things in each.

[00:01:59] So, the next exercise, again, a real quick exercise, is you're going to implement an isArrayLike. The way to tell if something is array-like that works well is you're going to check that it has a length property that is a number. And you're going to see, you're gonna see.

[00:02:20] Okay. You're going to use the in operator to see if the, once you know there's a length, if there's a property that's at length minus 1, and there's a special in operator that JavaScript has, that tells you if something is in something. It's saying does this have a property there?

[00:02:42] That's all it does, and I'll write out what the in operator looks like because we kind of haven't introduced it yet. So if I have an object that looks like this, or I've given an eight property, and I'm going to give it, I make it a string, I can see if 8, I'll make another variable has 8 and I can do, has8 will be true because I'll do 8 in object.

[00:03:22] Right? So this is, this statement here will return true if this property is an object. To make it maybe make a little more sense, I can do foo. As foo, is there a foo property in object? I can also do a variable name.
>> Justin Meyer: And I could write prop.

[00:03:50] So, this will return the statement will return true if the string value of prop, which is foo is in object.
>> Justin Meyer: So, all you wanna do is check to see that this object has a length property that is a number, and length minus one is in this object.

[00:04:15] So, this is the next exercise. I will put up the.
>> Justin Meyer: Probably show that this stays up. And are there any other questions before we start?
>> Speaker 2: There is a question kinda back on, what is the difference between our isarray and array.isarray?
>> Justin Meyer: Array, probably nothing. Array.isarray is provided by most modern browsers now, and that's great to use.

[00:04:52] Just jQuery is array is gonna be useful everywhere. In IEA, you can use it. But they both do the same thing. Although I don't know if they work the same way, there might be, I don't know how array, is array works, if it's different, uses a different technique than this does.

[00:05:13]
>> Speaker 2: There's a question in chat, if you could just read it, is faster than notnot?
>> Justin Meyer: That's a great question Steven, it is gonna be faster, but also, it's gonna work better, cuz what if I had an array or an array thing that had a falsy value in it?

[00:05:36] So, if I had my object that looked like foo and I had a null object, foo here, that would return false, cuz it would not the null once. Make it true.
>> Speaker 2: Maybe you wanna explain what's going on there?
>> Justin Meyer: The code here, okay.
>> Speaker 2: It's [INAUDIBLE].
>> Justin Meyer: Yeah, so Here I've got an object with the foo property of null, and I'm reading the property.

[00:06:12] So, this is going to be the propValue, which is just going to be null all, so propValue is just going to be at this point. And if I'm not in it once.
>> Justin Meyer: This is gonna be the value of not is gonna be true, and then if I'm not in it again.

[00:06:37]
>> Justin Meyer: Sorry [LAUGH] this is confusing. I'm not sure how to explain it a little bit better, if I'm not in this again, well, now it's going to be false. So, what Stephen asked is instead of doing this in operator, why can't I just tell if object has the foo property by doing something like has foo equals not not object foo?

[00:07:09] You can't do that because if this value is falsy, well, it still has a foo property, it just is falsy, so this will return false. It would normally work if it was anything truthy now this would be returning true, cuz this would be return false, but it's not a good method.

[00:07:29] So instead we use foo, oops, foo in obj.
>> Justin Meyer: So, let me put back up the thing and the hints,
>> Speaker 2: And let's do another ten minute, ten minute exercise.