JavaScript Basics pt. 7 - Arrays
JavaScriptTranscript
English (Auto-generated)
Welcome back everyone to Javascript Basics Part seven. this time we are dealing with a new data type called a race. So let's go ahead and dig into that. So what are the rays? Are rays are another data type in javascript? Let's see slide on. There we go. They are another data type in javascript. And they allow you to store multiple pieces of data in a single place. So raise will store their information instead of square brackets and you separate each piece of info with a comma. Let's go ahead and head over to replicate to check something out. So again, if you have your report file already, go and dig into that. I'll give you a second. I you'll just want to go into the script dot Js file in that project. If not going ahead to the replica homepage start a new front end ak html CSS javascript project. Head into that empty script dot Js file. All right. So, previously, if you wanted to store multiple pieces of information, how would you do that? Um, I mean you couldn't really at least you'd have to store it into multiple variables. So let's say we want do constant, we'll name it info, declare a new variable called info, I would say. Uh Still a # one. Mandela steal another variable. Name it info to constant photo vehicles to and then we want the third one. We'll name it info three and we'll name it or we'll assign three to it. So let's say you want to store all those three numbers. So you've got them stored into three separate variables if you want to look at all of them have to do info info to info three and then out And even then there you go. 123. So that's not the most elegant way to do it. So an array will look like this. So all the information side is stored in square brackets, so you have one and then you separated by thomas, you have 12 and three. So instead of having those three variables because there's one array swan uh with all three of your pieces of information that you want inside there. So to declare an array you can store them inside of variables and you declare them just like any other type of variable. So let's go and do that because we have this, there's we can't console log that. I mean we could we could just type it out again. But what's that going to do? That's I'm just going to show it. But if you want to store it this is how we do that. Just declare it again. Like any other variable. Let's go, let's call it A r r r R for shorter for array. So 123. So we have all three pieces of our data inside here separated by commas and we can do no we don't do that because now we have heart array assigned to a variable and there we go and you can add more to your variable Alright to your array and there we are. It is all assigned to this variable. So that makes it easy. So that is an easy way to store multiple pieces of information using arrays. So what can you store in arrays? You can store all types of data. I've already showed you numbers, you can also do strings and even other arrays and you can mix and match the data that's stored inside. So let's go and check that out. So we will go ahead and empty have that already there. So let's say first thing in our a is a string say hello world separated by comma. We've got to Well let's do five the new string yo and then let's do another array inside here which is 456. So inside of our array we have a string, a number, another number, another string and then an array with three numbers inside of it. So we'll go ahead and console logging that and we can see what is inside of our array right there. So that's going to be very useful being able to store multiple different types of data inside a single array. and let's not forget about 0-based indexing because if you want to find specific specific information inside of your array, you would used indexing like we did with strings which is what we covered a few lessons ago. So don't forget if you want to find something inside of an array. Remember javascript doesn't start counting at one. Like humans do. It starts counting at zero. Like computers do go ahead and try an example of that. So I will simplify this. Let's just do 12, 3, 4, 5, 6. Alright, so let's say I want to print out the four. So the way we do that is I've got my array being called right here in the council log. We want to use indexing to get to that. So to use indexing again, you would add square brackets at the end of the array variables name right there. So since it's called r we'll have the square brackets right after our And we want the four and we know that job script starts to kind of get zero. So four is on the fourth place. It is going to be at 01, 2, 3/4 of the third place. So if we do console log are Index three, that should give us the four. Let's check that out in the console down here and that's exactly how it works. It's going to be the same if you have seen here, if you have multiple strengths. So you've got names, let's say what are like four random names? Uh donatello, Leonardo rafael and my Colangelo. Here we go. four random names with no discernible connection at all. Let's let's get a different name going in here for our variable. Let's say you know, what are these guys famous for? Uh obviously they're turtles. So our variable name is turtles. And let's say we want to get Uh Michelangelo, he is the 4th turtle named here. But again, because javascript is not start counting at one and start counting at zero. He will really be the third over counting 0123. So if we hit run that gives us Michelangelo sounds like a party dude. Alright. And then if you want to modify a raise because you can arrays are immutable, meaning the data stored inside can be changed. So even an array declared with Const is mutable. You can use index and to change an entry in andre and let's get that shot. And so real quick. So I said in array declared with Const is mutable and that's because the atoms inside the array can be changed but you still couldn't Just fully reassign this guy. So let's say turtles equals 123 console dot log turtles. Yeah, it's not gonna work. So you can change the atoms inside, but you can't fully change the array like this. So if you wanted to do that though, like let's say to do say, we want to change Rafael to the # three. So for that you would do turtles. And Rafael is at 012. So here's the second one on the index or you got to on the index. So you turtles index to, you assign three to that. Now, if we print out The consoles, we have donatello? Leonardo three, Michelangelo. So that's how you would do that. Let's say one. Change donatello who is at index zero to let's say nerd seems like a computer guy. So we've now got, so we want to change donatello is at index zero to nerd. So we were right about turtles dig zero equals nerd as the new string. We've got nerd Leonardo, Raphael, Michelangelo, wow, sounds like something rafael might say. But yeah, there you are. So again, arrays are modifiable. They are immutable. And if you want to change something inside, that's how you do it, you wouldn't be able to just declare a brand new array because its cons it has already been declared. Alright, everyone, I will see you next lesson. We're going to dive deeper into arrays because there is much more you can do with them. And then these operations, these new things that we will learn will help us and lead into the next day, the type we're going to be learning after a raise. Everyone see you in the next lesson