Home arrow JavaScript arrow Page 3 - Properties and Methods of Custom 2D JavaScript Arrays

Properties and Methods of Custom 2D JavaScript Arrays

This is part two of a series that discusses custom 2D JavaScript arrays. In this part of the series, we see how to develop the properties and methods of our custom 2D array.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
October 14, 2009
  1. · Properties and Methods of Custom 2D JavaScript Arrays
  2. · The Constructor Function
  3. · The Array Object Type Methods
  4. · Adding Cells

print this article

Properties and Methods of Custom 2D JavaScript Arrays - The Array Object Type Methods
(Page 3 of 4 )

There are two methods: the insertRow method and the deleteRow method. These are object type methods. The code segment for this is:

//The Array Object Type Methods

this.insertRow = insertRowFn;

this.deleteRow = deleteRowFn;

The insertRowFn function is assigned to the ‘this.insertRow’ expression, which is an object type method. The deleteRowFn function is assigned to the ‘this.deleteRow’ expression, which is an object type method.

Note that the () brackets of the functions are not used in the method declaration. However, you have to use these brackets when calling the method. The functions for these methods are defined inside this constructor function. They can be defined outside, but just to keep everything in the array object intact, I have defined them inside.

The Method Functions

The next and last segment has the functions for the methods. Here it is:

//The Array Object Type Functions

function insertRowFn(i)


for (k=(y+1);k>i;k--)


this[k] = this[k-1];



this[i] = {};




function deleteRowFn(i)


delete this[i];


for (k=i;k<y;k++)


this[k] = this[k+1];


delete this[y];



There are two functions here: the insertRowFn(i) and the deleteRowFn(i) function. These functions are the values of the above methods. The functions are nested in the CustomArray(y,x) constructor function.

Let us talk about the insertRowFn(i) function first. The aim of this function is to insert a blank row at the index, i in the array. The i can be any number from zero upwards. Assume that you have 6 rows; it means the indices for these rows go from zero to 5 (object property counting begins from zero). If i is 2, then a blank row will be inserted at index position 2; the index of the former row 2 and rows 3, 4, and 5 will be shifted upward. So the former row for index number 2 will now become the row for index number 3; the index for row number 3 will now become the index for row number 4, and so on.

Now, JavaScript objects have the quality that if you define a property by an index, the index can be any number. This means that if your array object has 6 rows, you can actually insert a row at index number 10. Under this condition, there will be no row for index numbers 6, 7, 8 and 9. In total, you will have seven rows. Let us allow things like this. That is how the inventors of JavaScript want us to work.

The first statement in the insertRowFn(i) function is a for-loop. This for-loop shifts all the rows downward. It uses i as the value and y as the number of rows to do this. The k is a local variable that is used only in the for-loop block. Note that when defining a property by index, you can use an index that is above the range of indices you have already used. Before the function ends, it establishes an empty row with the statement:

this[i] = {};

Whenever you insert a new row, the total number of rows increases. The last statement in the function gives the new height as follows:


It uses the shorthand operator, +=.

Let us now talk about the deleteRowFn(i) function. JavaScript has a delete operator. The syntax is

delete objectName[index]

So to delete a row, objectName will be the row name (this) and the index will be the row index, namely i. Remember that rows are properties. In JavaScript, when you delete a row (property), the row is not really deleted. Instead, JavaScript makes the value of the row (property) undefined; the indices of the rows are not changed.

This is a problem. We shall solve this problem by renumbering the rows above the one which was deleted by reducing the indices by 1.

The first statement in the function deletes the row. The statement that follows is a for-loop; it reduces the indices of the rows above the one deleted by 1. The next statement deletes the last row (since the indices have been reduced by 1). The last statement decreases the height of the array, since a row has been deleted.

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