## Intro to Grids

Imagine that you are playing a game of tic-tac-toe.

 X O O X X O X

Tic-tac-toe is simple to draw out on a sheet of paper, but how would you represent this game using code? While it is possible to represent this game using an array, it is simpler to use a data structure we call a grid. We may also call them 2D arrays, multidimensional arrays, tables, or matrices.

Grids are great for representing data that are laid out in two dimensions, like a tic-tac-toe game, or a game of chess.

#### Creating a new grid

Let's say that we want to make a new grid named "dogs" that has 2 rows and 3 columns. We can do this like so:

``````var dogs = new Grid(2, 3); //(rows, columns)
``````

#### Structure of a grid

Before we can start using our grid, we need to understand the structure of the grid. Using our above example of a grid with 2 rows and 3 columns, the indexes of each element are laid out like below.

Note: Remember that indexes start from 0, not 1.

 (0, 0) (0, 1) (0, 2) (1, 0) (1, 1) (1, 2)

#### Using Grids

##### Setting elements in a grid

Since we haven't set any elements in our grid, all the elements in our grid are set to "undefined".

There are three ways that we can set elements in our grid:

• ###### Setting them all to be the same

Say we wanted to set all the elements of our "dogs" grid to be equal to "Golden Retriever". We can do this by using the init() function.

``````  dogs.init("Golden Retriever");
``````

After we run the above code snippet, every cell of our grid will contain "Golden Retriever".

 Golden Retriever Golden Retriever Golden Retriever Golden Retriever Golden Retriever Golden Retriever
• ###### Setting elements one at a time

Now what if we want to set elements one at a time? In order to set an element in a grid, we want to use the set() function. The set() function uses three arguments, row, column, and the value that you want to set the element to. For instance, if you want to set the element at row 1, column 1 of our dogs array to "Labrador":

``````  dogs.set(1, 1, "Labrador");
``````

After running the above line of code, our grid of dogs will now look like:

 Golden Retriever Golden Retriever Golden Retriever Golden Retriever Labrador Golden Retriever
• ###### Setting elements using arrays

Lastly, we can set all the elements of our grid using arrays.

``````  dogs.initFromArray([
["Golden Retriever", "Labrador", "Poodle"],      // 0th row
["German Shepard", "Alaskan Husky", "Beagle"],   // 1st row
]);
``````

After we run this code, our grid of dogs should look like:

``````var myDog = dogs.get(1, 2); //Recall that rows and columns are counted starting from 0.