Creating Multi dimensional Arrays in Javascript

If you asked my opinion about Multidimensional arrays, 3 or 4 years ago, I would have said that they were the most simplistic concept to grasp but the most complicated to implement since this is what pops into my mind as soon as I think of a Multidimensional Array

That was ages ago before I discovered the most easiest way, as easy as understanding multidimensional arrays, to implement them. Well, maybe some of you may already be well aware and this might sound like a trivial task, there is a percentage that needs clarification in this concept like I did 4 years ago. So buckle up, here we go.

Let's start off with the very basics. What's an Array?

The primitive definition of arrays simply stated that " Arrays were a storage medium that could hold a fixed number of values of a single type" . While this is partially true, it not the case anymore. Considering the programming language that I've chosen at hand, I think we can expand this definition and modify it to new levels.

Javascript provides the ever so useful feature of allowing arrays that can be dynamically created, meaning that the size of the array can be decided at a later time and doesn't even have to be fixed. It can be modified, either incremented or decremented as the number data to be stored to the array changes.

Well, we all might have noted this dynamism of creating linear one dimensional or two dimensional arrays at some point. So let's step into creating multi dimensional arrays. 

A multidimensional array, in my opinion is an array within an array. Let's discuss the an array using a table to visualize this easily.

Imagine that you have a simple table where you need to store Student Details such as Name, Age, Grade and Subjects offered. Now, since we have to store details of many students, it might be obvious that this is already a two dimensional array where the above details will be mapped in such a way 

Upto a certain level this table might seem to be sufficient to grab info from. But, it will be considered to be much cleaner and efficient if the last column, that saves the 'Subjects Offered' ,was also subdivided as shown below.

This provides us the privilege of manipulating details of these sub- disciplines of the subjects as well. So, how do we implement this?

Let's call the array that maps the above Student Details, "studentArray". And we'll be creating the skeleton for this array.

var noOfStudentRecords=100;
var noOfColumns = 4;
var studentArray = [];
for(var x = 0; x < noOfStudentRecords; x++)
    studentArray[x] = [];
    for(var y = 0; y < noOfColumns; y++)
            studentArray[x][y]= new Array[3];
In the above code, we specify the third column as a new array, hence an array within another array creating a multidimensional array.

This is a very basic explanation of creating multidimensional arrays. In more complex situations, we can split these individual subjects into further categories to host additional details, applying the same concept as above.



Popular posts from this blog

jsPlumb - Dragging a Clone

jsPlumb - Drag and Drop Multiple Elements

Creating connections between Elements in jsPlumb