Transcript from the "Array Methods" Lesson
[00:00:00]
>> Brian Holt: So arrays have a bunch of like helper methods or helper functions built on to them, which make them very useful, right? So I have prime numbers here where I just list out a bunch of prime numbers. If I ask prime numbers dot length, which notice length is not a function, it's a property, right.
[00:00:16]
If I ask for primes dot length, I get back eight. That's how many items are in the array, right? So if I have an array of length eight, that means it has indexes from zero to seven, right? Because everything starts at zero, so that's what length eight means.
[00:00:33]
It means that there are eight objects or eight things in there. Which means that it goes from zero to seven. Join is if you wanna take an entire array and condense it down to one string. So in this case, I will take all the prime numbers and I wanna log them out.
[00:00:50]
And I wanna put a barb in a space between all of them. So notice here, that's what this does. Or I could have put here something else. And then it will put something else between all of them.
>> Brian Holt: Or if I put nothing in there, it will just squish them all together with nothing in between them.
[00:01:13]
>> Brian Holt: Or if you put nothing at all, it will put commas I think, yeah, it just automatically puts commas if you give it nothing. So that's what joined was, it's useful for like logging things out and,
>> Brian Holt: I don't know, sometimes you need to join a race, it's there if you need it.
[00:01:29]
And this particular example here, I have const courses,
>> Brian Holt: And I have a bunch of different teachers here. And then if I want to add something to the end of the array, I do courses.push, right? And what push is, push is another function that's built onto the array that just adds something on the end, it just tax it on the end.
[00:01:56]
Now you might ask why push. It's archaic like computer sciency terms. It's just like in every language, it's called push. Whenever you put something on the end, you push it on the end. Consequently, if you want to remove the last item on something, you can also do course dot,
[00:02:20]
>> Brian Holt: Pop, again, I didn't make this up. So what this will do, this will remove the last item in the array, and it will give it back to you. So now here, because I just pushed on Sean Larkins course right there. Sean Larkins course will now be here on this course stored there, so if the console.log(course), okay?
[00:02:49]
So when I pushed down there, this was on courses. That was the last item here, and then when I popped it off, they removed it from the array. So you'll notice here it's not on the array when I log out right there.
>> Speaker 2: What's the advantage of using push instead of just going back and adding it to the array?
[00:03:10]
Is it so you can take it on and off easier?
>> Brian Holt: Yeah, it's just convenient, right? Cuz I don't have to know how long the array is there, right? You could do it a different way, but this is just really easy.
>> Speaker 3: And it will pop only take off the last one that you added?
[00:03:27]
Can you put a different one in there to remove that instead? Don't want just the last one that was added there?
>> Brian Holt: Pop will only remove the last one, so if I wanted to take most multiple off, I would just call courses.pop times. So I could do this, and this will just keep removing the last one, right?
[00:03:45]
If I look down here, let's get rid of that. So now here, I've popped off four of them, right? So notice that this array now is just Kyle Simpsons, and if I popped it one more time, notice now it's a totally empty array. That's your question?
>> Speaker 3: Yeah.
[00:04:05]
>> Brian Holt: Cool.
>> Speaker 4: What if you want to leave a specific one like, there's one in the middle or the front, whatever.
>> Brian Holt: Yeah, so there's a bunch of different things we can do here, which I will show you. Let me show you this one first and then I will answer your question.
[00:04:21]
So in this particular case, I put in here my complete intro to react the three course and then I came back and redid it. So here, I over wrote the one that I did with complete ensured to react before. So you notice here, these three, the first time I log it out right there, right?
[00:04:39]
And then I log it again afterwards, and you can see that I've overwritten the previous ones now only before is there. So the way that I did that is I said, course two equals, and I just assigned it a new object, right.
>> Brian Holt: And that overrides what was there previously and put something new there, so that's how you can do that.
[00:05:05]
>> Brian Holt: So, if you actually want to like pull things out of the array, there's a couple different ways to do that. It's just, get rid of the stuff in the middle.
>> Brian Holt: So, one of you can do is, see now how I can, I was telling you that I can't ever remember that if it's been sub string and sub stir.
[00:05:29]
There’s splice and slice, and I have to look it up every single time. Pretty sure we’re talking about splice this time, so let’s go with that and then I might have to look it up. So let’s say I wanna remove my course from here. So subarray=courses.splice, and I want to start at index two.
[00:05:57]
Pretty sure and I want to remove one, yes. I remembered it, [LAUGH] the dangers of live coding. And so what this is does, it starts at our index two and it removes one element, okay? And now if I console.logsubarray, that should just be my course now, which is what it is.
[00:06:24]
So if I gave it to here, it would also grab Steve's course as well. And the no sound here Steve courses not in it. So you can remove multiple objects, and the other thing that you can do if you want to, I believe I can say like, course, intro to angular, something like that.
[00:06:50]
And what this will actually do is it'll actually, whatever you put here, it will insert in its place as well. So as you can see splice is a quite useful function there as well if you're operating on a race. There's another one called slice, and slice has relatively different semantics, but it's also gonna operate on race, as well.
[00:07:16]
>> Speaker 3: It's not gonna complain at all that you're only giving a course and not a teacher object inside of that object?
>> Brian Holt: [INAUDIBLE] types don't mean a thing in JavaScript.
>> Speaker 3: I hate that.
>> Brian Holt: Yeah-
>> Speaker 3: [LAUGH]
>> Brian Holt: Well, there's lots of people that would love to argue about that.
[00:07:31]
[LAUGH]
>> Speaker 3: I'm sure, [LAUGH]
>> Brian Holt: Yeah, you can, but yeah, it doesn't do any sort of validation with types sort of like that. But if you're interested in that, there's two different things, one's called typescript and one is called flow. And they will enforce types on top of JavaScript.
[00:07:48]
>> Speaker 3: It's seems like you could write terrible code with this.
>> Brian Holt: Like types aren't gonna prevent you from writing terrible code, that's-
>> Speaker 3: Sure, hard to read, hard to understand if you come back to it later.
>> Brian Holt: Yeah, but also fighting with type system sucks. I'm a big proponent of types, I actually quite like types.
[00:08:08]
When I write my own code I write type script. But, there are reasons that it's very nice that JavaScript is quite dynamic.