Shape Rule
Fixed start, shrinking stop
Row 1 prints 54321, row 2 prints 5432, shrinking until a single 5 — every row starts at rows.
Left-Aligned Descending Number Triangle in JavaScript
Overview
What You’ll Learn
The left-aligned descending number triangle prints 54321, 5432, 543, 54, 5 — a natural step after the reverse descending triangle in Program 3. This tutorial covers a fixed inner start with shrinking stop, nested loops, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.
Outer Loop
0..rows-1
for (let i = 0; i < rows; i++) changes the inner loop’s stop point each row.
Inner Loop
rows..i descending
for (let j = rows; j > i; j--) always starts at rows and counts down.
line += vs console.log
Same line / next line
Digits use line += j; end each row with console.log(line).
Live Preview
3–9 rows
Pick a row count and draw the left-aligned descending triangle in the browser.
O(n²)
Complexity
Total digit prints = n(n+1)/2; extra memory stays O(1).
Introduction
A left-aligned descending number triangle prints every row starting from rows and counting down, but each next row stops earlier. With rows = 5, the output is 54321, 5432, 543, 54, 5.
In JavaScript the outer loop runs i = 0..rows-1, the inner loop appends j from rows down to i+1 via for (let j = rows; j > i; j--), then console.log(line) moves to the next line.
Why it matters?
It teaches fixed-start inner loops with a changing stop — a key step after Program 3’s reverse descending rows.
Key Highlights
Fixed start
Inner loop always begins at rows.
Shrinking stop
Outer loop changes where the inner loop stops.
vs Program 3
Program 3 shifts the start each row; Program 4 keeps the same first digit.
Series Foundation
Follow Program 3; continue to Program 5 (ascending triangle) next.
In short: for each i from 0 to rows-1, append j from rows down to i+1, then console.log(line).
Foundation
📝 Problem & Approach
Given a positive integer rows (e.g. 5), print a left-aligned descending triangle: each row starts at rows and counts down, with the outer loop shortening the stop point each line.
JavaScript
// rows = 5 (conceptual shape)
// 54321
// 5432
// 543
// 54
// 5Inputs & Outputs
| Item | Type | Description |
|---|---|---|
rows | number | Maximum digit and number of triangle lines. |
i | number | Outer loop — row index from 0 to rows-1; controls inner stop. |
j | number | Inner loop — descending from rows down to i+1. |
Minimal workflow
Pseudocode
for i from 0 to rows-1:
for j from rows down to i+1: append j to line
console.log(line)Approach comparison
| Approach | Idea | Best for |
|---|---|---|
| Nested loops | 54321, 5432, … | Learning and interviews |
| User-input rows | parseInt(prompt(), 10) | Flexible console programs |
| Spaced output | line += j + " " | Easier reading per row |
Cheat Sheet
⚡ Quick Reference
| Goal | Pattern |
|---|---|
| Walk rows | for (let i = 0; i < rows; i++) |
| Append digits rows..i+1 | for (let j = rows; j > i; j--) line += j |
| End the row | console.log(line) |
| Spaced digits | line += j + " " |
| User input | parseInt(prompt(), 10) |
| Program 3 contrast | for (let i = rows; i >= 1; i--) with j = i..1 |
Compare
📋 Fixed Rows vs User Input vs Spaced Output
Same left-aligned descending triangle — different ways to control rows and formatting.
Outer loop
i = 0..rows-1Changes inner stop each line
Inner loop
j = rows..i+1Fixed start, descending digits
First row
i = 0Longest row on top
Learning tip
range stopRemember range stop is exclusive
Context
When This Pattern Shows Up
Reach for this pattern when teaching fixed-start inner loops and shrinking row lengths.
After Program 3
Natural follow-up — every row keeps the same starting digit while the stop point shrinks.
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 3 (reverse descending) and Program 5 (ascending 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 row count between 3 and 9 and draw the left-aligned descending triangle in the browser.
Hands-On
Examples Gallery
Three complete JavaScript programs — fixed rows, prompt() input, and spaced output variant. Click View Output to reveal sample console results, or Try it Yourself to run the code live.
📚 Getting Started
Print five rows of the left-aligned descending triangle with nested loops.
Example 1 — Fixed rows = 5
Hard-coded row count — ideal for first demos and screenshots.
JavaScript
const rows = 5;
for (let i = 0; i < rows; i++) {
let line = "";
for (let j = rows; j > i; j--) {
line += j;
}
console.log(line);
}How It Works
When i = 0, the inner loop appends 5, 4, 3, 2, 1 — output 54321. When i = 4, only one digit appends — output 5. The outer loop increases i each row, shortening the inner loop.
📈 User Input
Read the row count with prompt() instead of hard-coding 5.
Example 2 — User Input
Read rows with prompt() and parseInt() (check with Number.isFinite in real apps).
JavaScript
const rowsInput = prompt("Enter the number of rows:");
const rows = parseInt(rowsInput, 10);
if (!Number.isFinite(rows) || rows < 1) {
console.log("Please enter a positive integer.");
} else {
for (let i = 0; i < rows; i++) {
let line = "";
for (let j = rows; j > i; j--) {
line += j;
}
console.log(line);
}
}How It Works
Same fixed-start inner-loop core as Example 1; only the source of rows changes from a literal to user input. Non-numeric input yields NaN with bare parseInt() — use Number.isFinite for safer labs.
⚡ Spaced Output
Add a space between digits for easier reading on each row.
Example 3 — Spaced Digits
Keep rows = 5 but append each digit followed by a space.
JavaScript
const rows = 5;
for (let i = 0; i < rows; i++) {
let line = "";
for (let j = rows; j > i; j--) {
line += j + " ";
}
console.log(line);
}How It Works
Only the append changes — line += j + " " instead of line += j. Loop bounds stay the same as Example 1.
🧠 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 = 0; i < rows; i++) — ascending outer loop changes the inner stop each row.
Row
3
Inner loop (j)
for (let j = rows; j > i; j--) — always starts at rows and counts down.
Digits
4
New line
console.log(line) ends the row after the inner loop finishes.
Break
=
Left-aligned descending triangle complete
Each row starts at rows — O(n²) time, O(1) extra memory.
Trace
🔎 Worked Walkthrough — rows = 5
Trace each outer-loop value of i, the inner-loop range, digit count, and full row output.
i | Inner loop (j) | Prints | Row output |
|---|---|---|---|
0 | 5, 4, 3, 2, 1 | 5 | 54321 |
1 | 5, 4, 3, 2 | 4 | 5432 |
2 | 5, 4, 3 | 3 | 543 |
3 | 5, 4 | 2 | 54 |
4 | 5 | 1 | 5 |
Prints per row = rows - i — total prints = n(n+1)/2 for n 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-- to j++ and watch digit order change.
2. Pattern Series Base
Foundation for inverted, pyramid, diamond, and hollow variants.
Example: continue to Program 5 for an ascending number triangle.
3. Console Formatting Drills
Practice print vs row newline without complex math.
Example: put console.log(line) inside the inner loop by mistake.
4. Spaced Output
Add spaces between digits once the two-loop structure works.
Example: use line += j + " " between digits on each row.
5. Complexity Intuition
Triangular totals make O(n²) concrete for beginners.
Example: count printed digits for rows = 5 — total is 15 (5+4+3+2+1).
6. Input Validation Labs
Pair the pattern with Number.isFinite and positive-row checks.
Example: reject rows <= 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: trace i and j on paper for rows = 3 before coding — watch how each row shortens by one digit.
Usage Tips
Small habits that keep number-pattern code clean.
1. Remember Loop Stop Conditions
Outer loop uses
i < rows; inner loop usesj > i— the stop value is not included.2. Validate with Number.isFinite
Use
Number.isFinite(rows)so bad input does not crash when convertingrows.3. Keep console.log Outside the Inner Loop
Only call
console.log(line)after the inner loop finishes the row.4. Fixed Inner Start
for (let j = rows; j > i; j--)always begins atrows— only the stop changes.5. Dry-Run rows = 3
Trace
i = 0, 1, 2on 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 left-aligned descending number triangles.
1. Newline Inside the Inner Loop
Each digit lands on its own line — you get a column, not a triangle.
→ Use
line += jfor digits;console.log(line)only after the inner loop.2. Wrong Inner Stop
for (let j = rows; j >= 1; j--)on every row appends a full rectangle — the stop must change withi.→ Keep
for (let j = rows; j > i; j--)so each row shortens correctly.3. Descending Outer Loop by Mistake
for (let i = rows; i >= 1; i--)withj = i..1gives Program 3’s shape, not this one.→ Use
for (let i = 0; i < rows; i++)withfor (let j = rows; j > i; j--).4. Forgetting the Row Break
Omitting
console.log(line)glues every digit onto one endless line.→ Always end the row after the inner loop.
5. Bare
parseInt(prompt())Letters or empty input yield
NaNwith bareparseInt().→ Catch
ValueErrorand re-prompt on failure.
Edge Cases
Check these inputs before calling the solution done.
rows = 1
Single digit row
Output is just the digit rows on one line.
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: 21 and 2.
Bad input
Non-numeric input
Bare parseInt(prompt()) yields NaN on bad input — use Number.isFinite first.
Large rows
Large row count
Each row prints rows - i digits — total work grows as n(n+1)/2.
Drill
🎯 Practice Problems
Try these variations to lock in the pattern.
1. Reverse descending triangle
- Outer loop counts down; inner prints i..1
- Review Program 3
2. Ascending triangle
- Continue with Program 5
- Inner loop prints 1..i on each row
3. Right-aligned variant
- Add leading spaces before each row
- Same loops, padded output
4. Spaced output
- Use
line += j + " "between digits - Same loops, wider visual spacing
Important
Notes
- Fixed start rule. Outer loop:
i = 0..rows-1. Inner loop:j = rows..i+1viafor (let j = rows; j > i; j--). line += jbuilds the row;console.log(line)advances — call log only after the inner loop.- Validate
rows > 0for interactive programs;rows = 1should print a single digit matchingrows. - Every row starts at
rows— compare with Program 3 where the start digit shifts each row.
Quick Takeaway: outer loop i = 0..rows-1, inner loop for (let j = rows; j > i; j--) with line += 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 left-aligned descending number triangle is a compact nested-loop lesson: a fixed inner start at rows with a shrinking stop on each row. Master the fixed-rows version, then try user input and spaced output.
Practice the three examples above, then continue to Program 5 for the ascending number triangle.
Every row starts at rows — build with line += j and break with console.log(line).
Pro Tips
💡 Best Practices
✅ Do
- Use
for (let i = 0; i < rows; i++)in the outer loop - Inner:
for (let j = rows; j > i; j--)always starts at rows - Use
line += jfor digits andconsole.log(line)after each row - Validate
rows ≥ 1for interactive programs - Check
Number.isFinite(rows)afterparseInt(prompt())
❌ Don’t
- Call
console.log(line)inside the inner digit loop - Use
for (let i = rows; i >= 1; i--)for the outer loop (that is Program 3) - Forget that
j > iexcludes the stop digit - Ignore bad console input in user-facing demos
- Skip the
rows = 1edge case
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about this left-aligned descending triangle
Print the pattern the beginner-friendly way.
5
Core concepts 01
Rule
Every row starts at rows
Definition 02
Outer loop
for (let i = 0; i < rows; i++)
Code 03
Inner loop
for (let j = rows; j > i; j--)
Code 04
Newline
Ends each row
Shape 05
Complexity
O(n²) time
Analysis❓ Frequently Asked Questions
Because the inner loop always begins at rows (the maximum digit) and counts down. Only the stopping point changes per row.
Row i (0-based) appends rows - i digits — the inner loop runs for (let j = rows; j > i; j--).
Program 3 appends i..1 with a descending outer loop (4321, 321, ...). Program 4 appends rows..i+1 with an ascending outer loop — every row starts at rows.
No — digits are left-aligned with no leading spaces. Each row begins flush left at the maximum digit.
Replace 5 with rows in the outer loop bound — see Example 2.
Use line += j + " " instead of line += j — see Example 3.
O(n²) for n rows because total appends are 1 + 2 + ... + n = n(n+1)/2.
Use parseInt with Number.isFinite or validate the raw string before converting so bad input does not produce NaN.
Only one row prints — a single digit matching rows.
Did you Know? 🔊
Each row starts at rows and counts down to a shrinking limit. Row i appends rows - i digits — total appends = n(n+1)/2; output is left-aligned with no leading spaces.
Continue to Program 5
Move on to the ascending number triangle in the JavaScript number-pattern series.
About the author
12 people found this page helpful