Number and Asterisk Diamond Pattern in JavaScript

Beginner
⏱️ 7 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Odd-length rows + mirror
Number and asterisk diamond pattern output (1, 2*2, 3*3*3 ... back to 1) in JavaScript programming

What You’ll Learn

How to print a pattern that grows from 1 to 5 and then shrinks back down, with * between repeated numbers: 3*3*3, 4*4*4*4, etc.

You’ll learn how to use two outer loops (up and down) to create a diamond-like structure.

⭐ Pattern Output

For this example, the pattern looks like this:

Output
1
2*2
3*3*3
4*4*4*4
5*5*5*5*5
4*4*4*4
3*3*3
2*2
1
1

Complete JavaScript Program

Each row prints 2*i - 1 characters. Odd positions print the number i; even positions print *. We print rows 1..5, then 4..1 to mirror the shape.

JavaScript
const max = 5;

function printRow(i) {
  let line = "";
  for (let j = 1; j < i * 2; j++) {
    line += (j % 2 === 0) ? "*" : String(i);
  }
  console.log(line);
}

for (let i = 1; i <= max; i++) {
  printRow(i);
}
for (let i = max - 1; i >= 1; i--) {
  printRow(i);
}
Try it Yourself

🧠 How It Works

1

Set the maximum row value

const max = 5; controls the widest row: 5*5*5*5*5.

Setup
2

Row length is 2*i - 1

The loop for (j = 1; j < i*2; j++) runs exactly 2*i - 1 times.

Length
3

Alternate number and *

Odd positions print i, even positions print * using j % 2.

Alternation
4

Mirror the bottom half

After printing rows 1..5, printing 4..1 creates the symmetric lower half.

Mirror
=

Diamond-style pattern

The pattern grows and then shrinks, keeping the same row-generation rule.

2

Variation — Browser (document.write) Version

Print the pattern directly into an HTML page using document.write:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var i, j;
for (i = 1; i <= 5; i++) {
  for (j = 1; j < i * 2; j++) {
    if (j % 2 == 0)
      document.write("*");
    else
      document.write(i);
  }
  document.write("<br>");
}
for (i = 4; i >= 1; i--) {
  for (j = 1; j < i * 2; j++) {
    if (j % 2 == 0)
      document.write("*");
    else
      document.write(i);
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Change max to make the diamond taller
  • Replace * with another separator like - or @
  • Print spaces around the separator for readability (e.g., " * ")
  • Center-align the diamond by printing leading spaces before each row

Avoid

  • Printing the bottom half starting from max again (duplicates the middle row)
  • Using j <= i*2 (adds an extra character)
  • Forgetting to add a line break after each row

Key Takeaways

1

Each row prints 2*i - 1 characters.

2

Odd positions print the number; even positions print *.

3

Two outer loops (up and down) create the diamond shape.

4

Mirroring avoids re-writing a different row-generation rule for the bottom.

❓ Frequently Asked Questions

Because the row length is 2*4 - 1 = 7 positions, and the code alternates: 4, *, 4, *, 4, *, 4.
Remove the second loop that counts down from max - 1 to 1.
Yes. In console mode we build each row in line and print it once using console.log.
Yes, but multi-digit numbers will change alignment. Add spacing or fixed-width padding for each number if alignment matters.

Explore More JavaScript Number Patterns!

Try combining repetition, separators, and mirroring to create more complex patterns.

All Number Patterns →
Did you know?

Many diamond patterns can be generated by printing an increasing sequence and then printing the same sequence in reverse—often with max - 1 to avoid duplicating the middle row.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 30 JavaScript Number Pattern 32