Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JavaScript 006 – Two-Dimensional Array

1. JavaScript Two-Dimensional Array

There is no direct method for creating Two-Dimensional Array in JavaScript. But using the Array of Array technique, one can create Two-Dimensional array in JavaScript. Now let us jump into the Example.

2. Declaring Two-Dimensional Array

Now have a look at the below code:

JavaScript Two Dimensional Array
JavaScript Two Dimensional Array

1) Here, we declared a single-dimensional array called Students. At this stage, the array length is not known.

2) Here, we defined the length for the first dimension. The length for it is 3. Also note, each cell is an array of length unknown, and this tells we have an array of array. Say, for example, if you want to the access the third array, you can use Students[2]. So, three arrays are stacked in an array called Students.

The below picture depicts the array at this stage:

JavaScript Array of Array Cells
JavaScript Array of Array Cells

Here, you can clearly see an Array Students is having three cells. Means, we know the first dimension and each cell can hold an array. The array in the cell is declared in the above code snippet-2, but its length is not known.

3. Deciding the Second Dimension

Now let us proceed with defining the array inside an array. The code snippet is below:

JavaScript Deciding Second Dimension of the Array
JavaScript Deciding Second Dimension of the Array

In the code snippet above, the first dimension of the array specified by the indexing operator in the red box, whereas the second dimension is mentioned by the blue box. Here, we defined two arrays of length 4 which were kept inside the outer array. The third array is still not defined. Below picture shows how the array is now:

JavaScript Array of Array Cells Populated
JavaScript Array of Array Cells Populated

The index shown in red identifies the outer array. We can say it will identify a specific student. The index in green identifies a specific cell inside a single student. We can say the first cell is the student’s name, 2nd, 3rd and 4th cells denote the student’s marks. In the above code snippet, we not only defined the second dimension for the Students Array. We also populated the array with values. So, every row identifies a student record and every cell within a student record identifies data specific to a student.

4. Reading Data From 2D Array

Using the index operator, we can also read the data. First dimension locates the outer array (Student Record), the second dimension fetches a specific data about a student. Now look at the below code snippet:

Reading JavaScript Two Dimensional Array
Reading JavaScript Two Dimensional Array

1) Here, we print the student’s name. The index 1 at first dimension locates the record. In our case, it is Johnson’s record data. The second index number 0 tells, we need to get the data from the first cell location. These two indexes together identify the data as ‘Johnson’.

2) Here, we read all other data cells for the student Johnson. Note how the first index fixed to 1 and second index varies to read all the marks obtained cells.

5. Two-Dimensional Array Code Reference


JavaScript 2D Array - Script Output
JavaScript 2D Array – Script Output

Categories: JavaScript

Tags: ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.