Build Diamond Pattern and Hollow Diamond Pattern Using JavaScript

Dear all, this post was the answer for my friend question in facebook. I think diamond pattern is very common challenge for any programming language. But for javaScript, it was so difficult to find someone who answer this question.

Diamond Pattern

Oke, this is the code for diamond pattern

function diamond(size) {
  let col = size * 2 - 1;
  for (let i = 1; i <= size; i++) {
    let s = "";
    for (let j = 1; j <= col; j++) {
      if (j >= size + 1 - i && j <= size - 1 + i) {
        s += "$";
      } else {
        s += " ";
      }
    }
    console.log(s);
  }
  for (let i = size - 1; i >= 1; i--) {
    let s = "";
    for (let j = 1; j <= col; j++) {
      if (j >= size + 1 - i && j <= size - 1 + i) {
        s += "$";
      } else {
        s += " ";
      }
    }
    console.log(s);
  }
}
console.log((diamond(5));

The output for the program is

    $
   $$$
  $$$$$
 $$$$$$$
$$$$$$$$$
 $$$$$$$
  $$$$$
   $$$
    $

Hollow Diamond Pattern

If you wanna get more challenging, try to build the hollow diamond pattern, the concept is to just build the diamond too, but inside of the diamond is nothing.

Here is my solution

function diamond(row) {
  s = "";
// upper
  for (i = 1; i < row + 1; i++) {
    s += "\n";
    for (j = 1; j <= row - i + 1; j++) {
      s += "*";
    }
    for (j = 1; j <= 2 * i - 1; j++) {
      if (j == 1 || j == 2 * i - 1) {
        s += "$";
      } else {
        s += " ";
      }
    }
    for (j = 1; j <= row - i + 1; j++) {
      s += "*";
    }
  }
// bellow
  for (i = row - 1; i > 0; i--) {
    s += "\n";
    for (j = 1; j <= row - i + 1; j++) {
      s += "*";
    }
    for (j = 1; j <= 2 * i - 1; j++) {
      if (j == 1 || j == 2 * i - 1) {
        s += "$";
      } else {
        s += " ";
      }
    }
    for (j = 1; j <= row - i + 1; j++) {
      s += "*";
    }
  }
  return s;
}
console.log(diamond(5));

The Output will be like this

     $
    $ $
   $   $
  $     $
 $       $
  $     $
   $   $
    $ $
     $

One Hole Diamond Pattern

Last, but not least, i want to give a bonus, so this pattern is just like diamond pattern but, not much same as hollow pattern, this pattern only have one hole in the center of diamond. Like this.

    $
   $$$
  $$$$$
 $$$$$$$
$$$$ $$$$
 $$$$$$$
  $$$$$
   $$$
    $

This is more simple than the hollow pattern, we just need to edit the output from the middle row. Here is my solution

function diamond5(size) {
  let col = size * 2 - 1;
  for (let i = 1; i < size; i++) {
    let s = "";
    for (let j = 1; j <= col; j++) {
      if (j >= size + 1 - i && j <= size - 1 + i) {
        s += "$";
      } else {
        s += " ";
      }
    }
    console.log(s);
  }
  for (let i = size; i > size - 1; i--) {
    let s = "";
    for (let j = 1; j <= col; j++) {
      if (j >= size + 1 - i && j <= size - 1 + i) {
        if (j == size) {
          s += " ";
        } else if (j != size) {
          s += "$";
        }
      }
    }
    console.log(s);
  }
  for (let i = size - 1; i >= 1; i--) {
    let s = "";
    for (let j = 1; j <= col; j++) {
      if (j >= size + 1 - i && j <= size - 1 + i) {
        s += "$";
      } else {
        s += " ";
      }
    }
    console.log(s);
  }
}
diamond5(5);

Hope it can help you with your task, any question, i will very happy to help. As long is about javaScript and nodeJS. Thanks

Challenge

You can improve the diamond as you like this, it’s up to you.

   $ $
  $$ $$
 $$$ $$$
 $$$ $$$
  $$ $$
   $ $
// or
   $ $
  $$ $$
 $$$ $$$
$$$$ $$$$
 $$$$$$$
  $$$$$
   $$$
    $
//or
*****$*****
****$ $****
***$   $***
**$     $**
*$       $*
**$     $**
***$   $***
****$ $****
*****$*****

Happy Coding!!!