JavaScript - Array

The JavaScript array is one of the most useful data constructions you have available to you

JavaScript give mostly two type
 - Basic Array (Single Column)
 - Advanced Array (Multiple Column)


Right now we talking about Basic Array. And little bit about Advanced Array.

You can visualize the structure of a basic array as if it were a single-column spreadsheet. Each row of the column holds a distinct piece of data, and each row is numbered.


Numbers assigned to rows are in strict numerical sequence, starting with zero as the first row (programmers tend to start counting with zero). This row number is called an index.

 To access an item in an array, you need to know the name of the array and the index for the row. Because index values start with zero, the  total number of items of the array (as determined by the array’s length property) is always one more than the highest index value of the array.


More advanced array concepts enable you to create the equivalent of an array with multiple columns.
Data elements inside JavaScript arrays can be any data type, including objects. And, unlike a lot of other programming languages, different rows of the same JavaScript array can contain different data types.


Creating an Array:


An array is stored in a variable, so when you create an array you assign the new array object to the variable.

 

A special keyword—new—preceding a call to the JavaScript function that generates arrays creates space in memory for the array.


An optional parameter to the Array () function enables you to specify at the time of creation how many elements (rows) of data eventually will occupy the array.


JavaScript is very forgiving about this because you can change the size of an array at any time. Therefore, if you omit a parameter when generating a new array, your script incurs no penalty.


To demonstrate the array creation process, I create an array that holds the names of the 5 IT Company. The first task is to create that array and assign it to a variable of any name that helps me remember what this collection of data is about:
        var ITCompany = new Array(4);


At this point, the ITCompany array is sitting in memory like a 5-row table with no data in it.


To fill the rows, I must assign data to each row. Addressing each row of an array requires a special way of indicating the index value of the row: square brackets after the name of the array.


The first row of the ITCompany array is addressed as below and by using assignment operator

ITCompany[0] = “Visions Developer”;
ITCompany[1] = “7Seas Developer”;
ITCompany[2] = “Dream Developer”;
ITCompany[3] = “TCS”;
ITCompany[4] = “Wipro”;

 

Accessing array data:

The array index is the key to accessing an array element. The name of the array and an index in square brackets evaluates to the content of that array location.


For example, after the ITCompany array is built, a script can display an alert with Visions Developer name in it with the following statement:


alert(“The second largest company is “ + ITCompany[0] + “.”);


Just as you can retrieve data from an indexed array element, so can you change the element by reassigning a new value to any indexed element in the array.

 

Parallel arrays:

Now I show you why the numeric index methodology works well in JavaScript. To help with the demonstration, I generate another array that is parallel with the ITCompany array.


This new array is also 5 elements long, and it contains the year in which the company in the corresponding row of ITCompany started. That array construction looks like the following:


var cmpYear = new Array(5);
cmpYear [0] = 2009;
cmpYear [1] = 2008;
cmpYear [2] = 2005;
cmpYear [3] = 2000;                
cmpYear [4] = 1999;

An event handler from either the text field or a clickable button calls a function that looks up the company name, fetches the corresponding start year, and displays an alert message with the information. The function is as follows:

function getStartDate()
{
var selectedCmp = document.getElementById(“entry”).value;
for ( var i = 0; i < ITCompany.length; i++)
{
if (ITCompany[i] == selectedCmp)
{
break;
}
}
alert(“Starting Year of Company“ + cmpYear[i] + “.”);
}

In the first statement of the function, I grab the value of the text box and assign the value to a variable, selectedCmp. In fact, the usage of that value is inside a for loop, so the script is marginally more efficient because the browser doesn’t have to evaluate that long reference to the text field each time through the loop.

The key to this function is in the for loop. Here is where I combine the natural behavior of incrementing a loop counter with the index values assigned to the two arrays.

Specifications for the loop indicate that the counter variable, i, is initialized with a value of zero. The loop is directed to continue as long as the value of i is less than the length of the ITCompany array.

Remember that the length of an array is always one more than the index value of the last item. Therefore, the last time the loop runs is when i is 5, which is both less than the length of 6 and equal to the index value of the last element.
Each time after the loop runs, the counter increments by one.

Nested inside the for loop is an if construction. The condition tests the value of an element of the array against the value typed in by the user. Each time through the loop, the condition tests a different row of the array starting with row zero. In other words, this if construction can be performed dozens of times before a match is found, but each time the value of i is one larger than the previous try.

The equality comparison operator (==) is strict when it comes to comparing string values.

Such comparisons respect the case of each letter. In our example, the user must type the company name exactly as it is stored in the ITCompany array for the match to be found.

When a match is found, the statement nested inside the if construction runs. The break statement is designed to help control structures bail out if the program needs it.

For this application, it is imperative that the for loop stop running when a match for the state name is found. When the for loop breaks, the value of the i counter is fixed at the row of the ITCompany array containing the entered state. I need that index value to find the corresponding entry in the other array. Even though the counting variable, i, is initialized in the for loop, it is still “alive” and in the scope of the function for all statements after the initialization.

That’s why I can use it to extract the value of the row of the cmpYear array in the final statement that displays the results in an alert message.