How to build a Grid system in JavaScript

While making my connect four in JavaScript I thought it would be great to build a reusable and scalable grid system.

That's what I'm sharing with you today.

So first, let's go through the basics, exactly how can we define a grid system?

We could say that a grid is made of cells that are organized into rows.

Grid

So let's start from here and make a Grid class that will hold our rows:

grid.js

class Grid {

  constructor() {
    this._rows = {}
  }

  /**
   * @readonly
   * @type {object}
   */
  get rows() {
    return this._rows
  }

}

Here, my rows variable type is an object but you could also use an array.

Row

Now that we have our grid class ready, let's create a Row class:

row.js

class Row {

  /**
   * @param {number} x
   */
  constructor(x) {
    this._x = x
    this._cells = {}
  }

  /**
   * @readonly
   * @type {object}
   */
  get cells() {
    return this._cells
  }

  /**
   * @readonly
   * @type {number}
   */
  get x() {
    return this._x
  }

}

As you can see Row is in fact an abstraction of x in our grid. Just like the Grid class holds rows our Row class holds cells.

From here the next step would be to add cells to the grid, so let's create a method inside our Grid class that'll do just that.

Adding cells to our grid

grid.js

/**
 * @param {number} x
 * @param {number} y
 * @returns {Cell}
 */
addCell(x, y) {
  const cell = new Cell(x, y)
  if(!this.rows[cell.x]) {
    this.rows[cell.x] = new Row(cell.x)
  }
  cell._row = this.rows[cell.x]
  this.rows[cell.x].cells[cell.y] = cell
}

Now we can do something like:
demo.js

const grid = new Grid()
grid.addCell(0, 0)

Now that we're good with the row part let's dive into the cell part.

Cell

cell.js

class Cell {

  /**
   * @param {number} x
   * @param {number} y
   */
  constructor(x, y) {
    this._x = x
    this._y = y
  }

  /**
   * @readonly
   * @type {number}
   */
  get x() {
    return this._x
  }

  /**
   * @readonly
   * @type {number}
   */
  get y() {
    return this._y
  }

}

demo.js

const grid = new Grid()
grid.addCell(0, 0)

Let's build a 4x4 grid then.

4x4 grid

demo.js

const size = 4
const grid = new Grid()
for(let x = 0; x < size; x++) {
  for(let y = 0; y < size; y++) {
    grid.addCell(x, y)
  }
}

There are lots more that we could do but let's save it for later...

Also, check out the library I made out of this grid system: https://github.com/thoughtsunificator/grid.