JavaScript Matrix Creation
I was recently working on a coding challenge of sorts in which the goal was to create a specific-sized grid and build three useable functions off of the grid. There’s of course multiple ways to solve this problem as a whole, but I wanted to share my methodology and solution (even if it’s not the most efficient way).
Ultimately, what we need to create is an array of arrays, and then fill in each subarray with objects. Two arguments are provided when creating the grid:
1) rows — number of rows (each row is an array)
2) cols — number of columns (each column is composed of objects)
This is the data structure we should end up with:
So we will build this with a JavaScript class called Matrix and initiate the grid inside the constructor function. We will initiate a property called grid that is the container array for the entire grid.
Then we will create two for loops:
1) For loop to generate an empty array for each row
2) Nested for loop to fill in the rows elements with empty objects
So now if we executed the following lines of code, we will get the 4x4 grid shown above:
let newGrid = new Matrix(4,4);
console.log(newGrid)
The first function, getOne, we build will take in a row and column as arguments and return the value at that location. This is very straightforward: getOne(row, col) {
return this.grid[row][col]
}
The second function, update, should allow us to update a given row and column with new data. Right now our individual elements are empty objects. So all we need to do is access the row and column and set the val property equal to the data passed in:
update(row, col, data) {
this.grid[row][col].val = data;
}
The third and final function, selectOldest should give us the location of the oldest element (the row and column). In order to determine if one element is older than another, we must set a date property on the object when it is first created and timestamp it upon creation. So we first need to modify our constructor by including date as the key and new Date() as the value:
Now when our grid is created, all objects will have a date associated with it. So in our selectOldest() function, we need iterate through every element of the grid and compare the dates. So we can use nested for loops to access each element, then integrate an if condition to check if one object was created before the current oldest object. And then return the numbers for the actual row and column of the oldest:
We also must remember to update our update() function to update the date property once an update occurs.
update(row, col, data) {
this.grid[row][col].val = data;
this.grid[row][col].date = new Date()
}
To test our work, we can call the update function and selectOldest function to ensure it is working properly.
let newGrid = new Matrix(4,4);
newGrid.update(2, 2, 3);
console.log(newGrid.grid);
console.log(newGrid.selectOldest());
One thing to keep in mind when testing with the lines of code above is the code gets executed so quickly that the creation of the grid happens at essentially the same time as the update of the grid so the timestamps are going to be the same
We now have a working matrix data structure. There are of course edge cases to account for but the bulk of the structure is done.
That’s it!