JavaScript Katas: Draw Chessboard
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-08-25 15:34:43

---
title: "JavaScript Katas: Draw Chessboard"
description: "We learn how to use ..., Array, map"
published: true
tags: ["JavaScript", "Beginners", "Webdev", "Codenewbie"]
series: JavaScript Katas with miku86
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0jfyzv0grswtx1mlo17m.jpg
---

## Intro 🌐

Problem solving is an important skill, for your career and your life in general.

That's why I take interesting katas of all levels, customize them and explain how to solve them.

---

## Understanding the Exercise❗

First, we need to understand the exercise!
If you don't understand it, you can't solve it!.

My personal method:

1. Input: What do I put in?
2. Output: What do I want to get out?

---

### Today's exercise

Today, another `7 kyu` kata,
meaning we slightly increase the difficulty.

Source: [Codewars](https://www.codewars.com/kata/56242b89689c35449b000059)

Write a function `drawChessboard`, that accepts two parameters: `rows` and `columns`.

Given a `rows` number, e.g. `3`, and a `columns` number, e.g. `3`,
return a chessboard as a two dimensional array, e.g.

```
[
  [ "O", "X", "O" ],
  [ "X", "O", "X" ],
  [ "O", "X", "O" ]
]
```

White should be represented by `"O"`, black by `"X"`, the first row starts with a `"O"`.

---

Input: two numbers.

Output: an array of array(s).

---

## Thinking about the Solution 💭

I think I understand the exercise (= what I put into the function and what I want to get out of it).

Now, I need the specific steps to get from input to output.

I try to do this in small baby steps:

1. Create a row with the correct length (= `columns`) that starts with `"O"`
1. Create a row with the correct length (= `columns`) that starts with `"X"`
1. Do this alternately until there are enough (= `rows`) rows
1. Return the array of array(s)

---

Example:

- Input: `3, 3`
- Create a row with the correct length (= `columns`) that starts with `"O"`: `[ "O", "X", "O" ]`
- Create a row with the correct length (= `columns`) that starts with `"X"`: `[ "X", "O", "X" ]`
- Do this alternately until there are enough (= `rows`) rows: 1 additional row `(=> 3 - 2 = 1)` : `[ "O", "X", "O" ]`
- Return the array of array(s): `[ [ "O", "X", "O" ], [ "X", "O", "X" ], [ "O", "X", "O" ]]`
- Output: `[ [ "O", "X", "O" ], [ "X", "O", "X" ], [ "O", "X", "O" ]]` ✅

---

## Implementation (Explicit) ⛑

```js
function drawChessboard(rows, columns) {
  // Create an empty board with the correct amount of rows
  const board = [...Array(rows)].map((_) => []);

  // Create a row with the correct length that starts with "O"
  const rowO = [...Array(columns)].map((_, i) => (i % 2 ? "X" : "O"));

  // Create a row with the correct length that starts with "X"
  const rowX = [...Array(columns)].map((_, i) => (i % 2 ? "O" : "X"));

  // Add the proper row to each board row
  return board.map((_, i) => (i % 2 ? rowX : rowO));
}
```

### Result

```js
console.log(drawChessboard(3, 3));
/*
[
  [ "O", "X", "O" ],
  [ "X", "O", "X" ],
  [ "O", "X", "O" ]
]
*/
// ✅

console.log(drawChessboard(2, 4));
/*
[
  [ "O", "X", "O", "X" ],
  [ "X", "O", "X", "O" ]
]
*/
//  ✅
```

---

## Implementation (Implicit) ⛑

```js
function drawChessboard(rows, columns) {
  return [...Array(rows)]
    .map((_) => [])
    .map((_, i) =>
      i % 2
        ? [...Array(columns)].map((_, i) => (i % 2 ? "O" : "X"))
        : [...Array(columns)].map((_, i) => (i % 2 ? "X" : "O"))
    );
}
```

### Result

```js
console.log(drawChessboard(3, 3));
/*
[
  [ "O", "X", "O" ],
  [ "X", "O", "X" ],
  [ "O", "X", "O" ]
]
*/
// ✅

console.log(drawChessboard(2, 4));
/*
[
  [ "O", "X", "O", "X" ],
  [ "X", "O", "X", "O" ]
]
*/
//  ✅
```

---

## Playground ⚽

You can play around with the code [here](https://repl.it/@miku86/js-katas-draw-chessboard)

---

## Next Part ➡️

Great work!

We learned how to use `...`, `Array`, `map`.

I hope you can use your new learnings to solve problems more easily!

Next time, we'll solve another interesting kata. Stay tuned!

---

If I should solve a specific kata, shoot me a message [here](https://forms.gle/RmQLq7CLDiD2Ptmw5).

If you want to read my latest stuff, [get in touch with me!](https://miku86.com/newsletter)

---

## Further Reading 📖

- [...](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array)
- [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

---

## Questions ❔

- How often do you do katas?
- Which implementation do you like more? Why?
- Any alternative solution?