Arrays are a type of global object that are used to store data.
It is an easier way to store lists of data to be used later on.
Fig 1. Stores all the bikes in different variables. This method is long and would eventually become diffcult to work with as the code gets longer.
Fig 2. An example of an array. Instead of five seperate variables, there is just one variable containing five elements.
Fig 1.
var bike = "Santa Cruz";
var bike1 = "Rocky Mountain";
var bike2 = "Norco";
var bike3 = "Commencal";
car bike4 = "Evil";
Fig 2.
var bike = ["Santa Cruz" , "Rocky Mountain" , "Norco" , "Commencal" , "Evil"];
Indexing Arrays
When counting the index of an array JS starts at 0. The above example would be indexed as the following:
| 0 |
1 |
2 |
3 |
4 |
| Santa Cruz |
Rocky Mountain |
Norco |
Commencal |
Evil |
Using the indexOf method, you can find the index of a particular elements.
e.g. bike.indexOf("Commencal"); => 3.
You can also access an item of an array by using the [].
e.g. bike[2]; => Norco.
If an index is not found, JS will return -1
bike.indexOf("giant"); => -1
Trying to access an item that does not exist will return 'undefined'
e.g. bike[11] => undefined
PLEASE NOTE:
Although when using the index method it starts counting at 0.
When you use the .length method it counts all elements.
e.g. bike.length(); => 5
If you don't know how many items are in an array you can find the last item by applying the following and creating a new array.
e.g var bikeLastItem = bike.length() - 1;
bike[bikeLastIndex] => Evil.
Array Methods.
As with strings and numbers, arrays can also be manipulated by JS script by using array methods.
When applying a method on an array they can either be a MUTATOR method, which modifies the original array, or ACCESSOR methods that returns a new array/value.
It will be stated which type they are below.
The first method needed is the .isArray method which returns a boolean answer. Although we have the typeOf method, with arrays JS will return it as an object, which sometimes can cause confusion if the developer needs to know whether it is specifically an array. Using the above example:
Array.isArray("bike"); => true.
PUSH(); - mutator
Adds an element(s) to the end of an array.
bike.push("Giant"); => "Santa Cruz, Rocky Mountain, Norco, Commencal, Evil, Giant";
POP(); - mutator
Removes the last element from the array.
bike.pop(); => "Santa Cruz, Rocky Mountain, Norco, Commencal";
SHIFT(); - mutator
Removes the first element from the beginning of an array.
bike.shift(); => "Rocky Mounatin, Norco, Commencal, Evil";
UNSHIFT(); - mutator
Adds an element(s) to the beginning of an array.
bike.unshift("Liv"); => "Liv, Santa Cruz, Rocky Mountain, Norco, Commencal, Evil";
REVERSE(); - mutator
Reverses the order of an array.
bike.reverse(); => "Evil, Commencal, Norco, Rocky Mountain, Santa Cruz";
SLICE(); - Accessor
Copies a portion of an array into a new array.
var bike = ["Santa Cruz" , "Rocky Mountain" , "Norco" , "Commencal" , "Evil"];
var newBike = bike.slice(1, 4);
PLEASE NOTE - The first index no. will be included in the array. The last index no. will not be included.
newBike; => "Rocky Mountain, Norco, Commencal";
SORT(); - mutator
Will sort the array in alphabetical order.
Please note. If an UpperCase words they will be ordered first.
It will not sort an array of numbers in ascending order.
bike.sort(); => "Commencal, Evil, Norco, Rocky Mountain, Santa Cruz";
FILL(); - mutator
Replaces all the items in an array with a value.
bike.fill("Liv"); => "Liv, Liv, Liv, Liv, Liv";
Takes an optional value of start and end points.
bike.fill("liv", 3, 4); => "Santa Cruz, Rocky Mountain, Norco, Liv, Evil";
SPLICE(); - mutator
Add or remove an item from any position in the array.
It take three parameters splice(index No. to start at, No. of items to be removed, items to add(optional));
ADDING WITH SPLICE - set the 'items to be removed' as 0, so then JS will not remove anything and only add.
bike.splice(2, 0, "trek"); => "Santa Cruz, Rocky Mountain, trek, Norco, Commencal, Evil";
REMOVING WITH SPLCE - leave third parameter blank to remove an item in the array. To remove trek from the above example:
bike.splice(2, 1); => "Santa Cruz, Rocky Mountain, Norco, Commencal, Evil";
CONCAT(); - accessor
Joins two arrays together to make a new array.
var bike = ["Santa Cruz" , "Rocky Mountain" , "Norco" , "Commencal" , "Evil"];
var style = ["Road" , "Mountain", "Enduro"];
var biking = bike.concat(style); =>
["Santa Cruz" , "Rocky Mountain" , "Norco" , "Commencal" , "Evil", "Road" , "Mountain", "Enduro"];
JOIN(); - accessor
Converts all elements of an array into a string.
If no argument is given, it will be comma seperated with no white-space.
bike.join(); => 'SantaCruz,RockyMountain,Norco,Commencal,Evil';
To avoid that, add a parameter into the brackets.
bike.join(', '); => 'Santa Cruz, Rocky Mountain, Norco, Commencal, Evil';
bike.join('-'); => 'SantaCruz-RockyMountain-Norco-Commencal-Evil';
Multi-Dimensional Arrays
An array within an array.
E.g. var bike = [["Santa Cruz" , "Rocky Mountain" , "Norco" , "Commencal" , "Evil"], ["Road" , "Mountain", "Enduro"]];
To index a multi-dimensional array you have to use two [][].
bike[0] => "Santa Cruz" , "Rocky Mountain" , "Norco" , "Commencal" , "Evil";
bike[1] => "Road" , "Mountain", "Enduro";
bike[1][2] => "Enduro";