Zero + Star Cross (X + Middle Column) in JavaScript

Beginner
⏱️ 7 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Multiple conditions
Zero and star pattern output (*000*000*, 0*00*00*0, 00*0*0*00, 000***000) in JavaScript programming

What You’ll Learn

How to print a grid pattern using 0 and * in JavaScript, where stars draw an X and a fixed middle column.

This is a great example of combining multiple conditions inside nested loops.

⭐ Pattern Output

For rows = 4 and cols = 9, the pattern looks like this:

Output
*000*000*
0*00*00*0
00*0*0*00
000***000
1

Complete JavaScript Program

If a cell is on either diagonal or on the middle column, we print *. Otherwise, we print 0.

JavaScript
const rows = 4;
const cols = 9;
const middle = (cols + 1) / 2; // 5 when cols = 9

for (let i = 1; i <= rows; i++) {
  let line = "";

  for (let j = 1; j <= cols; j++) {
    if (i === j || j === middle || i === cols + 1 - j) {
      line += "*";
    } else {
      line += "0";
    }
  }

  console.log(line);
}
Try it Yourself

🧠 How It Works

1

Set rows and columns

rows = 4 and cols = 9 define a 4×9 grid.

Setup
2

Find the middle column

middle = (cols + 1) / 2 gives 5 when cols is 9.

Center
3

Scan each cell (i, j)

The nested loop checks every position in the grid and decides what to print.

Nested loops
4

Star condition (3 rules)

Print * if i === j (main diagonal), or i === cols + 1 - j (other diagonal), or j === middle (middle column).

Conditionals
=

X + middle column

Combining the diagonals with the center column produces the final cross pattern.

2

Variation — Browser (document.write) Version

Same logic, but printed in the browser using document.write:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var i, j;
var rows = 4;
var cols = 9;
var middle = (cols + 1) / 2;

for (i = 1; i <= rows; i++) {
  for (j = 1; j <= cols; j++) {
    if (i == j || j == middle || i == cols + 1 - j)
      document.write("*");
    else
      document.write("0");
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Increase rows and cols to draw a bigger X
  • Keep cols odd so the middle column is a single clean line
  • Replace 0 with . or a space for a lighter background
  • Remove the middle-column condition to print only the X

Avoid

  • Using an even number of columns if you need a single center column
  • Hardcoding numbers without documenting what they represent (rows/cols/center)
  • Mixing 0-based and 1-based formulas without adjusting diagonal conditions

Key Takeaways

1

Nested loops scan a grid row by row and column by column.

2

Multiple conditions can be combined with || to create shapes.

3

For odd columns, (cols + 1) / 2 gives the center column.

4

Patterns like X, plus, and borders are just coordinate rules.

❓ Frequently Asked Questions

In a 1-based grid, the right-to-left diagonal positions satisfy i + j = cols + 1, which is equivalent to i === cols + 1 - j.
Yes—set rows equal to cols (and keep cols odd if you want the middle column).
Remove the diagonal checks and keep only j === middle as the star condition.
Yes—swap the printed strings inside the if and else blocks.

Explore More JavaScript Number Patterns!

Once you can think in grid coordinates, you can create borders, diagonals, and complex logos with simple rules.

All Number Patterns →
Did you know?

Many pattern problems become easy once you treat output as a grid of coordinates \((i, j)\) and write rules for which cells should be special.

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 44 JavaScript Number Pattern 46