Diamond Shape in JavaScript: A Coding Challenge

In this blog post, we’ll explore how to create a diamond shape using the # character in JavaScript. This coding challenge will help you practice working with loops, conditionals, and string manipulation, as well as deepen your understanding of pattern generation.

Problem Statement

Write a function that accepts a positive integer N and prints a diamond shape with 2 * N - 1 levels using the # character. The widest part of the diamond should be in the middle, with N # characters, and the shape should be symmetric above and below this middle line. Here are some examples:

diamond(2);
// Output:
// ' # '
// '###'
// ' # '

diamond(3);
// Output:
// '  #  '
// ' ### '
// '#####'
// ' ### '
// '  #  '

diamond(4);
// Output:
// '   #   '
// '  ###  '
// ' ##### '
// '#######'
// ' ##### '
// '  ### '
// '   #   '

Understanding the Pattern

A diamond shape can be seen as two pyramids stacked on top of each other. The first half resembles an upward pyramid, and the second half is an inverted pyramid.

1. Top Half (including the middle line):

• The number of # characters increases from 1 to 2 * N - 1, following the pattern 1, 3, 5, ..., (2 * N - 1).
• The number of spaces before the # characters decreases as the lines go down.

1. Bottom Half:

• Mirrors the top half, but the number of # characters decreases from 2 * (N - 1) - 1 to 1.

Solution Approach

The function will consist of two parts: one for the top half (including the middle line) and one for the bottom half. Each part will use loops to generate the correct number of spaces and # characters for each line.

Here’s the JavaScript code to achieve this:

function diamond(n) {
  const totalWidth = 2 * n - 1;

  // Top half (including the middle)
  for (let i = 1; i <= n; i++) {
    const numHashes = 2 * i - 1;
    const numSpaces = (totalWidth - numHashes) / 2;
    const line = ' '.repeat(numSpaces) + '#'.repeat(numHashes) + ' '.repeat(numSpaces);
    console.log(line);
  }

  // Bottom half
  for (let i = n - 1; i >= 1; i--) {
    const numHashes = 2 * i - 1;
    const numSpaces = (totalWidth - numHashes) / 2;
    const line = ' '.repeat(numSpaces) + '#'.repeat(numHashes) + ' '.repeat(numSpaces);
    console.log(line);
  }
}

// Test cases
diamond(2);
//  ' # '
//  '###'
//  ' # '

diamond(3);
//  '  #  '
//  ' ### '
//  '#####'
//  ' ### '
//  '  #  '

diamond(4);
//  '   #   '
//  '  ###  '
//  ' ##### '
//  '#######'
//  ' ##### '
//  '  ### '
//  '   #   '

Explanation of the Code

1. Calculating totalWidth: This determines the width of each line, which is equal to 2 * n - 1 to account for the widest middle line.
2. Top Half Loop:

• We iterate from 1 to N, with each iteration constructing one line.
• The number of # characters (numHashes) follows the sequence 1, 3, 5, ..., (2 * N - 1).
• The number of spaces on each side (numSpaces) ensures the line is centered.

1. Bottom Half Loop:

• We iterate from N - 1 down to 1, constructing each line similarly to the top half but with decreasing numbers of #.
• This ensures that the bottom half mirrors the top half.

1. Constructing Each Line:

• The line is built using ' '.repeat(numSpaces) to add spaces on the left, '#'.repeat(numHashes) to add the # characters, and another ' '.repeat(numSpaces) to add spaces on the right.

Exploring Variations

1. Hollow Diamond: Create a diamond shape where only the borders are made of # characters, with spaces inside.
2. Double Diamond: Combine two diamonds side by side, sharing the middle line.
3. Diamond with Different Characters: Allow the user to specify a character other than # to use for the pattern.

Key Takeaways

1. Pattern Recognition: Identifying patterns in numbers and characters is essential for solving these types of problems.
2. Loops and Conditionals: Understanding how to use loops to control flow and generate desired patterns.
3. Code Reusability: The solution demonstrates how similar logic can be applied to different parts of a problem, such as the top and bottom halves of the diamond.

Conclusion

Creating a diamond shape in JavaScript is a fun exercise that tests your understanding of loops, string manipulation, and pattern generation. By mastering this problem, you’ll be better equipped to tackle more complex coding challenges. Try out different variations and share your results!