 |
|
Arrays
What is an Array?
An array is a type of variable which acts like a container, that can hold values of multiple objects. The values stored inside an array are contained within elements of that array.
The elements of an array can be any kind of object type, even other arrays. In fact, the elements of an array can be objects such as structs, classes, and method functions, in addition to strings, booleans and values.
Some programming languages require that every element of an array be of the same object type, however with JavaScript each element can be a different type, therefore a JavaScript array can contain a mixture of multiple different elements where each element can be a different object type.
For Example:
var myStuff = ["books" , 567, [12.34, "USA" ], true ];
Creating Arrays
The easiest way to create an array in JavaScript is by using array literals, which is how each of the arrays in all of the examples shown above were made.
Another common way to create an array is by creating an empty array, and then setting the values of each element individually, for example:
var petType = [];
petType[0] = "Cat" ;
petType[1] = "Dog" ;
petType[2] = "Fish" ;
petType[3] = "Bird" ;
You can also use JavaScripts built-in array constructor new Array(). The following example shows two ways to use the new Array() syntax:
var petType = new Array ();
petType[0] = "Cat" ;
petType[1] = "Dog" ;
petType[2] = "Fish" ;
petType[3] = "Bird" ;
var myFruits = new Array ("banana" , "apple" , "orange" , "strawberry" );
Accessing Elements
To access one of the elements of an array variable, you will need to use the brackets and the index number of the desired element: myArray[3]. The index values of arrays in JavaScript begin at 0, and increment numerically, so the first element will always be accessed by [0].
For Example:
var myStuff = ["books" , 567, [12.34, "USA" ], true ];
var tempValue = myStuff[0];
The result of this example is that the element value located at index 0 of the myStuff array ("books") is assigned to a new variable named tempValue.
To get the last element, you can use brackets and '1' less than the array's length property.
For Example:
var myStuff = ["books" , 567, [12.34, "USA" ], true ];
var tempValue = myStuff[myStuff.length - 1];
document.getElementById("feedbackLabel" ).innerHTML = tempValue;
The result of this example is that the element value located at the last index of the myStuff array (true) is assigned to a new variable named tempValue. The tempValue is then displayed in a feedbackLabel onto the web page itself.
The index of an array is used not only to retrieve that elements value, but to set that elements value as well. If that element already has a value, then this will overwrite it and reset that element with a new value.
For Example:
var myStuff = ["books" , 567, [12.34, "USA" ], true ];
myStuff[1] = 42;
In this example, we set a new value into the element located at index value 1 of the myStuff array, which changes the value of that particular element from its original value of 567 to a new value of 42.
A common way to loop through an array is by using a for loop, for example:
var guests = ["Richard" , "Amy" , "John" , "David" , "Marla" , "Tony" ];
let guestCount = guests.length;
let tempText = "<ul>" ;
for (let i = 0; i < guestCount; i++) {
tempText += "<li>" + guests[i] + "</li>" ;
}
tempText = "</ul>" ;
Properties and Methods
JavaScript arrays have their own built-in variables and helper utility functions, commonly known as Properties and Methods. Below is a list of the more common array methods and a description of each:
- length : An array's length property stores the number of elements inside the array. This makes it easy for you to determine the size in quantity (i.e. the number of elements) within an array.
- concat : The concat method is used for concatenation by combining the element values of two arrays into one array.
- pop : The pop method is used to remove (i.e. pop-off) the last element in the array, and it also returns that elements value.
- push : The push method is used to add a new element to the array, and it returns the array's new length value.
- reverse : The reverse method returns a copy of the array, but with its elements positioned in opposite (i.e. reverse) order than the original arrays.
- sort : The sort method rearranges the elements of the array in an effort to sort the elements by value in an alphabetical fashion. By default, the sort function sorts values as if they are strings. Therefore if numbers are sorted (as strings) then "25" is bigger than "100" because the string value "2" is bigger than the string value "1" when read as a string left-to-right.
Sorting Numbers
A simple way to sort an array of numbers correctly is by providing a compare function to the sort method, for example:
var sales = [12, 4, 124.99, 124, 17];
sales.sort(function (a, b) {return a - b});
Final Thoughts
Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.
Be the first to rate this post
