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

slice is a way to return a portion of an array so if I was to uncomment out this code here then we can see that I have a test array that is just 0 through 9 and if I wanted to return a portion of this array then I can use the slice method so to do that I will do array 11 not slice and now this takes two parameters it takes a beginning index and an ending index the beginning index is inclusive in the slice and the ending index is not inclusive so what I mean by that is if I was to put a two here and then print this out to the HTML then you can see here that this sliced array is 2 through 9 so it takes the index 2 which is 0 1 2 so starting here at this 2 and then goes all the way to the end if you don't put in and ending index then it assumes that you want the entire length of the array so let me do one with a beginning and an end index so if I was to do 2 and 5 then you can see it only prints out 2 3 & 4 because the 5 is non-inclusive so when the slice is performed on this array it goes to index 0 1 2 starts here and then goes to the 5th but doesn't include the 5th so then it just prints out these three right here 2 3 & 4 now what if you wanted to do something like you only wanted the last 3 elements of this array then what you can do here is let me comment that out and rerun another slice now you could do something like you want to start at array dot length minus 3 and let's see what that are so - three gives us so that gives us the last three elements of the array but you actually don't have to write in this array dot length here if you write a negative index then it will be the third index from the array dot length so you can see now that I only have the negative three here it still gives me the same result and for the ending index you can do the same thing if I was to do negative two then it will only print out the seven because it goes it starts at three from the end and then goes to negative two but it's non-inclusive with the ending index so you only get the seven this was a negative one then it would include that eight as you can see right there so that is the slice method and now we will move down to the splice method okay now the splice method can be a little tricky at first it is a way to alter an array by adding or the leading elements so let's go ahead and take a look at this so I have an array here with five different names and now I'm outputting this original to the screen so that you can see and I haven't done anything to it yet so it still stays as the original down here so now I have this VAR deleted here and the reason I have that is because anytime a splice performs a deletion it will add those elements it'll return those elements so if you set a VAR a variable equal to the splice then you can see what elements were deleted if you'd like so let me go ahead and show you an example here so I can do array twelve dot splice and the first parameter here is where I myarray I want to begin my insertions or deletions so if I want to delete an element let's say I wanted to start at index 2 which would be 0 1 2 that would be here at Jill and my second parameter here is how many elements I want to delete so let's just delete 1 and let me save that and now if you look down here you can see that my original was the five names and now after it's spliced it is taken out Jill and now I only have these four names and then you can see down here that deleted was Jill and that is I am echoing out this deleted variable to the screen so you can see that it deleted that name and then returned that to this variable so if I was to do two deletions and save that then you can see here that it started at index 2 which is Jill and deleted two of the elements from the array which would be Jill and John and you can see that's exactly what we got here we got the splice array with only three names now and deleted returned Jill and John so now let's take a look at adding some elements to an array with splice so this

is very similar to how we did this before so I'm going to run splice again and I'm gonna keep this at starting at the second index and this time I'm not going to delete any element so I'm just gonna put a 0 for how many elements I want to delete and then now my third parameter is the elements that I want to add to the array so I'm just going to put in a string here and add in Joey to this array and you can see down here I have my original array and then my spliced version has Joey at index 2 because I didn't override or delete any elements and you can see that deleted down here when it's echoed out to the HTML it doesn't have any variables associated with because we didn't elite anything from the array now you don't only have to add in single values here you can see I have a sample array here if I was to copy that and instead of just one name if I put in an array of names and save that then you can see at starting at index 2 of this array it added in those three names that we gave in this array here as the parameter so now let's we've looked at the leading and adding elements so now let's look at overriding elements and this is pretty

similar to adding elements except instead of only adding elements we're also going to put in some elements to the leap so I can do ray dot splice and we'll just stick with that starting index of two and before when I added elements I put in 0 as the number of elements to delete but now if you put in say I just put in a 1 here then you can see that I started at index 2 which is Jill and I over wrote 1 position with this value of Joey so it deleted Jill and it put in Joey and you can see now that my deleted variable here gets echoed out as Jill and if I was to take this same array the same test array here that I added in before and add that in and let's start at index 0 and let's overwrite 3 positions and save that and now you can see we started with an array of 5 names and these first three names have been overwritten with the three names that we put in to our splice function and then you can see our deleted variable this deleted variable here gets the return deleted objects that splice returned for us so that is how the splice method works so now we are going to move down and take a look at the sort method