Pure JavaScript1

[Variable Scope] [Strings as Array Indexes] [Multidim Arrays] [Arrays as Objects] [JavaScript Home] [Web Home]
Naming and Assigning Variables
Variable declaration without assignment

var firstName;

Variable assignment without declaration

firstName = "Sue";

Variable declaration and assignment

var age = 21, height = 5;

Display the results

document.write(firstName, " is ",age," years old and ",height," feet tall.");

The following line is produced by JavaScript using the above declared variables.

Variable Scope
A variable can be either global or local. All variables are global unless they are declared (var) in a function, in which case the variable is local to that function. It is possible for two variables with the same name to exist if one is global and the other is local to a function. The following code declares two global variables, colour and size. The monitorSpec() function creates a new variable called size that only exists within the scope of the function. Because the function does not specify var, the global variable colour is changed from green to purple. In addition, a new global variable, price, is declared within the function because the word var is not used.

Computer monitor specification example
//Initialise global variables

colour="green";
var size = 15;

//Declare a monitor specification function

function monitorSpecs()
{

//Declare and set variables inside a function

colour = "purple";
price = "£200";
var size = 17;
document.write("The ",size,"inch ",colour);
document.write(" monitor is ",price);
}

//Display results of monitorSpec() function

monitorSpecs();

//Display variable values outside of a function

document.write("
The ", size, " inch ", colour);
document.write(" monitor is ",price);

Using Strings for Array Indexes

E.g. SUITCASE INVENTORY

//Populate an array with suitcase contents

function populateArray(clothes){

clothes["Shirts"]=8;

clothes["Pants"]=10;

clothes["Trousers"]=5;

clothes["Socks"]=12;

}

//Display suitcase quantities

function displayArray(clothes){
document.write(clothes['Shirts']," shirts.<BR>");
document.write(clothes['Pants']," pants.<BR>");
document.write(clothes['Trousers']," trousers.<BR>");
document.write(clothes['Socks']," pair of socks. <BR>");
}

//Create a clothes quantity array

var clothesQty = new Array();

//Set clothes quantities

populateArray(clothesQty);

//Display the clothes quantities

displayArray(clothesQty);

The following contents list is derived from variables assigned in the above JavaScript array

Multidimensional Arrays

To create multidimensional arrays in JavaScript, the element of an array must be another array. The inner aray can be accessed by putting two [ ] operators back to back. The following example shows that to access the brake parts list double [ ] operators are used and the list is displayed in a table.

E.g. Brake Parts Inventory List

//Display brake part inventory in a table

function displayInventory(table){
document.write("<table border=on>");
document.write("<TH>Item Number</th><th>Item Name</th>");
document.write("<th>Model Number</th><th>Quantity</th>");

//Display each part

for(x=1; x<=3; x++)
{document.write("<tr><td>",x,"</td>");

//Display all information for each part

for(y=0; y<=2; y++)
{
document.write("<td>", table[x][y],"</td>");
}
document.write("</tr>");
}
document.write("</table>");
}

//Create a brake parts inventory list using a multidimensional array

part1 = new Array("Brake pads","39D48G",78);
part2 = new Array("Brake shoes","7D9UK3",45);
part3 = new Array("Rotors","97WOST","14");
brakeParts = new Array("",part1,part2,part3);

//Display the inventory of brake parts

displayInventory(brakeParts);

Arrays as Objects

Because arrays are essentially JavaScript objects, it is possible to access the elements of the arrays as properties if a string index is used. Dot notation is used, rather than the [ ] operators. Both tht [ ] operators and the dot notation are interchangeable when accessing an array, even in the same coding see the following example:

E.g Suitcase Contents

//Populate an array with suitcase contents

function populateArray(clothes)

JavaScript 1.0 Arrays

JavaScript 1.0 version originally used the Object() constructor to create arrays and because the properties of an Object() could be accessed using the [ ] operator, it was possible to give the illusion of an array