1800 419 9397
Job Oriented Training
Tutorials on Arrays In JavaScript
Arrays are usually a kind of collection. In most cases, each array usually contains zero or more like items which one can manipulate as the group. The section will provide an extremely brief idea about arrays which will lead into discussions. Usually creating an array JavaScript will provide with three methods for creating arrays: regular, condensed and literal. This is in one way good like the other. Out of three, the most regular method shown in the following listing is surely easy to understand but if considered the methods shown in the listing then the literal method is certainly more compact.
<h2>Regular:</h2>
<script language="JavaScript"> // Create the array.
var Colors = new Array(); // Fill the array with data.
Colors[0] = "Blue";
Colors[1] = "Green";
Colors[2] = "Purple"; // Display the content onscreen.
document.write(Colors);
</script>
<h2>Condensed:</h2>
<script language="JavaScript"> // Create the array and fill it with data.
var Colors = new Array("Blue", "Green", "Purple"); // Display the content onscreen.
document.write(Colors);
</script>
<h2>Literal:</h2>
<script language="JavaScript"> // Create the array and fill it with data.
var Colors = ["Blue", "Green", "Purple"]; // Display the content onscreen.
document.write(Colors);
</script>
All the methods produced are certainly in the same array. The regular method will create array first and then accordingly assign string for each array element by number. Here the square brackets behind the Colors will indicate element numbers which start at 0 with increments by 1 for each element added. Notice in case of the condensed method one will enclose the array elements right in the parentheses as part of the constructor. However with the literal method, one can enclose array elements in square brackets.
Accessing The Array Members
Every array member usually has unique number- address of sorts. One access array members by giving array name then the element numbers within square brackets. Usually one can use loop for accessing array members. The below code is an example of how one might access an array with one element displaying the content.
<body>
<h1>Access Array Elements</h1>
<script language="JavaScript"> // Create the array and fill it with data.
var Colors = ["Blue", "Green", "Purple"]; // Define a loop to access each array element and display it onscreen.
for (i = 0; i < Colors.length; i++)
{ document.write("Colors " + i + " = " + Colors[i] + "<br />");
}
</script> </body>
This example will use a “for loop”. The for loop will create counter variable (a number) which is named i starting with 0 which is the first element of the array and will continue to increment (i++) till it has accessed all the array elements ( i<Colors.length). The document.write() function will output the Colors element number, the content ( as Colors [i] where is the element number) and an end-of-line tag.
How To Add And Update Values In Arrays
A value is added right to an array at any index at any given time. Take the example, below we are adding value to numeric index 50 of an empty array. One can add value to the array at any index at any time. So adding value to the numeric index 50 right of an empty array, JavaScript will fill the necessary indexes with undefined values.
<!DOCTYPE html><html lang="en"><body><script> var myArray = []; myArray[50] = 'blue'; console.log(myArray.length); /* logs 51 (0 is counted) because JS created values 0 to 50 before "blue"*/ </script> </body> </html>
The dynamic nature of JavaScript and the fact that JavaScript is not typed, an array value can be updated any time and the value which is contained in index can certainly be legal JavaScript value. Below the value of the numeric index 50 is changed to an object.
<!DOCTYPE html>
<html lang="en"><body><script>
var myArray = [];
myArray[50] = 'blue';
myArray[50] = {'color': 'blue'}; /* change object type from string to Object() object */
console.log(myArray[50]); // logs 'Object {color="blue"}'
// using brackets to access the index in the array, then the property blue
console.log(myArray[50]['color']); // logs 'blue'
// using dot notation
console.log(myArray[50].color); // logs 'blue'
</script></body></html>
Defining Arrays With A Length Which Is Predefined
As it is mentioned earlier, by passing a single integer parameter to the Array() constructor, it is certainly possible to predefine the array’s length or the number of values which it will have. The constructor usually makes an exception assuming the length of the array and not pre-populating the array with values. Given below is the myArray array with a predefined length of 3. We can configure the length of the array by not passing the value which is stored right at 0 index.
<!DOCTYPE html><html lang="en"><body><script> var myArray = new Array(3); console.log(myArray.length); /* logs 3, because we are passing one numeric parameter */ console.log(myArray[0]); // logs undefined </script></body></html>
Setting The Array Length Can Certainly Add Or Remove Values.
The length property of an array object can be used for getting or setting the length of array. Setting the length which is higher than the actual number of values which are contained in the array will surely add undefined values to the array. What one might expect is that one can actually remove values from array by setting the length value to a number which is less than the number of values which is contained in the array.
<!DOCTYPE html> <html lang="en"> <body><script> var myArray = ['blue', 'green', 'orange', 'red']; console.log(myArray.length); // logs 4 myArray.length = 99; console.log(myArray.length); /* logs 99, remember we set the length, not an index */ myArray.length = 1; // removed all but one value, so index [1] is gone! console.log(myArray[1]); // logs undefined console.log(myArray); // logs '["blue"]' </script></body></html>
Looping Over an Array, Forwards and Backwards
The simple as well as the fastest way for looping over an array is to use while in the loop. Given below is the loop right from the beginning of the index till the end.
<!DOCTYPE html><html lang="en"><body><script>
var myArray = ['blue', 'green', 'orange', 'red'];
var myArrayLength = myArray.length; /* cache array length, to avoid unnecessary lookup */
var counter = 0; // setup counter
while (counter < myArrayLength) { // run if counter is less than array length
console.log(myArray[counter]); // logs 'blue', 'green', 'orange', 'red'
counter++; // add 1 to the counter
}
</script></body></html>
And now we loop from the end of the index to the beginning.
<!DOCTYPE html> <html lang=”en”> <body> <script> var myArray = [‘blue’, ‘green’, ‘orange’, ‘red’]; var myArrayLength = myArray.length; while (myArrayLength–) { /* if length is not zero, loop and subtract 1 */ console.log(myArray[myArrayLength]); // logs ‘red’, ‘orange’, ‘green’, ‘blue’ } </script> </body></html>
Also Read,
