JavaScript basics pt. 8 - More on Arrays


English (Auto-generated)

Welcome back everyone to Javascript Basics Part eight. Last lesson we got introduced to a raise. Um we saw that they are immutable, how you declare them, how you access the information inside of them. So in this lesson we are going to dive deeper into them and learn more about the different things that you can do with them. So first up we have multidimensional arrays. So as I mentioned before, you can store an array inside of another array, you can store multiple arrays inside of those. So let's say you had an array that looked like this. So you've got one array that's been declared here with cons So we've got our this itself is deray but as we can see it has three other arrays inside of it. So the first story inside of it has 12 and three. Next ray has 45 and six. And the third and final array inside has 7, 8 and nine. So how do you access the information inside these arrays? Well, just like with our last lesson we likely will want to use uh indexing, so we'll use bracket notation with zero based indexing to access the information inside of this. So that means we will be using lots of brackets. So again, let's go over what that looks like again. Okay, so go ahead and head over to replicate. Want to have that ready if you don't again go ahead into that script dot Js file. If you have your previous project open If not go to the main page, sudden new project under html. CSS and javascript then open up the script file, give you a second to pause and set that up. Alright, so now you'll have an array. So again let's say we want to access The third item in this array, so we start kind of getting zero because that's what job description computers do with U- 012. So Rafael is the third item here, we will do Turtles Index two. That gives us rafael. So again, uh zero based indexing and bracket notation. So you want to use that to access to different information inside these arrays. So the first set of brackets that you would put here to access the information side would access the array you wanted. So we've got 123 arrays. So the first bracket you put decide which one of these arrays you wouldn't want to access, then the next set of brackets within access the information in that array. So let's go ahead and give this a shot over at ripple it. So we will go ahead and get rid of our turtles by guys. So we will do a new variable concerts are and this is pretty much just gonna replicate what we had. Excuse me, what we had in the previous in that slide to a new array, you wanna hit enter stuff sort of like this because in javascript, when we have items that are going to be uh heavy, there's gonna be a lot of information inside. Uh it's best to kind of have them stored or displayed the way that is shown here because it makes it just it's easier to read. Alright, so let's do the first rain here. We've got 12 and three inside and we want to separate that by a comma because there are gonna be other items inside the main array. So our second array will have 45 and six And then our 3rd and final array will have 78 and nine inside. We don't need a comment in because this was the last item in this main array. So let's say we want to do a console log so that we can see what we're accessing. Say we want to access the five in this second array. So what we'll do here is first we'll have to say I like to use the variables name to access our array and then we'll use our first set of brackets here to access this second array. So 012, since we start counting at zero zero is this first rate with 12131 is the second array with 45 and six. So we will do one, we want her second array And we want to access the number five in that. And so again that is going to be one since we start counting with 0012 five, is that 1 1 is what you want? Let's go ahead and print that out. We'll do console log and hit run. I think it's just five. What if you want to access the seven right here in the third array? Well for that you would do two since this array is at Index two And then seven is at Index zero, Red 0. There we are. And that gives us seven. Here we go. So if you have lots of a raise and you have multidimensional raise and you gotta raise instead of a raise instead of a raise. Don't get too freaked out by it. It's not as daunting as you think. You'll just want to keep adding brackets for the information insights that we you use these to dive deeper into those multidimensional arrays. Alright, so we've got some methods that we can use with a raise to add things onto them. Uh the end the beginning, pop things off. So the first method we have is push. So what if you want to append data to the end of an array, you'd use the dot push function. So you can see right here, it's not pushed with parentheses. So in fact, inside these parentheses you can put parameters for what you want to append to the array. So if you want to put one thing, multiple things in there, you just pass pass it to the push function. Uh you would give it the parameters and the push function will always add the parameters, you pass to it to the end of the array. So that is what that's for. So let's go ahead and do an example of that. So let's see, we did some turtles before, let's say let's do, it's just something else. Let's do some Ghostbusters in the lower case. We've got an array of Ghostbusters here, so we've got the same one, we've got four, we've got peter, we've got uh Igen, we've got Winston, we got ray, so that is our list of Ghostbusters, but let's say we want to add another Ghostbusters, let's say they hired a rookie. So they've got five now, so for that we will do, come on Ghostbusters push. So you added that push at the end of the variable name, then you add your parentheses and you pass the parameter that you want to push to the end of the array. Let's say work is their name. They don't want to get too attached because you know, they don't know how many missions he's gonna last. So let's give this a shot. Uh No, okay, so what this does is a way I did the strong, let's do it properly. Can do now, it's going to console dot log Ghostbusters now, up here, I did Ghostbusters that push Rookie outside of the console log and now we are going to print out Ghostbusters, There we go. So that is how you do that properly. So now we've got Peter egon, Winston, ray and Rookie. So when I did this inside of the console log, what it is returning is the new number of items inside the array. So that's why I was printing out five. So for this you would do it outside. So here we've got Rookie, uh and again you can push multiple items. So let's say, we've also got let's say Egan's got a granddaughter Phoebe, maybe he's got a grandson to his name, him Trevor. So we want to push all these guys choose the array. There we go. So now we've got Peter Egon Winston ray, Rookie Phoebe and Trevor. I'll add it to the end of an array using the push function. All right, And then the next function we're going to learn about is called pop. What if you want to remove the last item in an array? That is what the pop functions for. So it looks just like push dot pop with parentheses, and once you pop the item off the array, you can assign it to a new variable. Let's give that a shot. So let's go ahead and remove all this here. Let's store to buy Ghostbusters. But, you know, Rookie is a seasoned member of the team now, but what happens if we, you know, maybe he transfers let's do let's pop Rookie off console dot log chris busters. Now we've just got the four, So pop the pop dot pop function with parentheses, doesn't have to pass any parameters because it's all it does is remove the last thing, takes Rookie off the team. But like I said, you can assign dot pop to a new variable. So whatever's popped off is can be assigned to a new variable. So let's do that. Let's say we've got to go to sponsors and rookie isn't leading the team, he's actually getting promoted, he's going to head up a new franchise, let's say in Chicago. So let's say ch I Ghostbusters is a new variable name. And so that would be Ghostbusters dot pop. So let's console dot log that new array with that new variable with we'll call it, you're using shy Ghostbusters, it run. And that gives us rookie because he's now popped off and he is now assigned to this new team Chicago. Ghostbusters shortened to try Ghostbusters. Here we go. So that is how the pop function works. Next function up is shift. So at the end of that, at the other end of the spectrum is the shift function which allows you to remove the first element in an array. It's an example of that. So let's say, you know, Peter Peter's done, he's retired, he's old, he's got his money, he is out of here, let's still got shift. And then so Ghostbusters press shift and then you will comply to now see what is inside the Ghostbusters. And now we've just got these four instead of five. So we've got egon Winston ray and Rookie and Peter's out of here. He is retired. So that's a shift and now we have a new shift. So like the push function unsheathed allows you to add an element to an array but this time to the front of it. So you just passed that element you wanted to add to the front of the array as a parameter in the on shift functions, parentheses. So right here, so let's go and try that out back to replicate. So let's say we've got becomes grandkids, they're joining the team but you know, they are, they're younger, they're more active from these guys who are a little older now, so they're gonna get top billing. So we'll do another shift with parentheses, we'll add them in here. So cbs first up then that Trevor is up next and then let's go ahead and do a console dot blog to see what our brain looks like right now. So there we go. So it added Phoebe and Trevor to the front of the array. So they are now the headlining Ghostbusters. Oops, yeah, and that is that for different things you can do with the race. So we've covered a raise and a lot of these different things you can do functions you can do. And next up we have a brand new data type before we head into the exciting world of functions. We will start using logic and different things um are brand new data type is called objects and they are similar to arrays but they can store more information so I will see you in the next lesson. Take care everyone.
62 Views 0 Likes 0 Comments

Diving deeper into arrays

Leave a comment (supports markdown format)