I'm previewing this page using atom-live-server, so when I make a change and save script.js, the output appears in the console immediately. Right now, all we have is the console.log for the original pens array right here. If I expand the array in the console, you'll see the values of the array, zero, one, two, three and you'll also see the property of the array listed, in this case, length. To get to the property of any object, like our array, we can call the object, add a punctuation mark, and then specify the property we're looking for.
In the code here, I have just such an example. Here we console.log out the text array length, followed by pens, that is our array, punctuation mark, and then the name of the property we're looking for. Save that and we get the property value, four. This is the same as what you see here when we break down the array. Arrays also have a long list of methods, functions we can use to change the values in the array. We'll talk more about methods later, so for now, just think of methods as small programs we can use to do things to objects.
You'll see what I mean in a second. To use a method on an object, call the object, then add a punctuation mark, followed by the name of the method and parentheses. In some cases, the method has arguments you can pass inside these parentheses. To see how this works, I've set up a demo for you that you can play around with. If you scroll down to line 29, and uncomment it, we console.log out the same pens array after we've applied different methods to it. So right now we should get two identical arrays over here in the console and that means we're ready to go.
Let me show you how methods work. First we grab pens, that is the array, followed by a dot, then we mention the method and add two parentheses. In this case, the method we're using is reverse and it literally reverses the array. So if I save now, you'll see the array has been reversed. Orange, green, blue, red. The next method, shift, removes the first value of the array which in this case is red. So when I save this after shift has been applied, the array has three items, blue, green and orange.
We can also add new items to the front of the array. This is done using the unshift method and here you add the new items as arguments, with a comma separation between each item. So here I'm adding purple and black to the front of the array. Here you see purple and black and of course, you can also do the same for the end of the array. To remove the last item, orange, use pop and to add more items to the end of the array, like pink and prussian blue, use push.
If you need to remove items in the middle of the array, let's say you want to take away this green item here. You can use the splice method. Splice takes two arguments, position and number. Position is the item you want to start from. So for instance if we want to remove green, we would start from position two. So one, two, that's blue. Number is the number of items you want to remove. In this case, one. So if I want to get rid of green in the middle of my array, I say position two.
That gives us blue and then number one and save. Red, blue, orange. The next set of methods are a bit more advanced because they don't directly augment the array. Instead, they return values to us. The first one is slice. Slice creates a copy of the array and then returns it to us and typically we would place it inside a variable, or use it directly in some sort of function. So here I've placed pens.slice in a new variable called newPens and console.log out newPens.
Save that and you'll see we now have two separate arrays. To prove that, I can now make a change to the new array. So I'll say newPens and then push and then I'll push a new value to it, let's say purple. That means now I have pens, which is red, blue, green, orange and then I have newPens, which is red, blue, green, orange and purple. So if you ever want to copy the contents of an array quickly to do something with it, slice is the method you want to use.
The next method, indexOf, gives us the index number for a specific search. So for example, if we want to search for the item that has the word orange in it and we want to search from a specific point within the array say maybe from the second or third position, we provide the search string in question and the index position we want to start the search from. So in this case, if I want to start from blue and then move forward, the index position is zero, one.
So I would say one and run it. What we get in return is the index number for the result. So in this case, orange has the index number three because it's zero, one, two, three. I can now use this number for something else. Let's say I want the actual value of orange. I could then say the index position of, so I'll change that to the value is and then say pens and instead of placing the number inside this call for a specific position, I place result in there because result has been populated by the index number.
Save that and we get orange. This example is kind of weird because I'm searching for the string and then I just get the string in return, but in a more advance setup, you would have more advanced data and this would work really well. Finally, we have join. This is the method you'll probably use the most. Join is a really useful method. It takes all the items in your array, join them together in a single string and separate them with a comma. So if I just take the separator out for now and run it, you'll see what we get is red comma blue comma green comma orange.
So if you want to just output the contents of an array as a string in your HTML, join is the method you want to use. Now, you'll notice that the commas have no space after them, so if you want to use these as actual HTML, you probably want to change that separator. You can do that by changing it in the arguments here. So I'll say comma, space, save. Now we have a nicely comma separated list. You can also replace the comma with literally anything else, so maybe a pipe.
Pipe separated list. Or a dash, dash separated list or ampersand, whatever you want. So now you get an idea of how methods work and before we continue, I want you to take these exercise files and play around with these different methods, create your own arrays, change them by adding or subtracting items and really familiarize yourself with how all of this works. You can even try to string multiple different methods together and see if you can do multiple things to the array at once. If you want more documentation about the methods available for the array, go check out the MDN documentation for array because these methods are not the only ones you can use.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality