Home arrow JavaScript arrow Page 3 - 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 - Object Type Array with its Contents
(Page 3 of 5 )

Here, we shall create the array in fig1.1 using the constructor function. As I said above, the array is an object. We simply use object features that will make the object behave like an array. This is it; the explanation is given below.



<script type="text/javascript">

function CustomArray()


this[0] = {0:"val00",1:"val01",2:"val02",3:"val03",4:"val04",5:"val05",5:"val06"};

this[1] = {0:"val10",1:"val11",2:"val12",3:"val13",4:"val14"};

this[2] = {0:"val20",1:"val21",2:"val22",3:"val23",4:"val24",5:"val25"};

this[3] = {0:"val30",1:"val31",2:"val32",3:"val33",4:"val34",2:"val35",5:"val36"};

this[4] = {0:"val40",1:"val41",2:"val42",3:"val43"};

this[5] = {0:"val50",1:"val51",2:"val52",3:"val53",4:"val54"};



myArray = new CustomArray();





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



The name of the object type is CustomArray. Only properties are found in this particular object type; no methods have been included. The variable for the first property is "this[0]." Note that the property has been defined by an index. We must always refer to it by an index. Note that the other properties have also been defined in this way. An object initializer is assigned to each of these properties (variables).

These object initializers are of different lengths. Each property in an object initializer is defined by an index. When you define a property by an index, you have to refer to it by an index. The rows of our array are the properties of the array object; the "this" keyword is used for that. The cells (columns) are properties of the object initializers. Now that the rows and cells have been defined by indices, we can use the double pair of square brackets [i][j] to address a cell.

For simplicity, all of the cell contents in this series will be strings.

After the constructor function in the code, an array (object) is created from the CustomArray object type. The name of this inherited array (created) is myArray.

There is an HTML button. The onclick attribute of this button has an alert statement. The value of the alert statement is


This is an expression. It returns the value of the cell in row 2 and column 3. Just bear in mind that not all rows may have cell (column) 3 in your projects because the rows can be of different lengths. In that case the expression will return as being undefined. In general, whenever you ask for the value of a cell whose row or column does not exist, you receive the information that it is undefined.

When the button in our code here is clicked, the alert box displays "val23," which is the value in row 2, column 3. Note the use of the double pair of square brackets in the value of the onclick attribute. In this series, the row number comes first, before the column (cell) number.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials