Javascript arrays
Arrays are a very important concept in Javascript as well as many other languages. An array is a special type of variable which stores a set of related values.
This lesson focuses on:
- Creating an array
- Adding values to an array
- Accessing an arrays elements
- Modifying an arrays elements
Creating an array
An array is created by initializing a variable which will be the name of the array together with the new and Array keywords. When you create an array, you create a new instance of the Array object. Objects are covered in detail in the next lesson.
Syntax for creating an array:
var arrayName = new Array();
Example:
<script type="text/javascript">
var colors = new Array();
</script>
In the above example, an array named "colors" is created.
Creating an array this way, you can add as many values as you want to it. Alternatively, you can specify an array to be of a particular size.
Example:
<script type="text/javascript">
var colors = new Array(10);
</script>
In the above example, an array named "colors" that can store 10 elements is created.
Adding values to an array
Once you create an array, you can add values to it by specifying the array name, an index in the array and a value to be placed in that index.
Syntax:
arrayName[index] = value;
Example:
<script type="text/javascript"> var colors = new Array(); colors[0] = "green"; colors[1] = "blue"; colors[2] = "gray"; colors[3] = "orange"; </script>
In the above example, an array named colors is declared. Four values are added to it.
NOTE: The first index of an array is 0, not 1!
Another way to assign values to an array involves doing so during the array's initialization.
Example:
<script type="text/javascript">
var colors = new Array("green", "blue", "orange", "gray");
</script>
Accessing an arrays elements
To access an arrays elements, refer to the array with the appropriate index number in brackets.
NOTE: Array indexes start at 0. So the 1st element of an array would be at index 0, the 5th element of an array would be at index at 4, and so on.
Example:
<script type="text/javascript">
var colors = new Array(4);
colors[0] = "green";
colors[1] = "blue";
colors[2] = "orange";
colors[3] = "gray";
//print the last element of the colors array
document.write("The last element in the colors array is " +
colors[3]);
</script>
Output:
Modifying an arrays elements
To modify an arrays elements, refer to the array with the appropriate index number in brackets of the value you want to change and set it to the new value.
Example:
<script type="text/javascript">
var colors = new Array(4);
colors[0] = "green";
colors[1] = "blue";
colors[2] = "gray";
colors[3] = "orange";
document.write("The old value of colors[1]: " +
colors[1]);
document.write("<br />The old value of colors[3]: " +
colors[3]);
//change the value of colors[1]
colors[1] = "teal";
//change the value of colors[3]
colors[3] = "violet";
document.write("<br /><br />The new value of colors[1]: " +
colors[1]);
document.write("<br />The new value of colors[3]: " +
colors[3]);
</script>
Output:
The old value of colors[3]: orange
The new value of colors[1]: teal
The new value of colors[3]: violet
