1. Technology

Learn Javascript

Arrays

Join the Discussion

Questions? Comments?

More of this Tutorial

Objects and Properties Quiz Yourself

Related Terms

Object Constructor Array

Introduction

You learned how to define boolean, numeric, and text (string) variables in an earlier tutorial and will by now have been using them for some time. You may even have found yourself defining a group of similar variables where you need a number of different values to choose between using if or case statements or to pass at different times to the same function.

Giving each of these variables a meaningful name may be difficult if they are all meant to be basically the same thing. You mak have resorted to 'myField1', 'myField2', 'myField3', etc or something similar to that. Well Javascript provides a better way of defining variables in this situation that will make the subsequent processing of the variables much easier. The solution that is available is to define an array of variables to store the values in.

Defining Arrays

As you learned in the last tutorial, Javascript is an object oriented language so that you can create objects (variables) based on predefined or user defined classes. The Array class is one of the predefined classes available in Javascript and the first that we have come to that requires the class from which the object is to be derived be included in its definition rather than being assumed based on the value that is assigned to it.

We define an array object like this:

var myArray = new Array();

As you can see, we have defined an object (or variable) called myArray. Where this declaration differs from those we saw earlier is that equals sign is followed by the reserved word new which identifies that what follows is the constructor for a class, in this case we are calling the constructor for the Array() class.

So what exactly is a constructor? A constructor is a special method (function) attached to a class that defines how to create an object that belongs to that class. in this case the Array() method performs the processing necessary to create the object 'myArray'.

Since a method is like a function, we can pass parameters to it. Here we can pass any number of parameters to the Array() method to initialize the individual entries within the array like this:

var myArray = new Array('message one',
'message two','message three'
);

Doing this has the effect of initializing the first three entries in the array (in this example) to the values passed. You can pass as many parameters as you need to define as many variables within the array as you require. If instead of text strings you specify numbers or true/false then the type of variables within the array will be numeric or boolean instead of string variables.

Accessing Array Entries

So now that we have created our array and perhaps assigned values to some of the entries within it, how do we access those entries? Well here we need to introduce a new operator ([])that allows you to reference particular entries within the array. Entries within an array are numbered (starting with zero) and can be referenced by specifying the entry number between the brackets like this:

document.write(myArray[0]);

We can also assign values to individual entries within the array using the same operator like this:

myArray[3] = 'message four';

Of course like the other objects that we looked at in the previous tutorial there are a number of other properties and methods available that you can use with arrays. One in particular that you may find useful is the length property which will return the number of entries in the array that have been assigned values.

Using What You Know

Using an array you no longer need to come up with separate names for each of a series of related variables, you just create an array and reference them within that. If you want to set up a number of different greetings like we did in the earlier tutorials about using case statements and passing parameters to functions, we can now do away with the case statement and use an array instead.

function displayMessage(m) {
var greeting = new Array('Welcome','Merry Christmas',
'Happy New Year','Happy Easter','Happy Holidays');
if (m < 0 || m > greeting.length) m = 0;
document.write(greeting[m]); }

Past Lessons

  1. Introduction
  2. Decision Making
  3. Functions
  4. Maintain and Test
  5. External Script and Noscript

©2014 About.com. All rights reserved.