JavaScript Arrays Crash Course

Key Takeaways

arrays are one of the most fundamental building blocks of any program and in this video I'm going to cover all the basics you need to know about arrays in JavaScript welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project Center and in this video we're going to talk all about arrays now in JavaScript it's really easy to create a variable that just has a value like a number or it's going to have a string or so on but an array is essentially when you create a variable that has a list of values inside of it if you think you have a shopping list that you have a bunch of things on like you need to buy chicken and pork and rice those are going to be three items all on your shopping list well an array allows you to represent a list of items inside of JavaScript so let's create an array we're just going to call it a and to create an array in JavaScript all you do is you open and close it with square brackets now the square bracket key is the same key as the early bracket key you just don't click shift when you create it and here you go you got your empty square brackets and if we save we have an empty array if I log this out you can see over here we have an empty array it has nothing inside of it and when we expand it you can see the length of this array is zero so in order to actually add elements to an array what we want to do is we can specify them in between the curly or in between the square brackets so we just put a value for example a was what we're going to put inside here and then to put the next value you put a comma and then the next value so our next value is going to be B and C and then we're going to do finally D so we have four elements in this array and you'll notice the important thing is we have an element doesn't matter what it is then a comma and then we we have another element and then we have a comma and then an element and a comma so every element must have a comma separating it when I click save you're going to see it's autof formatting for me and it's putting a space after the comma this is just standard ways that you would write this in JavaScript you don't need the space but the space is just there to make it a little bit easier to read now if you look on the right side of our screen we have four elements a b c and d as you can see they're listed here the element zero is a element 1 is b 2 is C and 3 is D and that's something really important to note about arrays in JavaScript and pretty much every programming language out there arrays start at zero so the first element in Array is considered at index zero while the second element is index one so it's kind of difficult when you're first dealing with arrays to realize that the numbering system in arrays starts at zero even though you're probably used to a number system that starts at one so that's a really important thing to remember now this numbering system is really important because that's actually how you access individual elements inside of an array so if you want to access an individual element in an array what you do is you take your array which we called a and you followed up by square brackets and inside of those square brackets what you do is you put the index that you want to get so if we want to get the first element we know that that is index zero since we start our counting at zero so we put a zero inside here click save and we get a being printed out we want the second element that's index one so we put one and so on get the third element with index 2 and the fourth element with index 3 if we get an element that doesn't exist for example index 4 we don't have five elements you'll notice it just prints out undefined so if you try to access an element that doesn't exist it just always prints out undefined also if you want to get the length of an array you just say a.length and that's going to give you the length so our array has four elements so our length is four now if you want to add elements to an array after it's created so we created our element here a which has four elements and let's say we want to add e to the end of that we can say a. push and we can pass anything to this for example e and now what that's going to do is it's going to add e to the end of our array so when we save you can see our array has five elements and E is added to the end we can also push in something else like we could push a number for example and you can see that that number gets added on after the E element so it's getting added to the end of our array every time you call Push it's just adding the element to the end of the array and the important thing about this push and arrays in general is that you can add any different types of elements you can have strings you can have numbers you can have whatever you want inside of your array it does not matter now another important thing to note is you can actually have arrays inside of other arrays let's say I push a new array into here which is just going to have the values one and two you can see what I've done here is I've created a new array with these square brackets and I put the value one and two in that array and I'm pushing that into my first array now when I save here you can see we get a b c d and then we element four here this index 4 is another array that has the values of 1 and two this is something called a nested array so if we change a here and we make it a nested array that has values A and B and we're going to give it another array with one and two inside of it so when I save you can see here we have our square brackets that wrap our entire array then we have a new set of square brackets for our first array which contains a and b and another set of square brackets for 1 and two and when I save you can see we get an array of arrays our array has two values inside of it and those themselves are both arrays dealing with nested arrays is something that's pretty common inside of JavaScript so it's important to understand how you access elements let's say I wanted to get B here from my array well that's my first element in Array a so I say a of zero that's going to give me this array AB as you can see we get the array AB now I want to get the second element from this so I'm going to say I want to get the second element of that so A of Zer that's giving me the array ab and then if I get the second element of that by saying a of Z of one that's going to get me the second element here which is inside of that array which is the first element right here now when I save you can see it prints out B so essentially the way nested arrays work is you just say hey a of Zer is going to return to me this array and when I get that array I'm going to get the first element or I'm sorry the second element at index one from it you can also change the values in an array for example I can say a of0 is going to be equal to 1 and now when I print out a and we look here you can see that first element has been changed to one I overwrote that element so that's something that you can do inside of arrays you can add elements you can overwrite elements and you'll also know if I just come in here and I say a DOT you'll notice all of these are different methods that I can do on my array you can see that there are tons of different array methods out there lots of them you're really not going to use but some of them are really important for example for each in map or array methods that you're going to use all the time and if you actually want to go a step further and really master all of those different array methods I'm going to have a full video on that linked right over here with that said thank you very much for watching and have a good day