- Understand what array prototype methods are and why they can be useful
- Continue to develop your skills googling and reading documentation
- Get comfortable with manipulating and organizing arrays
arrayA data structure consisting of a collection of elements (values or variables), each element is identified by an index
indexThe position of each element within an array
methodA function on an object
As discussed previously, arrays often contain a collection of related values. We’ve also talked about how you can loop through an array using a
for loop. However, you’ll soon find out that having a static array isn’t always useful. There might be times where we need to add something to an array or take something out of it. Other times you might want to find out where a value is in an array (it’s index).
Let’s Do A Few Together
- Insert a dog at the end off the array
// How might I add a dog, 'Collie' at the end using an array prototype method? var dogs = ['Golden Retriever', 'Pug', 'German Shepherd']; // console output => ['Golden Retriever', 'Pug', 'German Shepherd', 'Collie'];
- How might I insert another favorite food to the beginning of the array?
// Let's try adding a 'breakfast burrito' to the beginning of the array. var favoriteFoods = ['pizza', 'fruits', 'tacos']; // console output => ['breakfast burrito', 'pizza', 'fruits', 'tacos'];
Now it’s your turn to jump into the docs and try some things out! Cheers!
- Let’s go off our favoriteFoods example from #2. Let’s say, I no longer like tacos and I want to take it off the array. How might I do this?
var favoriteFoods = ['breakfast burrito', 'pizza', 'fruits', 'tacos']; // console output => ['breakfast burrito', 'pizza', 'fruits'];
- Cool, now that you have figured out how to remove the last value from an array, what if I wanted to remove the first value instead? Take a look at the example below:
var recipe = ['sugar', 'eggs', 'milk', 'flour']; // console output => ['eggs', 'milk', 'flour'];
Awesome, now that we’ve learned how to insert/remove values from the beginning/end of an array, let’s do another one that requires us using multiple array prototype methods.
- I have an array of movies but have decided I want to replace
Wedding Crashers. How might I do this?
var myMovies = ['Avengers', 'Sherlock Holmes', 'V for Vendetta', 'Fight Club', 'Billy Madison']; // console output => ['Avengers', 'Sherlock Holmes', 'V for Vendetta', 'Fight Club', 'Wedding Crashers'];
- Let’s do one more. Let’s say I have a list of numbers and want to take the last number off and add 0 to the beginning. Using what you have learned from the previous exercises, how could you do this?
var numbers = [1, 2, 3, 4, 5, 6]; // console output => [0, 1, 2, 3, 4, 5];
Exploring a Few More Methods
Nice work! You should have learned atleast 4 different array prototype methods from the exercises before. Maybe more! Now that you’re getting pretty good at looking through the docs, let’s do a few more exercises and try some different methods.
- I have an array of animals but they are all jumbled up. How can we sort these animals alphabetically?
var animals = ['zebra', 'giraffe', 'horse', 'red panda', 'polar bear', 'aardvark']; // console output => ['aardvark', 'giraffe', 'horse', 'polar bear', 'red panda', 'zebra'];
- What if I had another array of numbers and just wanted to reverse the order so it was descending instead of ascending? Which array prototype method could you use?
var numbers = [0, 15, 17, 48, 92, 131]; // console output => [131, 92, 48, 17, 15, 0];
- I have two arrays,
vegetables, that I want to combine together. Without using a
forloop, how could we implement this?
var healthyFoods = ['bananas', 'chicken', 'salmon', 'pecans']; var vegetables = ['broccoli', 'cucumber', 'asparagus', 'kale']; // console output => ['bananas', 'chicken', 'salmon', 'pecans', 'broccoli', 'cucumber', 'asparagus', 'kale'];
- I have an array of user names and would like to find the index of
Brandon. Is there an array prototype method that allows me to find what index he is in the array?
var userNames = ['Justin', 'Tiffany', 'David', 'Brandon', 'Kristen', 'Heather']; // console output => 3
Bonus: What value gets returned if I try to find the index of
- I have an array of halloween costumes that I need to add a string of
'are super scary!'. Without using a
forloop to iterate through the array, what other array prototype methods could I use to iterate through and manipulate this data?
var scaryCostumes = ['Pumpkins', 'Ghosts', 'Vampires', 'Skeletons']; // console output => [ 'Pumpkins are super scary!', 'Ghosts are super scary!', 'Vampires are super scary!', 'Skeletons are super scary!' ];
Turns out, array prototype methods are pretty awesome. They allow us to deal with arrays in a variety of ways. Being able to quickly go to the docs and find which array prototype method you need for some kind of functionality is really important. In your journals, write down your answers to each question. After you are done, discuss with the person next to you what you have learned.
- How might you use some of these array prototype methods in your current/future projects?
- What techniques did you use when going through the documentation?
- Which array prototype method/s are still confusing to you?
- What are your next steps in getting more comfortable with array prototype methods?