JavaScript: From Fundamentals to Functional JS Arrays Iteration

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

[00:00:03]
>> Bianca Gandolfo: So those are some things that are kinda cool about arrays that makes them just like objects. And we were just talking about this loop, this for in loop, that we can use with objects. If an array is an object, shouldn't it work? What are our predictions?
>> Bianca Gandolfo: Is that a prediction?

[00:00:24]
>> Speaker 2: No.
>> Bianca Gandolfo: Okay, I'll get to you in a second. What's your prediction? What about, let's see, what about Kevin?
>> Bianca Gandolfo: You have a prediction?
>> Speaker 3: Log the values.
>> Bianca Gandolfo: The values?
>> Speaker 3: Yeah.
>> Bianca Gandolfo: Or the properties names?
>> Speaker 3: The values.
>> Bianca Gandolfo: The values, okay. So we have a guess for the values.

[00:00:45] What about Andy?
>> Andy: I think it's the gonna be the property names.
>> Bianca Gandolfo: Property names.
>> Andy: If the rules don't change, it's property names.
>> Bianca Gandolfo: Yep, so it's gonna be the property names because the rules don't change. And if you don't believe me you can try it out.

[00:00:59] And the rules don't change. Check this out, our zeroeth numerical index is actually a string. That's interesting, right?
>> Bianca Gandolfo: So the rules don't change. And we can do it. Did you have a question Mark, I'm sorry, I forgot.
>> Mark: Yeah, do you have the chat up? It might help, just to look at the question, a couple back now about any difference between and they have a few examples there.

[00:01:26]
>> Bianca Gandolfo: So the question is is there any difference between, here I'll type it our here on the screen so everyone can see. Box two and then
>> Bianca Gandolfo: So, we have box.asdf = true, and then box2.asdf = false, I'm sorry, = true. And it says, is there any difference here?

[00:01:54] And I'm gonna argue, no, that there's no difference between how we're adding a property and a value to an array versus an object. I'm gonna argue that that is exactly the same, even though it's an array.
>> Bianca Gandolfo: Cool, so we have this loop and this k is printing out again just the property names.

[00:02:27] So if we wanted to get those values out how would we do that again? What about Grace?
>> Grace: You would add bracket, square brackets.
>> Bianca Gandolfo: Absolutely. Cool. And so that's going to then log our values, which would be 9 and meow, right? Thumbs so far?
>> Bianca Gandolfo: Thumbs. Thumbs in the back?

[00:02:54] Thumbs? Cool. All right. What about this? What is this going to log?
>> Bianca Gandolfo: Anyone?
>> Speaker 2: Nine and meow.
>> Andy: The values.
>> Bianca Gandolfo: The values? Good guess but remember that whole variable .notation rule.
>> Bianca Gandolfo: Remember that rule? Thumbs if you remember the rule. That you can't use dot notation with a variable.

[00:03:33] Thumbs, thumbs. So since k is a variable we can only use bracket notation. I'm just going back to this rule that we discussed earlier.
>> Bianca Gandolfo: So this is gonna be actually undefined. Undefined, because k is a variable. And if we go back to that slide, the rules, all the way down, down, down, down.

[00:04:03] That for DOTS, we can't use variables. For brackets, we can. Okay. So, cool. And we know, again, k is a variable, because we just see var here, right? For var, that means k is a variable. Cool. So this is how we would do it, then. Here we have the bracket notation.

[00:04:31] Cool. Cool, so that's great. It behaves exactly the same as an object. Then, how come we've never really noticed that before? Like when we loop right, we don't really use the for in loop, because we're not really interested, and usually if we're using an array, we're not interested in those names properties.

[00:04:57] So even if we did have this size here, this size property, we're probably not too interested in it, and if we were, we'd probably choose to use just a vanilla object. So how are we gonna loop? We're probably gonna use a loop like this, right? Has everyone seen, thumbs on this loop, this for loop with semicolons here?

[00:05:22]
>> Bianca Gandolfo: Cool. So this for loop with semicolons Is pretty interesting. Remember when I said the for in loop, was like a thing that was made specifically for objects. That's not true for this for in loop, this for in loop is just mathematical. If you look at it, all this.

[00:05:44] How you give directions to the for loop is in this signature right here. We have for and we have var i = 0, so that's saying create a variable, i, start at 0, and it says loop while i is less than the length of our box. Right? And then this one says increment i plus one every time.

[00:06:08] So every time we loop, we're gonna increment i. And we can change that. We can do +=2 if we wanted. If you wanna do every other one or every third one, right? You can change it. But i++ seems to be the norm. You could also count down, right, i--.

[00:06:27] But the mechanics here is that they're just numbers. Right? So if we console.log(i), what is that logging?
>> Andy: 0, 1, 2, 3?
>> Andy: 0, 1, 2.
>> Bianca Gandolfo: Yeah.
>> Mark: 0, 1.
>> Bianca Gandolfo: 0, 1. We're gonna get to the length property in a bit, but the point here is that i is just a number.

[00:06:59] i doesn't know anything about our array. The only thing it knows about, is this number here, box.length, which we could really just change to 2, and it would be equivalent. So there's no relationship between this loop and the array. It's just like mathematical directions. And so, if we say, increment until 2, it'll just console log 0 and 1.

[00:07:30] Thumbs on that?
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: What about this? Actually.
>> Speaker 7: I have a question.
>> Bianca Gandolfo: Sure.
>> Speaker 7: So, why is length 2 and not 3?
>> Bianca Gandolfo: We're gonna get to that in just a second.
>> Bianca Gandolfo: Yeah. Let's just do this.
>> Bianca Gandolfo: So, if we wanted to access the value could we do it this way?

