In this tutorial, am going to teach you javascript array and some of its features. You will learn how to declare javascript array as well as assign values.
Just like every other programming or scripting language, in javascript, an array is a collection or list of elements that are related or shared the same data types.
In any scripting or programming language, an array has distinct features and same goes with javascript array.
In order for you to understand what the term array is all about, think of array as follows;
- An array can hold data of different types in every assignment.
- Array does not have fixed size or length. In other words, the length of an array is dynamic and auto-growing.
In javascript, we have two methods of creating array and these two methods proved to be effective and efficient. The two methods are the array literal notation and array constructor.
The first method of javascript array declaration we are going to use is the literal form which is created using opening and closing square brackets []. This method can be used to create array of numbers, string, collection of related items e.t.c.
This javascript array method uses comma (,) to separate the list of items and it can be created during design time or execution time
Take for instance you want to create list of numbers from 0 to 9, declaring variables such as var zero = 0; var one = 1; var two = 2;... var n = n; to hold all these values will be time wasting and will definitely increase the size of your web page or application.
But with the help of array, all these values can be created using comma (,) as DELIMITER. The use of delimter in this context is to help the script processor identify each item as an entity instead of grouping all items as one which will in turn contradict the purpose of array.
So let us move straight to creating numbers array;
<script>
var ArrNumbers = [0,1,2,3,4,5,6,7,8,9];
</script>
As you can see in the above example, we didn't border to use double quote (") or single quot (') because we are dealing with numbers so there shouldn't be any need as javascript knows how to deal with this. But in case of strings, alphabet, or alphanumeric we need to separate each item using the double or single quot to denote each item as entity.
Take for instance the following example;
<script>
var country = [Nigeria, Australia, India, China,
Israel];
alert(country [1]);
</script>
If you run the above script, an error "not defined" will occur because javascript does not understand your script command. But in a case where you used double or single quot to separate array items containing alphabets, this error will not occur.
So, let us try the same example but this time separated with double quot.
<script>
var country = ["Nigeria", "Australia", "India", "China",
"Israel"];
alert (country [1]);
</script>
Creating Special Characters Array
If you noticed,the above array created is for numbers and alphabets. But there might be times that you may want to create special characters array. There is no difference just use same method as below;
<script>
var chars = ["/", "?", "*", ".",
"&"];
alert (chars [1]);
</script>
The second method of creating array in javascript is using the constructor. The javascript array constructor can also be used to create empty, fixed and dynamic array just as the javascript array literal form.
Let us examine some examples of using the Array() constructor.
The first example we are going to tackle is creating array of countries collection as shown below;
<script>
var country = Array("Nigeria", "Australia", "India", "China",
"Israel");
</script>
Now, let us also create numbers array just as we did using literal form or notation but this time, we are using the Array() constructor
<script>
var ArrNumbers = Array(0,1,2,3,4,5,6,7,8,9);
</script>
The javascript Array() constructor can also be used alongside with the "new" keyword. Let us repeat the same example but this time including the "new" keyword.
<script>
var country = new Array("Nigeria", "Australia", "India", "China",
"Israel");
</script>
Now, let us also create numbers array just as we did using Array() constructor but this time, we are using the Array() constructor alongside with "new" keyword.
<script>
var ArrNumbers = new Array (0,1,2,3,4,5,6,7,8,9);
</script>
An empty array can also be created if you wish all you have to do is make your declaration as follows;
<script>
var country = new Array();
</script>
This scenario of array is mostly used whenever you want to collect items that you are not certain of or when you want to give users chances of inputting their own data.
But in some cases, you might want to specify the maximum amount of data that array should hold or contain. In this case, if the number of elements that the array will contain is already known by you, then you can create an array with an initial size as depicted in the following example:
<script>
var country = new Array(5);
</script>
The array declared above has initial size of 5 and will contain or hold only five countries.
We have discussed much about creating array in javascript but we haven't talked about accessing this created array items right? Don't worry just check
getting array values on how you can access array items.
If you noticed, in all the examples above, we specified the array items but there might be some cases where you need to add new items or remove old to/from already existing array that have items or existing empty array. So how can you achieve this? The simplest answer is using push(), pop(), shift() and unshift() methods.
Check
Adding and removing items from array