Home arrow JavaScript arrow Page 5 - A Custom 2D JavaScript Array

A Custom 2D JavaScript Array

If you do not like the normal way of creating a two-dimensional array, for any particular reason, then this article is for you. Let me emphasize here that there's already a strong and growing need to make web pages active. So you need to start thinking about writing a custom two-dimensional JavaScript array. You will see how easy it is to do this.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
October 06, 2009
  1. · A Custom 2D JavaScript Array
  2. · The Array Properties and Methods
  3. · Object Type Array with its Contents
  4. · Object Type Array Without Contents
  5. · The Constructor Function with a Number of Rows and Columns

print this article

A Custom 2D JavaScript Array - The Constructor Function with a Number of Rows and Columns
(Page 5 of 5 )

We have a constructor function that has two parameters. The first one receives the number of rows; the second one receives the number of columns. Statements in the constructor functions create the rows (this[i]) and the cells (columns). Here we have a regular array with rows of the same length. The following code illustrates this:



<script type="text/javascript">

function CustomArray(y,x)


//form the row string

rowStr = "{"

for (j=0;j<y;j++)


if (j == 0)

rowStr += (j + ":" + "'" + undefined + "'");


rowStr += ("," + j + ":" + "'" + undefined + "'");


rowStr += "}";

//form the rows

for (i=0;i<x;i++)


//form evaluation string

evalStr = "this[i] = " + rowStr + ";";




myArray = new CustomArray(6,5);

myArray[2][3] = "val23";





<button type="button" onclick="alert(myArray[4][1]);">Click A</button>

<button type="button" onclick="alert(myArray[2][3]);">Click B</button>



The constructor function is CustomArray(y,x). The y parameter takes the arguments for the number of rows. The x parameter takes the argument for the number of columns (cells). The first code segment of this function forms the string for the object initializer for the rows. This is the same for all rows here. The code segment uses a for-loop for this. If there are five cells, each of them will be initially undefined.

The second code segment forms the property for each row; it joins the string of the object initializer to the "this[i] = " string in order to form the evalStr variable. The JavaScript top level eval() function is used in this segment. It takes the evalStr as argument and produces the statement that defines the property of the constructor function (object type).

The last code segment in the script forms the myArray array object of 6 rows and 5 columns. 6 and 5 are arguments of the constructor function. This code segment gives the value "val23" to the cell content of the cell at row 2, column 3.

You have two HTML buttons. When clicked, the first one displays the content of the cell at row 4, column 1. This is undefined. The second one, on the other hand, will display the value "val23," which is the content of the cell at row 2, column 3.

Let us take a break here. In the next part we shall look at the properties and methods.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials