JavaScript for Beginners #10 - Arrays

Key Takeaways

hello everybody and welcome back from this video what we're gonna be doing is talking about JavaScript arrays now arrays are one of the most used what we call data types or data structures within JavaScript and any other language so they're extremely important that you understand how they work so I'm just gonna start and explain what is an array well essentially an array is an ordered collection of elements so what that means is previously when we created a variable so let's say we had like bar Tim equals 5 well this variable Tim stored simply one element now what we're gonna be doing is having a variable storing multiple elements and I'm gonna discuss how we can access those different elements add elements remove elements and do all kinds of things like that now the way that we create an array there's actually two ways in JavaScript but we're gonna stick with this way is simply just by putting square brackets like this so when you have a variable you name it something you put your equal sign and then you put square brackets and this denotes I have created an array currently our array has a size of 0 as there's nothing in it but then what we can do once we've defined these square brackets is go ahead and put some elements inside of our a if we would like to so for example I can put an element hello I could put the element 5 I could put the element 4.6 I can put Tim and this is my list of elements inside my array so if you're familiar with other programming languages sometimes these are called lists as well it's pretty much the same thing in JavaScript this is just called an array and what we can do when we create an array is simply put elements inside of these square brackets separate them by commas and now we are saying here we have four elements inside of our in our array and now I'm gonna talk about how we can actually access these elements and remove them and do all kinds of things like that now I will note here that there is another way to create an array so typically what you do is you know it's seed save our array and then you just do this if you wanted to create an empty array but you also can do new alright so this is a way that you can create an array in JavaScript as well usually we stay away from this as it's not necessary and it just makes things a little bit more messy but I will show you how this works what you can do is actually say new array inside these brackets you can denote a single number that tells you how many elements you want to be in your ray so in this case we'll do 50 and what this will do is actually create for us in a of 50 blank elements that don't have any content so it's an array of size 50 that's what this will do if you leave it like this then just automatically creates one with size of zero which means it's gonna look like that now hopefully I didn't confuse you there if I did just ignore that mine I just wanted to show you guys in case you were interested now let's talk about accessing elements so right now I have four elements in myarray we have an array of length four how do i access these different elements well this is where we talk about something called indexes so I'm just gonna type console that log here so I can start printing some stuff out so essentially whenever we have an array every element in the array has a specified index now that index is simply an integer that represents its position in the array now the index is for any array go from zero to the size of the array minus one now that simply means here that index zero represents hello as that is the first element index one represents five as that as the second element to four point six as that is the third element and three as Tim as that is the fourth element so the easy way to remember it is essentially the last element here is always going to be the size of the array minus one index and the first element will always be zero so let me show you how we actually index things so what I can do is simply put the name of array which is Tim square brackets to the right of it and the index inside of here and this will actually access this specific element in the array for me so watch I'm just gonna go to my terminal here whatever this is and print this out and you can see that we print hello as obviously zero was the first element there now if I do index - we should get four point six so let's bring this up again refresh we get four point six awesome now what happens if I do something like Tim four well we know that four is non index because we only have indexes from zero to three so if I try to do this let's observe what happens in the console here we get undefined so when you try to access an element that does not exist you get undefined so that's something worth noting and that actually doesn't throw an error for you where in other languages it usually would it just gives you undefined okay so now that we know how to index how can we actually change elements in our array and what I'm going to start by doing is just logging the array here and what I'm going to do now is change one of the elements or add an element to our array so what I'm actually gonna do is say Tim two equals and we'll just say a new element like that so what does this do well essentially what it's gonna do is it's gonna say okay so the element at index two I want to set that equal to new element so it's gonna change four point six to be new element and now if we refresh here and we have a look at our array before and after we can see I'll just expand this here we get hello five four ten and then we get hello five new element Tim so that did indeed changing okay so there's a few more things of arrays that I want to talk about we are almost finished now the next thing I want to talk about is the length property of an array so essentially if you would like to check how long an array is what you can do is simply call this dot length at the end of the array name and then we'll tell you how many elements are in the array so here we can see we get four now notice this isn't telling us three as the last index is telling us just the count of how many different elements we have and if we had a blank array and we did this we would have a size or a length of zero okay so let's go back now the next one that I want to show you is to remove an element from the end of the array so let's say that we want to remove Tim or we want to remove whatever element is at the end a very easy way to do this is to do Tim pop now what pop does is simply remove and return the last element now I'll show you what I mean by that essentially what I can do is I'll console dot log Tim dot pop and then I will simply console dot log Tim and I'll show you what the result is from this you can see we get Tim here and then we get the list except for sort of the array but we are missing Tim at the end so what this pop actually does is remove and returns the last element to inside of this long statement where we print it out then obviously now Tim does no longer have this last element so we will print out the three elements here now the other one that we can use is called push now what push does and this doesn't return anything so I'll actually will just type it out here is add an element to the end of the array so rather than removing one it adds it sort of pushed something to the end of the we could do let's push new element like that let's console.log and have a look at this and we can see now we have five elements in our array and we get a new element at the end so that is what push does now I think there's a few more methods we'll go through quickly there's another one called shift now what shift does is simply remove the first element from the array so let's look at this one so I do shift you can see we remove hello and we have five four point six and tip now I'm just going to look but I think that is pretty much it I'll show you one more this one is simply to sort the array and it is sort like that so Tim sort so what I can do is refresh this and now we can see that will actually sort the numbers first and then we will sort the strings now if you want to learn more about how this sort method works with different objects you can look that up on your own time but essentially it's gonna sort you know your strings alphabetically your numbers by size and that is pretty much all there is to it so I think with that that is pretty much a reins I'll show you one last thing just in case anyone's curious if you do decide to do something like Tim seven equals five actually let's do eight and notice that I don't have an index seven in this array what will happen is it will fill all the indexes up to seven with empty elements and then fill index seven with eight so I'll just show you what that looks like so you guys get an idea so you can see here we have hello five four point six Tim so Tim was index three here this is index seven so we have 3 empty indexes before that just so that we can actually add this at the correct index just be aware if you do decide to do something like this if it's an index that's out of the range of this array so it's not in the length of the array then what you're gonna end up getting is a bunch of empty spaces before this element that you've added so it means that has been in floor raised as always if you guys have any questions leave them down below and if you enjoyed the video leave a like subscribe to the channel and I will see you guys in another one