Shape Rule
Sequence + fill
Row 1 prints 5 5 5 5 5, row 2 prints 4 5 5 5 5, row 3 prints 3 4 5 5 5, and so on.
Number Pattern Fill with 5 Triangle Pattern in JavaScript
Overview
What You’ll Learn
The fill-with-5 number triangle pads each row with the maximum value so every line has width n — a natural step after alternating odd/even patterns. This tutorial covers the shape rule, two inner loops, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.
Outer Loop
n..1
for (let i = n; i >= 1; i--) walks rows from the top (all fill) down to the full sequence.
Two Inner Loops
i..n then pad
for (let j = i; j <= n; j++) appends the sequence; for (let j = 1; j < i; j++) fills with n.
line += vs console.log()
Same line / next line
Numbers use line += j + " "; or line += n + " ";; end each row with console.log(line).
Live Preview
1–15 width
Pick a triangle width and draw the fill-with-n pattern instantly in the browser.
O(n²)
Complexity
Each of n rows prints n numbers — total appends = n²; extra memory stays O(1).
Introduction
A fill-with-5 number triangle prints an ascending sequence on each row, then pads the rest with the maximum value so every row has the same width. With n = 5, the output is 5 5 5 5 5, 4 5 5 5 5, 3 4 5 5 5, 2 3 4 5 5, 1 2 3 4 5.
In JavaScript you use a descending outer loop, append j from i to n in the first inner loop, fill remaining slots with n in the second inner loop, then console.log(line) ends each row.
Why it matters?
It combines two inner loops with fixed row width — a step up from Program 18.
Key Highlights
Sequence Loop
for (let j = i; j <= n; j++) prints ascending numbers.
Fill Loop
for (let j = 1; j < i; j++) pads with n.
Print Then Break
line += j + " "; or line += n + " "; in inner loops; console.log(line) after.
Series Foundation
Follow Program 18; continue to Program 20 (continuous number triangle).
In short: for each i from n down to 1, append j from i to n, fill i - 1 times with n, then call console.log(line).
Foundation
📝 Problem & Approach
Given a positive integer n, print a fill-with-n triangle: each row prints an ascending sequence from i to n, then pads with n so every row has width n.
JavaScript
# n = 5 (conceptual shape)
# 5 5 5 5 5
# 4 5 5 5 5
# 3 4 5 5 5
# 2 3 4 5 5
# 1 2 3 4 5
for (let i = n; i >= 1; i--)
for (let j = i; j <= n; j++)
line += j + " " # sequence i..n
for (let j = 1; j < i; j++)
line += n + " " # pad with n
console.log(line)Inputs & Outputs
| Item | Type | Description |
|---|---|---|
n | int | Triangle width and fill value (typically ≥ 1). |
| Printed output | text | Each row has n spaced numbers — sequence then padding. |
Minimal workflow
Pseudocode
for i from n down to 1:
for j from i to n:
append j + space to line
for j from 1 to i - 1:
append n + space to line
console.log(line)Approach comparison
| Approach | Idea | Best for |
|---|---|---|
| Two inner loops | 5 5 5 5 5, 4 5 5 5 5, … | Learning and interviews |
Variable n | parseInt(prompt(), 10) | User-input version |
| Custom fill | Separate fill constant | Pad with a value other than n |
Cheat Sheet
⚡ Quick Reference
| Goal | Pattern |
|---|---|
| Walk each row | for (let i = n; i >= 1; i--) |
| Print sequence | for (let j = i; j <= n; j++) { line += j + " "; } |
| Fill padding | for (let j = 1; j < i; j++) { line += n + " "; } |
| End the row | console.log(line) |
| User input | parseInt(prompt(), 10) |
| Custom fill value | line += fill + " "; in second loop |
Compare
📋 Sequence Loop vs Fill Loop vs Custom Fill
Same fill-with-n triangle — different ways to structure the padding.
Sequence
j = i..nFirst inner loop prints ascending numbers
Fill
pad nSecond loop runs i - 1 times with n
Variable n
inputReplace hard-coded 5 with user input in Example 2
Learning tip
width nEvery row must print exactly n numbers
Context
When This Pattern Shows Up
Reach for this pattern when teaching two inner loops and fixed-width row padding.
First lab exercise
Natural follow-up after Program 18 — combines sequence printing with right padding.
Nested-loop warm-up
Outer/inner bound practice with an immediate visual check.
Console I/O practice
Combine loops with
prompt()for a flexible row count.Gateway to variants
Compare Program 18 (alternating odd/even) and Program 20 (continuous counter triangle) next.
Not a UI layout tool
This is a console teaching pattern — not how you build modern app screens.
Key benefit: one small program that locks in nested loops, output sequencing, and O(n²) thinking.
Interactive
🔮 Live Preview
Choose a triangle width between 1 and 15 and draw the fill-with-n pattern in the browser.
Hands-On
Examples Gallery
Three complete JavaScript programs — fixed width, user input, and custom fill constant. Click View Output to reveal sample results, or Try it Yourself to run the code live.
📚 Getting Started
Print five rows of the fill-with-5 triangle with two inner loops.
Example 1 — Fixed n = 5
Hard-coded width — ideal for first demos and screenshots.
JavaScript
const n = 5;
for (let i = n; i >= 1; i--) {
let line = "";
for (let j = i; j <= n; j++) {
line += j + " ";
}
for (let j = 1; j < i; j++) {
line += n + " ";
}
console.log(line);
}How It Works
When i = 5, the sequence loop prints 5 once, then the fill loop runs 4 times — all 5s. When i = 3, the sequence prints 3 4 5, then two 5s pad the row. When i = 1, the sequence prints 1 2 3 4 5 with no fill needed. console.log(line) after both inner loops starts the next row.
📈 User Input
Read the triangle width with prompt() instead of hard-coding 5.
Example 2 — User Input
Read n with prompt() and parseInt() (check Number.isFinite in real apps); the fill value matches the width.
JavaScript
const nInput = prompt("Enter the triangle width:");
const n = parseInt(nInput, 10);
for (let i = n; i >= 1; i--) {
let line = "";
for (let j = i; j <= n; j++) {
line += j + " ";
}
for (let j = 1; j < i; j++) {
line += n + " ";
}
console.log(line);
}How It Works
Same nested-loop core as Example 1; only the source of n changes. Both the sequence end bound and the fill value use the same variable. Non-numeric input yields NaN with bare parseInt(prompt()) — validate with Number.isFinite for safer labs.
⚡ Custom Fill
Use a separate fill constant instead of always padding with n.
Example 3 — Custom Fill Constant
Pad with fill = 9 while the sequence still runs up to n = 5.
JavaScript
const n = 5;
const fill = 9;
for (let i = n; i >= 1; i--) {
let line = "";
for (let j = i; j <= n; j++) {
line += j + " ";
}
for (let j = 1; j < i; j++) {
line += fill + " ";
}
console.log(line);
}How It Works
Replace n with fill in the second inner loop only. The sequence loop still prints j from i to n; padding uses the custom constant.
🧠 How the Algorithm Prints Rows
1
Set up
print is built in; use prompt() when reading input. Set n (fixed or from input).
Setup
2
Outer loop (descending)
for (let i = n; i >= 1; i--) walks from the all-fill top row down to the full sequence.
Row
3
Sequence + fill loops
Print j from i to n, then pad i - 1 times with n (or a custom fill value).
Sequence
4
New line
console.log(line) ends the row so the next outer iteration starts fresh.
Break
=
Fill triangle complete
Total appends: n² — O(n²) time, O(1) extra memory.
Trace
🔎 Worked Walkthrough — n = 5
Trace each outer-loop value of i, the sequence printed, the fill count, and the final row.
i | Sequence (j = i..n) | Fill count (i - 1) | Row output |
|---|---|---|---|
5 | 5 | 4 | 5 5 5 5 5 |
4 | 4, 5 | 3 | 4 5 5 5 5 |
3 | 3, 4, 5 | 2 | 3 4 5 5 5 |
2 | 2, 3, 4, 5 | 1 | 2 3 4 5 5 |
1 | 1, 2, 3, 4, 5 | 0 | 1 2 3 4 5 |
Total number prints: 5 + 5 + 5 + 5 + 5 = 25 = 5².
Use Cases
Where this tiny pattern (and its loop structure) shows up beyond the homework prompt.
1. Teaching Nested Loops
Clearest visual proof that outer and inner bounds interact.
Example: change for (let j = 1; j <= i; j++) and watch the shape change.
2. Pattern Series Base
Foundation for inverted, pyramid, diamond, and hollow variants.
Example: use (i + j) % 2 for row+column parity grids.
3. Console Formatting Drills
Practice line += j + " " vs row newline without complex math.
Example: put console.log(line) inside the inner loop by mistake.
4. Character Substitution
Swap digits for letters, stars, or spaced output once the loop works.
Example: use line += j + " "; for spaced numbers on each row.
5. Complexity Intuition
Triangular totals make O(n²) concrete for beginners.
Example: count printed digits for n = 10 still → 55.
6. Input Validation Labs
Pair the pattern with Number.isFinite around parseInt(prompt(), 10) and positive-width checks.
Example: reject n <= 0 and re-prompt.
Pro Tip: when an interviewer asks for patterns, explain the outer/inner roles first — then write the loops. The story matters as much as the code.
Advantages
Why this pattern earns a permanent spot in beginner JavaScript courses.
1. Instant Visual Feedback
Wrong bounds show up immediately as a broken staircase.
2. Minimal Concepts
Only loops and console output — no arrays or math libraries.
3. Easy to Extend
Invert, center, hollow, or change the fill character with small edits.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters.
Pro Tip: learn the sequence loop first, then add the fill loop — compare with custom fill in Example 3.
Usage Tips
Small habits that keep number-pattern code clean.
1. Name Bounds Clearly
Use
nfor both width and fill value unless you need a custom constant.2. Validate with
Number.isFiniteCheck
Number.isFinite(n)afterparseInt(prompt(), 10)so bad input does not leavenunset.3. Keep console.log Outside
Only call
console.log(line)after the inner loop finishes the row.4. Trace k on Paper
Write row
i, sequencej = i..n, and fill counti - 1before coding.5. Dry-Run One Small n
Trace
n = 5on paper before coding larger demos.
Pro Tip: if the output is a vertical list of single digits per line, you almost certainly put console.log(line) inside the inner loop.
Common Pitfalls
Mistakes that commonly break fill-with-n number patterns.
1. Newline Inside the Inner Loop
Each digit lands on its own line — you get a column, not a triangle.
→ Use
line += j + " ";orline += n + " ";;console.log(line)only after both inner loops.2. Skipping the Fill Loop
Rows have different widths — the top row may be short while the bottom is full.
→ Add
for (let j = 1; j < i; j++)to pad withnafter the sequence loop.3. Wrong Fill Loop Bound
for (let j = 1; j <= i; j++)in the fill loop prints too many padding values.→ Use
for (let j = 1; j < i; j++)so the fill runs exactlyi - 1times.4. Forgetting the Row Break
Omitting
console.log(line)glues every number onto one endless line.→ Always end the row after both inner loops.
4. Bare parseInt(prompt())
Letters or empty input return
NaNwith bareparseInt(prompt(), 10).→ Check
Number.isFinite(n)and re-prompt on failure.
Edge Cases
Check these inputs before calling the solution done.
n = 1
Single digit
Output is just 1 on one line — no fill needed.
n = 0
Empty pattern
Outer loop never runs — print nothing or show a message.
Negative
n < 0
Treat as invalid; re-prompt instead of silent empty output.
Large n
Large width
Output grows as n² characters — fine for labs, noisy for huge n.
Bad input
Non-numeric input
parseInt(prompt(), 10) returns NaN on bad input — validate with Number.isFinite first.
wrong range
Wrong sequence bound
Sequence must run for (let j = i; j <= n; j++), not for (let j = 1; j <= i; j++).
No fill
Forgot second loop
Without the fill loop, top rows are shorter than the bottom row.
Drill
🎯 Practice Problems
Try these variations to lock in the pattern.
1. Alternating odd/even triangle
- Row parity with
i % 2andk += 2 - Review Program 18
2. Continuous counter triangle
- Single counter across all rows
- Continue with Program 20
3. Custom fill value
- Pad with a constant other than
n - Compare output with Example 3
4. No trailing space
- Print space only between numbers, not after the last
- Harder follow-up after this page
Important
Notes
- Square total. Total appends =
n²— each ofnrows printsnnumbers. line += j + " ";stays on the line;console.log(line)advances — mix them carefully.- Validate
n > 0for interactive programs;n = 1should print a single1. - This page is left-aligned. Centered pyramids need leading spaces — covered later in the series.
Quick Takeaway: descending outer loop, print sequence j = i..n, fill i - 1 times with n, then break the line.
Analysis
⏱️ Time and Space Complexity
| Program | Time | Extra space |
|---|---|---|
| Nested loops (Examples 1–2) | O(n²) | O(1) |
| Custom fill (Example 3) | O(n²) | O(1) |
🎉 Conclusion
The fill-with-5 number triangle is a compact lesson in two inner loops: the first prints an ascending sequence, the second pads with the maximum value so every row has width n. Master the fixed-n version, then try user input and a custom fill constant.
Practice the three examples above, then continue to Program 20 for the continuous number triangle.
Run the sequence loop first, then the fill loop — use j < i for padding and validate n when reading input.
Pro Tips
💡 Best Practices
✅ Do
- Explain sequence loop vs fill loop before coding
- Use
line += j + " ";andline += n + " "; - Validate
n ≥ 1for interactive programs - Check
Number.isFinite(n)afterparseInt(prompt(), 10)before usingn - State O(n²) time when asked about complexity
❌ Don’t
- Call
console.log(line)inside the inner digit loop - Skip the second inner loop
- Use
for (let j = 1; j <= i; j++)in the fill loop - Skip the newline after each row
- Ignore bad console input in user-facing demos
- Skip the
n = 1edge case
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about this fill pattern
Print the pattern the beginner-friendly way.
5
Core concepts 01
Rule
Sequence then fill
Definition 02
Outer loop
i = n..1
03
Sequence
j = i..n
04
Fill
Pad i - 1 times
05
Complexity
O(n²) time
Analysis❓ Frequently Asked Questions
When i = 5, the sequence loop appends j = 5 once, then the fill loop runs 4 times — all values are 5, so the row is 5 5 5 5 5.
The first inner loop appends the increasing sequence i..n. The second fills remaining positions with n so every row has the same width.
When i = 1, the sequence loop appends j = 1 to 5 and the fill loop runs zero times — no padding needed.
line += j + " " stays on the same row with a trailing space. console.log(line) prints the completed row and adds a newline. Numbers use += inside the inner loops; the row break uses console.log after both inner loops.
Replace the hard-coded 5 with a variable n (see Example 2) or any constant you prefer for padding (see Example 3).
Rows will have different widths — the top row may be short while the bottom row is full length.
Yes, but print rows in reverse order or adjust i from 1 to n and change which row prints first.
O(n²) for width n because each of n rows appends n numbers.
Use parseInt with Number.isFinite and an n > 0 check after prompt(), or validate the raw string before converting so bad input does not produce NaN.
The outer loop never runs, so nothing is printed. Validate and prompt again if you want a clear user message.
Did you Know? 🔊
Each row prints an ascending sequence i..n, then pads with n so every row has width n. The second inner loop runs i - 1 times — still O(n²) total appends.
Continue to Program 20
Move on to the continuous number triangle in the JavaScript number-pattern series.
About the author
12 people found this page helpful