Grid customization. Eloquent js chapter 7

Question

( http://eloquentjavascript.net/07_elife.html )

It’s hard for me to understand which Grid methods we added .get and .set even do.Firstly, let's look at an example case. var grid = new Grid(5,5) ; now space is an array of 25 elements. And of course, width and height are 5.

Now the question is what is the get method.

Now we said console.log(grid.get(new Vector(1, 1)));.

So x becomes 1 , y becomes 1 in the new object that we created. Of course, we need to do grid.get, so we return this.space[1+ 1 * 5] ie 6th place in the spatial array, whose length is 25 . So why printing is undefined? Is it because there is nothing in the space array?

TL; DR

How do .get and .set prototypes work (what do they do)? Also why do we set return this.space[vector.x + this.width*vector.y]; , is there some kind of numerical value for vector.x+this.width*vector.y ?

  function Vector(x,y){ this.x = x; this.y = y; } Vector.prototype.plus = function(other){ return new Vector(this.x + other.x, this.y + other.y); } var grid = ["top left", "top middle", "top right", "bottom left", "bottom middle", "bottom right"]; function Grid (width,height){ this.space = new Array(width * height); this.width = width; this.height = height; } Grid.prototype.isInside = function(vector){ return vector.x >=0 && vector.x<this.width && vector.y>=0 && vector.y<this.height; } Grid.prototype.get = function(vector){ return this.space[vector.x + this.width*vector.y]; // 5 + 5 * 1; } Grid.prototype.set = function(vector,value){ this.space[vector.x + this.width *vector.y] = value; } var grid = new Grid(5, 5); console.log(grid.get(new Vector(1, 1))); // → undefined grid.set(new Vector(1, 1), "X"); console.log(grid.get(new Vector(1, 1))); // → X 

Answer 1

I do not know if I can be more clear than the article you are already reading, but I will try.

This: new Array(25) equivalent to this: [undefined, undefined, undefined, ...25x]

In your code, you have the following:

var grid = ["top left", "top middle", "top right", "bottom left", "bottom middle", "bottom right"];

then declaring the same var again:

var grid = new Grid(5, 5);

So, in the end, grid is [undefined, undefined, undefined, ...] . This is why you get undefined before setting anything up.

---

get and set , just find the position of the element in the array and read or write the value at the specified position. This is the code that finds the position in the array: vector.x+this.width*vector.y . Let me break it:

vector.x = table column

vector.y = table row

Imagine a table 3x2 = ['row0 col0', 'row0 col1', 'row0 col2', 'row1 col0', 'row1 col1', 'row1 col2']

now we need an element in the column col 2, row 1, so new Vector(2, 1) . This element is at position 5 in our array. So, starting from row 1 (this.width * vector.y) = (3 * 1), get the element in column 2 (+ vector.x) = (+ 2)

this.width is the size of each line, so when multiplied by vector.y this means that vector.y is equivalent to a certain number of lines. Then from there you just summarize the position of the column (vector.x).

---

Presentation of tabular data

A table has several rows, and each row has several columns, so you can represent the table using an array for each row, for example:

 row1 = ['item1', 'item2']; row2 = ['item3', 'item4']; table = [row1, row2]; 

This will give you a multidimensional array: [ ['item1', 'item2'], ['item3', 'item4'] ]

The value for accessing data of the type: table[ rowIndex ][ columnIndex ]

But the method you use saves all the items in one list, one array: table = ['item1', 'item2', 'item3', 'item4']

Now let's say that we want to find the same element as in the previous example using rowIndex and columnIndex , except that this time there is only one list of elements, so we need to combine rowIndex and columnIndex into one number to get the element using: table[ indexOfItemIWant ] . How do we do this? You know that all lines are listed one after another, and all lines have the same number of elements on it. So, to find the beginning of a line in our list, we multiply the size of the lines by the number of lines that we want to skip. In the table, where each row has two elements, as in our example, the first row starts at position 0 and occupies two positions, so the next row starts at position 0 + 2, then the next one, at position 0 +2 + 2, then 0 + 2 +2 +2, etc., Why do you use width (the number of elements per line) times the line I want to get (vector.y).

Answer 2

A space is an array, and vector used to convert from 2 dimensions (x, y) to the index i in space , so .set will set the value of x to this index i and .get is used to get / read any value specified by the parameter. set.

And for a location inside space, let's say space[j] is undefined if there was no set before.

Answer 3

Just adding to a very good explanation Hugo Silva above. I tried to understand the same code in Chapter 7. The general arithmetic for converting a two-dimensional array to 1D is

2d [i] [j] = 1d [j + i * Total_number_of_columns_in_the_matrix]

In other words..

2d [height] [width] = 1d [width + height * Total__columns_in_the_Matrix]

With 'i representing the row number (i.e. the height or distance from the top of the matrix), and' j the column number (i.e. the width or distance to the left of the matrix). And this, I start the numbering from i, j = (0,0), representing the position in row 0 and column 0, for row-major ordering (i.e. consecutive elements of array rows are adjacent in memory, and all rows are listed one after to others).

So, [0] [1] is the second element in the top line, [1] [n] in the second line, etc.

The elements of the array here in one line are represented by groups of 3 ("upper left", "upper middle", "upper right"). So, I need to find the index or quantity where the group I want starts. Here is what this part of the formula does * Total_number_of_columns_in_the_matrix . As soon as I find where the group I want starts, I add j to get the count of the cell I want.

When calculating the index for the first row (which represents i = 0), I have no previous elements of the added elements. So the Array indices for the first row will be only 0,1,2.

Then, when I get to the second row (i = 1), now since I already have 3 entries from the first row, so I need to start with the indices 1 * 3 + 0,1,2 and so on.

A quick blog post I wrote about this just to document my understanding.