[00:08:10] No.
>> Speaker 2: It's variable.
>> Bianca Gandolfo: I'm going to drill this into you until everyone hates me for it. So here we have again, just our bracket notation with a variable. Maybe we're starting to see that i is just a variable, and we have to use the bracket notation only because it's a variable.

[00:08:30] Not because the array is an array, and there's some special syntax surrounding it. It's simply because it's a variable. And also, if we go back here to box['0'], for numbers, remember, numbers we always have to use a bracket notation. And that's why you tend to see bracket notation with arrays.

[00:08:51] Because we tend to use them for their numerical indices. And bracket notation just makes sense.
>> Andy: So when I loop through that, my output is meow and then Woohoo!, so what in index is the size or is the value 9 at?
>> Bianca Gandolfo: Yeah, so if you look down here you can think of it this way.

[00:09:17] So we have 0, we have 1, and then we have size. It's not at an index. This is a property on the object.
>> Mark: It's a property.
>> Bianca Gandolfo: Yeah. And so, since we're looping until 2 and i is a number, it's just gonna be an i. Remember it's gonna be 0,1, so it's gonna say box set 0.

[00:09:34] Right? Which is meow. You can think of it like this too. Or box set 1, which is gonna be Whoohoo!, cuz we pushed that onto the end. Right and so wee see we have this property 1, with the value, Whoohooo! That make sense?
>> Andy: [INAUDIBLE] size [CROSSTALK].
>> Bianca Gandolfo: And then we have size which we don't touch, right, because i is just a number.

[00:10:06]
>> Bianca Gandolfo: All right. Can I have one question from the audience.
>> Mark: Why would we use arrays instead of objects when it's pretty much the same thing?
>> Bianca Gandolfo: So why would we use arrays instead of objects? Because arrays have methods on them that deal with order, and you can sort them, you can slice them in ways that you can't do for an object.

[00:10:31] Objects are better for other things like quick look-ups, or having data that is categorized. If you had a user just like our animal user, it as different categories on it You have a user name, then there's a value there. And you have maybe an age and then it has a value, versus and array.

[00:10:52] If you try to represent a user data as an array, like the name, then the age, it's hard to keep track. You'd have to keep track of the index if you're using an array in a traditional way.
>> Speaker 2: Typically, I guess it depends on the browser, but iterating over an array is faster.

[00:11:12] Is that true?
>> Bianca Gandolfo: No, I'm not sure. I haven't tested that.
>> Speaker 2: Well there's a little test thing I found, and in my browser, it is. What I like, quite a bit actually. So.
>> Bianca Gandolfo: Interesting.
>> Speaker 2: I don't know if that's true. I guess it depends on the browser, and how they implement their engine or whatever.

[00:11:27]
>> Bianca Gandolfo: Yeah, and that makes sense to me. Cool. Mm-hm?
>> Speaker 7: So what is the length then?
>> Bianca Gandolfo: Hm. Let's see, how many. I'm almost there.
>> Speaker 7: Okay.
>> Bianca Gandolfo: Okay wait, actually I'm there, and we just, we're covering this. So the cool thing. So I'll just jump into this unless we have anymore questions about iteration.

[00:11:49]
>> Mark: I think this might be but so there are a couple things behind this, but.
>> Bianca Gandolfo: Okay.
>> Mark: So if i is less than 3, it still wouldn't print size?
>> Bianca Gandolfo: True, true, because the reason is it would just so if we just change this to 3 here.

[00:12:08] What it would print would be meow, Whoohooo!, and then undefined. Because what it's gonna do once it gets to the index 2, so once i is 2 it will say box set 2. And then we'll do a lookup at our box. And we don't have a property at 2, right?

[00:12:32] We only have 0, we have a 1, and then we have a string size. So it's never going to return size in this loop. And this is a loop we tend to use, because again, when we're using an array, we're not usually using it to have string properties that are characters like size, for example.

[00:12:59]
>> Bianca Gandolfo: Mm-hm?
>> Speaker 2: So in the console, I did a box, and I put a size, like you have size 9. And then I have 0 in quotes and one enclosed, and when I just boxed, the size part doesn't come out.
>> Bianca Gandolfo: True. So the console just prints, it depends on what console you're using and version of Chrome and all that, but for example, I have 3 undefined.

[00:13:33] Let's see. So we have box
>> Bianca Gandolfo: That's because. Yeah.
>> Bianca Gandolfo: Look at that. This needs to be i. Cool. So if we look at box, it appears just to have two things. But if you actually, if you consoled out log box, sometimes you can see. Let's see. So size is there.

[00:13:58] It's just not in a numerical index. And your console probably isn't gonna pay attention to it, because it's assuming that you are only worried about the numerical indices. And it's really up to whoever is designing the console.
>> Speaker 2: Right.
>> Bianca Gandolfo: To what it's showing, what's not showing, because really, under the hood, there's a lot of different methods and properties on everything, especially natively, that it just not gonna print out.

[00:14:24]
>> Speaker 2: And same thing with length. It's length of 2 when I just hit. Not when I do console log.
>> Bianca Gandolfo: Do you have a question?
>> Mark: I just want you to verify that arrays stay ordered and objects don't?
>> Bianca Gandolfo: So, the arrays are only ordered because of the numbers.

[00:14:46] Because it starts from zero and it counts up. That's why there's order.
>> Bianca Gandolfo: There's nothing magical happening that is keeping track of the order. It's just the numbers.