Properties and Methods of Custom 2D JavaScript Arrays

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] = {};

this.height+=1;

}

function deleteRowFn(i)

{

delete this[i];

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

{

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

}

delete this[y];

this.height-=1;

}

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:

this.height+=1;

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.