Shape Rule
Spaces + digits
Each row prints leading spaces while j > i, then digits i..1 in descending order.
Right-Aligned Descending Number Triangle in JavaScript
Overview
What You’ll Learn
The right-aligned descending triangle prints 1, 21, 321, 4321, 54321 — a natural step after the spaced mirror in Program 29. This tutorial covers fixed-width loops, leading-space padding, conditional printing, a live preview, worked JavaScript examples, edge cases, and complexity.
Outer Loop
i = 1..rows
for (let i = 1; i <= rows; i++) — one right-aligned row per iteration.
Inner Loop (j)
rows..1
if (j > i) prints space; else prints j.
Fixed Width
Always rows
Inner loop always runs rows times — spaces pad the left side.
Live Preview
3–9 rows
Pick a row count and draw the right-aligned triangle in the browser.
O(n²)
Complexity
Each row runs one loop of width rows — total work scales as n².
Introduction
A right-aligned descending number triangle prints leading spaces on each row, then digits from i down to 1. With rows = 5, the triangle grows rightward: 1, 21, … 54321.
In JavaScript you use one fixed-width inner loop: print a space when j > i, otherwise append j.
Why it matters?
It combines conditional printing with leading-space padding — a step up from Program 29’s two-loop mirror.
Key Highlights
Fixed width
Inner loop always runs rows times.
j > i
Print space for leading padding.
j <= i
Print digit in descending order.
Series Foundation
Follow Program 29; continue to Program 31 (number-star diamond) next.
In short: for each i, inner loop prints space or j, then console.log(line).
Foundation
📝 Problem & Approach
Given rows = 5, print a right-aligned descending triangle: for each i, print spaces while j > i, then print digits i..1 in a fixed-width inner loop.
JavaScript
// rows = 5 (conceptual shape)
// 1
// 21
// 321
// 4321
// 54321Inputs & Outputs
| Item | Type | Description |
|---|---|---|
rows | int | Pattern height — also the fixed width of the inner loop. |
i | int | Outer loop — current row; controls how many leading spaces print. |
j | int | Inner loop — prints space when j > i, else prints j. |
Minimal workflow
Pseudocode
for i from 1 to rows:
line = ""
for j from rows down to 1:
line += " " if j > i else j
console.log(line)Approach comparison
| Approach | Idea | Best for |
|---|---|---|
| if/else | 1, 21, … | Learning and interviews |
| Conditional expression | line += (j > i) ? " " : j | Compact console programs |
| User-input rows | parseInt(prompt(...), 10) | Flexible row count |
Cheat Sheet
⚡ Quick Reference
| Goal | Pattern |
|---|---|
| Walk rows | for (let i = 1; i <= rows; i++) |
| Inner loop | for (let j = rows; j >= 1; j--) |
| Leading spaces | if (j > i) { line += " "; } else { line += j; } |
| End the row | console.log(line) |
| Conditional form | line += (j > i) ? " " : j |
| User input | parseInt(prompt(...), 10) |
Compare
📋 if/else vs Conditional vs User Input
Same right-aligned triangle — different ways to write the condition and control rows.
Outer loop
i = 1..rowsOne right-aligned row per iteration
Leading spaces
" " if j > i else jSpace or digit
Inner loop
j = rows..1Fixed width each row
Learning tip
rows - iLeading spaces per row
Context
When This Pattern Shows Up
Reach for this pattern when teaching fixed-width loops, leading-space padding, and conditional character output.
Post alignment exercise
Natural follow-up after Program 29 — introduces right alignment with a single inner loop.
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 29 (spaced mirror) and Program 31 (number-star diamond) 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 row count between 3 and 9 and draw the right-aligned descending triangle in the browser.
Hands-On
Examples Gallery
Three complete JavaScript programs — fixed rows, user input with conditional expression form, and a smaller trace demo. Click View Output to reveal sample console results, or Try it Yourself to run the code live.
📚 Getting Started
Print five rows of the right-aligned descending triangle with if/else in one inner loop.
Example 1 — Fixed rows = 5
Hard-coded row count — ideal for first demos and screenshots.
JavaScript
const rows = 5;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = rows; j >= 1; j--) {
if (j > i) {
line += " ";
} else {
line += j;
}
}
console.log(line);
}How It Works
When i = 1, the inner loop appends four spaces then 1 — output 1. When i = 5, no leading spaces — output 54321.
📈 User Input
Read the row count with prompt() instead of hard-coding 5.
Example 2 — User Input
Read rows with prompt() and parseInt(); the inner loop uses rows as the fixed width.
JavaScript
const rowsInput = prompt("Enter rows:");
const rows = parseInt(rowsInput, 10);
if (!Number.isFinite(rows) || rows < 1) {
console.log("Please enter a positive integer.");
} else {
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = rows; j >= 1; j--) {
line += (j > i) ? " " : j;
}
console.log(line);
}
}How It Works
Same right-aligned core as Example 1; a conditional expression replaces if/else and rows replaces hard-coded 5. Non-numeric input yields NaN with bare parseInt(prompt(), 10) — validate with Number.isFinite for safer labs.
⚡ Smaller Demo
Run with rows = 3 to trace every row on paper before scaling up.
Example 3 — Compact rows = 3
Same if/else logic with a smaller row count for quick tracing.
JavaScript
const rows = 3;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = rows; j >= 1; j--) {
if (j > i) {
line += " ";
} else {
line += j;
}
}
console.log(line);
}How It Works
Only rows changes from 5 to 3 — the if/else structure stays identical. Trace i = 1, 2, 3 on paper to see how leading spaces shrink each row.
🧠 How the Algorithm Prints Rows
1
Set up
No imports needed for fixed rows; use prompt() when reading. Set rows = 5 and loop variables i, j.
Setup
2
Outer loop walks rows
for (let i = 1; i <= rows; i++) — ascending outer loop; one right-aligned row per iteration.
Row
3
Inner loop (j)
for (let j = rows; j >= 1; j--) — append space if j > i, else append j.
Padding
4
New line
console.log(line) ends the row after the inner loop finishes.
Break
=
Right-aligned triangle complete
Leading spaces shrink each row — O(n²) time, O(1) extra memory.
Trace
🔎 Worked Walkthrough — rows = 5
Trace each outer-loop value of i, leading-space count, digit range, and full row output.
i | Leading spaces | Digits printed | Row output |
|---|---|---|---|
1 | 4 | 1 | 1 |
2 | 3 | 2, 1 | 21 |
3 | 2 | 3, 2, 1 | 321 |
4 | 1 | 4, 3, 2, 1 | 4321 |
5 | 0 | 5, 4, 3, 2, 1 | 54321 |
Leading spaces per row = rows - i — zero when i = rows.
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: flip j > i to j <= i for spaces and watch alignment break.
2. Pattern Series Base
Foundation for inverted, pyramid, diamond, and hollow variants.
Example: continue to Program 31 for a number-star diamond pattern.
3. Console Formatting Drills
Practice print vs row newline without complex math.
Example: put console.log(line) inside the inner loop by mistake.
4. Padding character
Add spaces between digits once the two-loop structure works.
Example: use line += j + " " between digits for wider spacing.
5. Complexity Intuition
Triangular totals make O(n²) concrete for beginners.
Example: count printed characters for rows = 5 — each row prints exactly rows characters.
6. Input Validation Labs
Pair the pattern with Number.isFinite checks and positive-row checks.
Example: reject max <= 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 C 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: trace i and j on paper for rows = 3 before coding — watch how leading spaces shrink each row.
Usage Tips
Small habits that keep number-pattern code clean.
1. Keep Fixed Width
Inner loop must always run
rowstimes — spaces pad the left side.2. Validate with
Number.isFiniteUse
Number.isFiniteso bad input does not produceNaNwhen convertingrows.3. Keep console.log(line) Outside the Inner Loop
Only call
console.log(line)after the inner loop finishes the row.4. Trace j > i on Paper
Mark which positions print spaces vs digits for each row before coding.
5. Dry-Run rows = 3
Trace
i = 1..3on paper before coding the fullrows = 5demo.
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 right-aligned descending triangles.
1. Newline Inside the Inner Loop
Each digit lands on its own line — you get a column, not a triangle.
→ Use
line += jorline += " ";console.log(line)only after the inner loop.2. Flipping the Condition
Using
j <= ifor spaces (instead ofj > i) inverts which positions print digits.→ Print space when
j > i; print digit otherwise.3. Wrong Inner Direction
for (let j = 1; j <= rows; j++)appends ascending digits — not the descending order this pattern needs.→ Keep
for (let j = rows; j >= 1; j--)so digits readi..1.4. Short Inner Loop
Running the inner loop only to
iremoves leading spaces — output becomes left-aligned.→ Inner loop must always run from
rowsdown to1.5. Bare
parseInt(prompt())Letters or empty input yield
NaNwith bareparseInt(prompt(), 10).→ Validate with
Number.isFiniteand re-prompt on failure.
Edge Cases
Check these inputs before calling the solution done.
rows = 1
Single digit row
Output is 1 (with rows - 1 leading spaces).
rows = 0
Empty pattern
Outer loop never runs — print nothing or show a message.
Negative
rows < 0
Treat as invalid; re-prompt instead of silent empty output.
rows = 2
Smallest triangle
Two rows: 1 and 21.
Bad input
Non-numeric input
Bare parseInt(prompt(), 10) yields NaN on bad input — use Number.isFinite first.
Large rows
Large row count
Each row prints exactly rows characters — total work grows as n².
Drill
🎯 Practice Problems
Try these variations to lock in the pattern.
1. Spaced mirror
- Two fixed-width inner loops
- Review Program 29
2. Reverse descending
- Compare with Program 3
- Same digits, no leading spaces
3. Number-star diamond
- Continue with Program 31
- Alternating digits and stars
4. Safe input loop
- Validate
rows >= 1after reading input - Then draw the triangle
Important
Notes
- Padding rule. Print space when
j > i; print digitjotherwise. Inner loop always runsrowstimes. line +=builds the row;console.log(line)ends it — mix them carefully.- Validate
rows > 0for interactive programs;rows = 1prints one digit withrows - 1leading spaces. - Leading spaces per row =
rows - i— compare with Program 3 where there are no leading spaces.
Quick Takeaway: outer loop i = 1..rows, inner line += (j > i) ? " " : j, then console.log(line).
Analysis
⏱️ Time and Space Complexity
| Program | Time | Extra space |
|---|---|---|
| Nested loops (Examples 1–3) | O(n²) | O(1) |
| Smaller demo (Example 3) | O(n²) | O(1) |
🎉 Conclusion
The right-aligned descending number triangle is a compact lesson in fixed-width loops and leading-space padding: print spaces while j > i, then print digits in descending order, and end each row with console.log(line). Master the fixed-rows version, then try user input and a smaller trace demo.
Practice the three examples above, then continue to Program 31 for the number-star diamond pattern.
Inner loop must always use rows as the width — validate rows when reading from the console.
Pro Tips
💡 Best Practices
✅ Do
- Use
for (let i = 1; i <= rows; i++)in the outer loop - Inner:
if (j > i)print space, else appendj - Keep inner loop at fixed width
rows - Validate
parseInt(prompt(), 10)withNumber.isFinite - State O(n²) time when asked about complexity
❌ Don’t
- Call
console.log(line)inside the inner loop - Shorten the inner loop below
rows - Flip the space/digit condition (
j <= ifor spaces) - Ignore bad console input in user-facing demos
- Skip the
rows = 1edge case
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about this right-aligned triangle
Print the pattern the beginner-friendly way.
5
Core concepts 01
Rule
j>i spaces, else j
Definition 02
Fixed width
j = rows..1
Code 03
Leading spaces
rows - i per row
Code 04
Digits
Print i..1
Shape 05
Complexity
O(n²) time
Analysis❓ Frequently Asked Questions
Leading spaces are appended while j > i. Smaller rows get more spaces, pushing digits to the right edge.
The inner loop runs j from rows down to 1. When j <= i, it appends j — naturally producing i..1 on each row.
Running j from rows down to 1 on every row keeps column alignment. Spaces fill positions where j > i.
Program 3 prints a left-aligned reverse descending triangle with no leading spaces. Program 30 pads with spaces for right alignment.
Replace 5 with rows in the inner loop bound — see Example 2.
O(n²) for n rows because each row runs a fixed-width inner loop of n iterations.
Use parseInt with Number.isFinite or validate the raw string before converting so bad input does not produce NaN.
One row prints with no leading spaces — just 1.
Yes — line += (j > i) ? " " : j compacts the if/else logic in JavaScript.
Did you Know? 🔊
This pattern uses a fixed column width (rows). For each row i, the inner loop appends spaces while j > i, then appends digits in descending order — producing a right-aligned triangle.
Continue to Program 31
Move on to the number-star diamond pattern in the JavaScript number-pattern series.
About the author
12 people found this page helpful