ECMAScript Array
ECMAScript Basics - Part 11
Forward: In this article I explain the ECMAScript Array.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
List Example
Imagine that you are a proprietor of a small company, and you have 10 employees. In your ECMAScript program, you can have their first names in an array. Each list item here is a first name. Let the list be: John, Mary, Peter, Augustine, Angela, Susan, Martin, Grace, Paul, Simon. We shell use this list as items for the arrays below. An array item is called an element.
Creating an Array
You create an array using what is called an array constructor. The array constructor is:
new Array()
You begin with the operator, new, then followed by the word, Array, then parentheses. The parentheses may have components within its pair. ECMAScript is case sensitive; so reserved words must be spelled exactly as they are given. new, and Array, above are reserved words. You must type them exactly as given above. In the word, “Array”, A is in uppercase while the rest of the letters are in lowercase.
You can create an array and at the same time populating (put in the elements) it. You can create an array giving it an initial length (number of elements). You can create an array without populating it or giving it any length.
You can create an array for the list in the example above, populating it at the same time, as follows:
empArr = new Array("John", "Mary", "Peter", "Augustine", "Angela", "Susan", "Martin", "Grace", "Paul", "Simon")
empArr is a name you can give to the array; it is a variable. Generally, array elements are literals. So, if one of the elements is an integer, you can type the integer without quotes. The following creates an array of length 10, but without any element.
empArr = new Array(10)
The length value goes into the parentheses alone, without any element. In the previous case, you have the elements without any length value. To create the array without any element or length value, you type,
empArr = new Array()
The parentheses is empty. The syntax for the three methods of creating an array is:
arrayObjectName = new Array(element0, element1, ..., elementN)
arrayObjectName = new Array(arrayLength)
arrayObjectName = new Array()
You can consider an array to be made up of cells where each cell receives an element.
The first method above creates and populates an array at the same time. The syntax to change the content of a cell or give it a new value is:
arrayObjectName[i] = literal;
You begin with the name, followed by the open square bracket, then the cell position number, the close square bracket, then the assignment operator and literal. You can use a variable in place of the literal, here. Array cell position counting begins from zero, not 1. So, the first position is position zero, the second is position 1, the third is position 2, etc. In general, counting in computing and programming begins from zero, not 1. You use this syntax to populate an array. If you create the array of the example above, using the second and third method, then you still have to populate the array. You do that as in the following code:
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
alert(empArr[2]);
</script>
You can try the above code. The alert box should show, Peter. Array cell position is called Index.
Use the following syntax to access an element:
arrayObjectName[i]
See the alert statement in the above code.
Reading the Value of an Array
The syntax to read the value of an array into a variable, is:
vaiableName = arrayObjectName[i]
Displaying the Elements of an Array
You can display the elements of an array. The elements appear as a comma separated list of items. Try the following code:
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
document.write(empArr);
</script>
You simply make the argument of the alert or write function, the name of the array.
The length Property
The Array object has a length property. This is the number of elements in an array. You can use it to set the length of an array. If the length of the array was not set during creation of the array, then you can use the length property to set the length at run time.
If at run time, the array is very long, the length property can be used to truncate the array. In the following code the length of the array is set and read (displayed), using the length property:
<script type="text/ECMAScript">
empArr = new Array();
empArr.length = 10;
alert(empArr.length)
</script>
Here, the alert argument is the expression, “empArr.length”. You could still assign the return value of this expression to a variable and display the value of the variable, something like:
myVar = empArr.length;
alert(myVar);
To execute a method, you type the name of the array first, followed by a dot, then the method name, and then parentheses. The parentheses may have arguments.
The shift Method
The Array shift method removes the first element from an array and returns that element. Read and try the following code (note how the shift method has been used):
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
myVar = empArr.shift();
alert(myVar);
alert(empArr.length);
</script>
The pop Method
The pop method removes the last element from an array and returns that element. Read and try the following code (note how the pop method has been used):
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
myVar = empArr.pop();
alert(myVar);
alert(empArr.length)
</script>
This function sorts the elements of an array, in dictionary order, unless some other feature is specified. Read and try the following code (note how the sort method has been used):
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
myVar = empArr.sort();
alert(myVar);
alert(empArr.length)
</script>
The push Method
The push method adds one or more elements to the end of an array and returns the new length of the array. Try the following code (note how the push method has been used):
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
myVar = empArr.push("Charles", "James");
alert(myVar);
alert(empArr.length)
</script>
The splice method adds and/or removes elements from an array. This is what (quoting) the ECMAScript specification has about the splice method:
Syntax
splice(index, howMany, [element1][, ..., elementN])
Parameters
Index: Index at which to start changing the array.
howMany: An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed. In this case, you should specify at least one new element.
element1, ..., elementN: The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array.
The last parameter (set in square brackets) in the splice method is optional.
Read and try the following code:
<script type="text/ECMAScript">
empArr = new Array();
empArr[0] = "John";
empArr[1] = "Mary";
empArr[2] = "Peter";
empArr[3] = "Augustine";
empArr[4] = "Angela";
empArr[5] = "Susan";
empArr[6] = "Martin";
empArr[7] = "Grace";
empArr[8] = "Paul";
empArr[9] = "Simon";
myVar = empArr.splice(3, 2, "Roland", "Dorothy");
alert(myVar);
alert(empArr.length)
</script>
With the splice method, you must either remove elements or add elements or remove and add elements.
We have come to the end of this part of the series. Rendezvous in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT