Setting up a grid. Eloquent js chapter 7

Question

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

Im having a hard time understand what the Grid methods we added .get and .set even do.Firstly, lets go through 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 method of "get" doing.

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

So x becomes 1, y becomes 1 in the new object we created. Of course we need to do grid.get thus we return this.space[1+ 1 * 5] i.e the 6th spot in the space array which is 25 elements long. So why does this print undefined? Is it because there isn't anything in the space array?

TLDR

How do the .get and .setprototypes work here ( what do they do)? Also why do we set return this.space[vector.x + this.width*vector.y];, is there some numerical significance to 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 don't know if I can be clearer than the article you are already following, but I will give it a try.

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

In your code, you have this:

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, ultimately, grid is equal to [undefined, undefined, undefined, ...]. That's why you get undefined before setting anything.

---

get and set, simply find the position of an item in the array, and read, or write the value in said position. This is the code that finds the position in the array: vector.x+this.width*vector.y. Let's break it down:

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 want item at col 2, row 1, so new Vector(2, 1). That's item at position 5 in our array. So, starting at row 1 ( this.width*vector.y ) = (3*1), get item at column 2 ( + vector.x) = ( + 2 )

this.width is the size of each row, so when you multiply by vector.y, it means vector.y is equivalent to a certain number of rows. Then from there, you just sum the column position (vector.x).

---

Representing tabular data

A table has several rows, and each row has several columns, so you could represent a table using an array for each row, like:

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

table = [row1, row2];

That would give you a multidimensional array: [ ['item1', 'item2'], ['item3', 'item4'] ]

Meaning you would access the data like: table[ rowIndex ][ columnIndex ]

But the method you are using, stores all the items in a single list, a single array: table = ['item1', 'item2', 'item3', 'item4']

Now let's say we want to find the same item as in the previous example, using rowIndex and columnIndex, except this time there is only one single list of items, so we need to combine rowIndex and columnIndex into a single number, to get the item using: table[ indexOfItemIWant ]. How do we do that? You know that all rows are listed one after the other, and all rows have the same number of items on it. So to find the beginning of a row in our list, we multiply the size of the rows, by the amount of rows we want to skip. In a table where each row has two items, like 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, at position 0 +2 +2, then 0 +2 +2 +2 and so on, that's why you use width (number of items in a row) times the row I want to get (vector.y).

Answer 2

A space is an array, and a vector is used for transform from 2 dimension (x, y) to an index i into space, so that .set will set a value x to that index i, and .get is used to get/read whatever value been set by .set.

And for a location inside space, say space[j] is undefined if is is not been set before.