Hollow Square of 1s in JavaScript

What You’ll Learn

The hollow square of 1s prints a 5×5 border frame — 1 1 1 1 1 on top and bottom, 1 on the sides, spaces inside — a natural step after Program 41’s square pyramid. This tutorial covers nested loops, border conditions, a live preview, worked JavaScript examples, edge cases, and complexity.

📝 Problem & Approach

Given a grid size n (e.g. 5), print a hollow square border of 1s using nested loops and a border condition.

// n = 5 (conceptual shape)
// 1 1 1 1 1
// 1       1
// 1       1
// 1       1
// 1 1 1 1 1

Inputs & Outputs

Minimal workflow

for i from 1 to n:
    for j from 1 to n:
        if i is border or j is border:
            print 1
        else:
            print space
    print newline

Approach comparison

🔮 Live Preview

Choose a square size between 3 and 9 and draw the hollow border in the browser.

Press "Draw pattern".

Examples Gallery

Three complete JavaScript programs — fixed size, prompt() input, and asterisk border. Click View Output to reveal sample console results, or Try it Yourself to run the code live.

const n = 5;

for (let i = 1; i <= n; i++) {
  let line = "";
  for (let j = 1; j <= n; j++) {
    if (i === 1 || i === n || j === 1 || j === n) {
      line += "1 ";
    } else {
      line += "  ";
    }
  }
  console.log(line);
}

1 1 1 1 1
1       1
1       1
1       1
1 1 1 1 1

const nInput = prompt("Enter the size (n >= 2):");
const n = parseInt(nInput, 10);

if (!Number.isFinite(n) || n < 2) {
  console.log("Please enter an integer n >= 2.");
} else {
  for (let i = 1; i <= n; i++) {
    let line = "";
    for (let j = 1; j <= n; j++) {
      if (i === 1 || i === n || j === 1 || j === n) {
        line += "1 ";
      } else {
        line += "  ";
      }
    }
    console.log(line);
  }
}

Enter the size (n >= 2): 4
1 1 1 1
1     1
1     1
1 1 1 1

const n = 5;

for (let i = 1; i <= n; i++) {
  let line = "";
  for (let j = 1; j <= n; j++) {
    if (i === 1 || i === n || j === 1 || j === n) {
      line += "* ";
    } else {
      line += "  ";
    }
  }
  console.log(line);
}

* * * * *
*       *
*       *
*       *
* * * * *

🔎 Worked Walkthrough — n = 5, row i = 3

Trace row 3 cell by cell — which cells print 1 and which print spaces.

Border cells per row = 4n - 4 for n ≥ 2 — total grid visits = n².

🎯 Practice Problems

Try these variations to lock in the pattern.

Notes

⏱️ Time and Space Complexity

💡 Best Practices