JavaScript Arrays: Properties, Methods, and Manipulation (Part 1 of 7)

hey guys how's it going uh today we're going to take a look at array properties and methods uh we're going to go over each one of these and explain exactly what each one of them does also look at a few examples and also go over a few common problems that you may run into with each one of these um we're going to go over you know some of them may seem pretty basic like length and index of and then we'll get down here to the harder stuff like um uh reduce and map and things like that um uh one thing before I get started if we go over here to the Milla developer Network to the array documentation pretty much everything I'm going to show you can find here uh in the documentation and they also have some great examples over here um but you know some people learn this stuff better visually so I thought it was something that would make a good video um one more little side note here um the methods that we're going to take a look at if you see some of these have this little Beaker icon to the side of it uh these are exper mental and we're not going to go over those in this video but I will make a video for those in the near future um so with that let's go ahead and get started the first method we're going to take a look at is one called isarray and just like it sounds it's a method that takes in a variable and returns a true or false as to whether or not that variable is an array um so I have uh three values here I have a string an object and an array so if I run each one of these through this method and that is array do isarray and go ahead and grab this variable here and then let me copy and paste this line for each one of these and then paste in each one of these variables and this code that I'm going to uncommon out right here don't worry about this it's just some code that uh displays this down here into the HTML so that you can uh see the results a little bit better um so as we can see here uh the string variable that we passed through uh this array function return false the object also returned false and the array returned true um so you know no surprises there pretty much what we expected next up let's take a look at the length property you all have most likely seen the length property before um what it does is it uh looks at the length the total length of the array so right here we have a test array that is 0 1 2 3 4 5 6 7 8 9 so 10 total um so if we do array Lin equals array 2. length and then we output that to the HTML then we can see that length that we get is 10 where you usually see something like this is in uh a for Loop so if I uncommon out this for Loop here um this is a for Lo that for Loop that uh calculates the sum total of all the numbers in this array um so you can see here it is uh for VAR I equal to zero less than array 2. length so um once I hits the point to where it is equal to the array 2. length then it breaks out of the for Loop and you can see here when it runs through that uh we get the sum total is 45 so that is the array length property um so next let's take a look at the index of method uh takes an element and checks whether or not it is in the array and if it Returns the number of uh the index um so here I have a sample array that is just uh 1 123 1 23 um here I have a variable called index of three if I wanted to see what index three was in that array I could do array 31. index of three and now if I uncom comment out this line to display it to the HTML then we can see that the index of three is two and if we look up at our array 0 1 2 you can also pass in a second parameter into index of that specifies the starting position um so for example if I was to put in a two here and start at position two then it still finds index or the it still finds three at index two uh right at the starting point but if I was to do the starting point at index position three then you can see now down here in the HTML it returns uh five for the position that it found three uh because we

started at 0 1 2 3 we started here and so it didn't equal three here then moved on to four position five and then returned five there is also a last index of method if I copy this up here and paste it in and let me get rid of this starting position uh what last index of does is it SE instead of searching from left to right it searches from right to left um so last index of three in this situation uh gives us eight uh that's because it's starting here at the last element and finds three right off the bat uh which is the eighth index in this array and you can do starting positions with these as well if I put in a six here and save that then now it gives me the index of three is five because I started at index six which is this one value here and then it searches from right to left and finds three at the fifth position in the array and these don't only work with numbers here um that's just an easy example uh if I come down here and uncomment this code here um I have an array of uh strings of names and at this line here I'm searching for an index of Rob and you can see that it's 01 and if I look down here at the HTML index of Rob returns a one if I was to do a last index of for Rob then you can see it now returns a three because it's searching from right to left and there is a another Rob string in here um now if you search for an element that doesn't exist um you see here I'm searching for index of Joey and if I take a look at my list of names here there isn't one that exists and in that case index of turns a negative one index of and last index of both turn negative 1 if it searches the array and doesn't find the element so that is the index of method for the array let's move down here and take a look at push and pop are ways to add and remove elements from your array um so you can see here I have a sample array that is just simply um three numbers one 1 2 3 and to push a value on I can do array 4 do push and I will just push on the string one and then let me output this to the HTML and you can see here that um this value got pushed onto the end of the array so it's 1 2 3 and then the string one um so now me go ahead and push on another value and I'll just push on the string two and then let me output this to the HTML and you can see that this got added onto the array too so uh 1 two 3 then the strings one two now what pop does is it pops that element off of the end the array um and it doesn't take any parameters so if I just run array 4 do pop then semicolon and then let me output that then you can see it pop that uh two string off of the end and if I run array 4. pop one more time then we should get back to our original array of one two three um and if you look down here um it popped off that string one and now we have 1 two 3 um so you can see here I started off by pushing on the string one two and then popping off one um so basically that's how push and pop work um so now we can look at something very similar to push and pop and that is shift and unshift now shift and unshift are pretty much like push and pop except instead of adding and removing elements from the end of the array uh you add and remove elements to the beginning of the array uh so here I have the uh the same test array that I had before of 1 two three and if I do that array and unshift is what I use to add elements on and I'll just do the same one I'll do one the string one and then let me output that to the screen and you can see down here that whenever I unshifted one it added it to

the beginning of the array um so now let me go ahead and unshift the string two and save that and let me output that to the screen and now you can see when I unshifted two uh it added it to the beginning of the array here so now I have 2 one and then 1 2 3 which was my original array um so now just like pop if I run shift then it will remove that element from the front of the array so I can do array 5. shift and then if I output my array to the screen then you can see I shifted and that two got removed from the front of the array and now if I run shift one more time then we should get the original array that we started with so shift and then let me output that array to the screen and now shift 1 2 3 we have the array that we started with so here I unshifted one and it added it to the beginning then I unshifted two ran shift which shifted this two off of the front and then I ran shift again which shifted one off the front which left us with our original array of 1 2 3 so that is shift and unshift um so now we can take a look at the two string method