FOP: JavaScript Arrays(Lists)

Arrays(Lists): An Array(List) is a data type in many programming languages that can hold more than one value. Arrays can hold multiple values but they all “must” be of the same type. All numbers, All strings, All characters, All boolean values, etc. To create an array you simply just give it a name and assign the values you would want stored inside the array. Look below: var evens = [2, 4, 6, 8, 10]; //evens is the name of the array Remember indexes start at 0 in arrays. So the indexes of the array above are 0, 1, 2, 3, and 4. You can also create arrays that are empty and add the data later.

appendItem: appendItem(array, item) is a command where you can add some data to the end of the array specified. In the example below I will add the number 12 to array called evens. var evens = [2, 4, 6, 8, 10]; //Creates the array called evens with initial values. appendItem( evens, 12); //This command will add the number 12 to the array evens evens now contains 2, 4, 6, 8, 10, and 12. This is a very useful method to add items to your array dynamically! You can even add random numbers to your lists appendItem( evens, randomNumber(20, 30)); // Will add a random number between 20 // and 30 to the array evens

Using indexes with arrays: To access a particular element inside your array you must know which index the element inside is located at. Below is the code to print out the number 12 from the array called numbers. var numbers = [3, 8, 12, 11, 7, 1, 23]; //The number 12 is located at index 2 console.log ( numbers[2] ); //This will print the value at index 2 inside the array numbers If you want to change a certain element inside an array that is simple too! Just know the index of the array and assign it a new value as shown below. var numbers = [3, 8, 12, 11, 7, 1, 23]; //We are going to change the value at index 3 to the number 100 numbers[3] = 100; numbers[3]++; //Increase the value at index 3 by 1 Now the values in the array numbers are [3, 8, 12, 101, 7, 1, 23]

Using indexes with arrays: You can always refer to a specific value inside your array simply by knowing its index. For example if I wanted to add up all the values inside my array I can do so as shown below. var numbers = [3, 8, 12]; //Indexes are 0, 1, and 2 var sum = numbers[0] + numbers[1] + numbers[2]; //sum is 23 You can perform all the same operations on array as you would variables. You just need to know the index of the array you want to use!

Inserting and Removing Items: You can also insert items at any index by using the insertItem(list, index, item) command. This command works similar to append item but instead of adding the item to the end of the array, you can specifically choose the index, Everything at that index and on will just be shifted over one index. var evens = [2, 4, 8, 10]; insertItem(evens, 2, 6); //Insert the value 6 at index 2 in the array called evens The values in evens are [2, 4, 6, 8, 10] You can also remove items at a certain index using the removeItem( list, index) command. var evens = [2, 4, 6, 7, 8, 10]; removeItem( evens, 3 ); //Remove the value at index 3 in the array called evens. The values in evens are now [2, 4, 6, 8, 10];

Out of Bounds and array.length: Be careful to not try and access an index of an array that does not exist or you will receive an out of bounds error! Lets take a look at an example below. var names = [“Roy”, “Kristina”, “Cameron”]; console.log( names[5] ) //Will result in error because there is no index 5 in the array names You can also figure out the size of an array by using the array.length command. This command will simply give you the amount of elements in your array. console.log( names.length ); //Will print out 3 since there are three elements in the array names You can also print out the last value inside an array by using array.length but remember indexes of arrays start at 0. console.log ( names[ names.length – 1 ] ); //Will print out “Cameron”

App Creation There is only one goal today and that is to complete puzzles 20 – 29. You will create an app that lists your favorite things in life. Example shown on screen If you are struggling completing parts 20-29 on your own it is recommended that you complete the previous puzzles for extra help. Make sure the output of your program is exactly what is supposed to be outputted. When you are finished with your app you will show me!

Important Info: Quiz next Tuesday on everything we’ve done in Unit 5 so far including arrays Review sheet will be handed out next class