In this video we're going to learn about a few builtin Array methods that every single array comes with
that are going to make arrays even more useful for us.
There are six methods that we're going to cover here.
Two of them are paired together so push and pop are a pair and then shift and upshift are also a pair
.
And then we're going to talk about index of and slice.
So before I actually dive into that I want to show you an empty an Mozilla developer network on the
page for Auray on the left hand side you can see a method section.
And these are all the builtin methods that every array comes with.
We're only going to cover six of these but they're the six most important.
There's quite a few that you'll most likely never need to use though there are some that we will be
covering in future videos.
So I just wanted to show that you can see them all here.
And then if you wanted to learn about one like slice you could open it up.
There's a great explanation and there are also examples at the bottom of the page.
So let's go back to our slides and let's start by talking about push and pop.
So what we saw last time was that if we make an array like colors and I give it three colors red orange
and yellow and if I want to add a fourth color green I first need to figure out what index to add it
at.
So I would count 0 1 2.
So then I would know the next index would be 3.
So I could write colors three equals green.
And this isn't great because I have to keep counting or I have to keep track of that number.
So if I want to add blue I now have to figure out how many items are in the array.
So there's four.
So I know I need to do colors of four equals blue.
There's a built in method however that makes this much easier.
This is something that we do a lot which is push into an array.
So push refers to adding something to the very end of an array.
In this example you can see we also have a colour's Ray and to push into it to add green to the very
end we write colors dot push.
And then in parentheses we pass in green.
So I'll try it out here.
Stub push and I'm going to add in indigo to the end.
And just like the functions that we've written ourself we need to put parentheses to actually call push
.
And then we pass in indigo as an argument.
And if I hit Enter NOW and I look at colors you'll see that Indigo has been added to the end and I didn't
even have to specify which index to add it to push always knows where the end of the array is.
And it adds whatever we pass in to the very end.
Push also returns the length of the array after your new element has been added in.
So you can see this returns 6 and we have 1 2 3 4 5 6 items.
So I'll push one more time colors push and I'll do Violet and you'll see it returns 7.
So we can use that occasionally if we want to save that value in a variable.
Next up is the SR method of push which is pop.
So pop does the opposite in that it removes the last element in an array.
So I'll show you how we use it.
It doesn't take any arguments we just write colors pop.
And if I hit enter here you'll see two things.
One it returns to me the last item in the array which was violent and if I look at colors it now doesn't
have violet.
So we use pop a lot to remove things from an array and then do something with them.
So push takes one argument and it will add to the end of an array and return the length of that array
.
And Pop takes no argument and it returns the last item in the array that it removes.
Next up we have shift and shift.
And these are a pair just like push and pop and they work very similarly except rather than adding and
removing to the end of the array they add and remove from the beginning of the array.
If you're curious about where the names shift and shift or push and pop originate from they come from
these data structures called Stacks and Qs that exist in other programming languages.
So they're sort of just leftovers.
They exist mainly because they've been used for a long time in other programming languages.
So as I mentioned shift to non shift are the opposite of push and pop.
So we can use an shift to add to the front of an array and I think that it's confusing that it's called
an shift when you're actually adding something.
But that's just how it is.
So you can see an example here if I wanted to add infrared red to the beginning of the array I could
use colors start on shift infrared and that will add at the beginning.
That I also have shift which removes the first item in the array and it returns that item.
So you can see I have colors and if I wanted to remove red I would do colors dot shift with parentheses
and no arguments and that will remove the first element red.
So you can see we end up with orange and yellow and if we did it again colors that shift it would remove
orange and remember that it returns to the removed element.
So I could store it in a variable like I do here.
So let's do a quick example will make an array of numbers and we'll just do 34 54 22 and if I want to
add a number to the beginning I do start on shift in parentheses and I'm actually going to do a string
and that will add to the beginning of numbers.
Hello then if I want to remove Hello I can just write numskulls shift with parentheses and that returns
Hello.
And if I look at Nom's it's back to being just numbers.
So the next method is called index of what index does is it takes an argument like a string or a number
and it tries to find that argument in a given array.
And if it finds it it will return the index where it's found.
I have an example here of a friend's array and this array I have five different friends Charlie list
David Mathias and another is if I wanted to know where David is located in this array I can write friends
dot index of David and I need to make sure that it matches exactly.
It's going to go and find the string in the array which is the third item with index of two.
So it returns to if I try it on Ms.
However it's going to return the first instance of Liz.
So there are two.
It's going to return this one.
And that has an index of 1.
Not this one which has an index of four.
So we can also use index of to determine if an element is not present in an array.
And to do that we just check to see if index of returns negative 1.
That's how it behaves.
If it doesn't find the given argument so let me give you an example.
Let's go back to colors of red orange and yellow
and then I'm going to get rid of this so we can't see it.
I want to know if Orange is located somewhere in my array and if so where is it.
So I'll just write colors that index of yellow and it tells me it's that index too.
So I could access it by doing index colors index too.
And I get yellow if I wanted to know if Green was in my array.
I could do the same thing.
Color set index of green.
And I get negative 1 which tells me it's not present.
The last method that I want to talk about is called slice.
We use slice to copy different portions of an array.
So I have an example of fruits here an array with banana orange lemon Apple and mango.
And if I wanted to copy the citrus is out of here.
Only orange and lemon and I want it to make a new array with just orange and lemon.
I could use slice so you can see here fruit dot slice and slice takes two arguments.
The first one is the starting index.
It's where the cut begins.
So at index 1 right here Orange and then the second argument is where the slice should stop which is
an apple and it's not inclusive so it includes orange and lemon but not the last index of three.
So it leaves Apple in disarray.
So when we run this citrus is actually going to be a new array that looks like this orange and lemon
two items and it's also important to note that the original array fruit is an altered.
So it still contains orange and lemon.
We can also use slice to copy an entire array to do that.
We just don't pass in any starting and end points.
We just do numbs that slice with empty parentheses and that duplicates the entire array.
So again I'll do a quick example.
We'll make an array this time let's do Nom's and I'm going to put some numbers in here and I certainly
put a letter or two in there as well.
And then a few more numbers.
So I look at Nom's and if I want to extract a and b and make a new array called letters I would do Varda
letters equals and then I'm going to do numbs slice and then I need to provide two indices.
The first one is where to make the first cut.
So that is 0 1 2 3 index of 3.
And then where to stop which is at this number here.
So that's going to be 0 1 2 3 4 5.
And if we look at letters we get a and b two items in an array.
So that was returned and stored in the letters variable while Gnome's is unchanged.
OK so those are the six different methods that I want to show.
We had push and pop we had shift and unshipped index of and slice