Descending Number Triangle in JavaScript

Q: What is the time complexity?

O(n²) where n is the number of rows. Total digit appends equal 1+2+…+n = n(n+1)/2.

Q: Can I use document.write instead of console.log?

Yes in browser demos. document.write(j) prints each digit and document.write(" ") ends the row. Prefer console.log or DOM updates in production code.

Beginner

⏱️ 8 min read

📚 Updated: Sep 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops

Descending number triangle output (12345, 1234, 123, 12, 1) in JavaScript programming

Overview

What You’ll Learn

The descending number triangle pattern is the classic first console pattern: nested loops, line += j vs console.log(line), and a clear visual result. This tutorial covers the shape rule, loop structure, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.

Shape Rule

1..i digits on row i

Row rows prints 1..rows, then one fewer digit each line, ending with a single 1.

Outer Loop

Rows

for (let i = rows; i >= 1; i--) walks each line from the longest down to one digit.

Inner Loop

Digits

for (let j = 1; j <= i; j++) prints digits 1 through i on that row.

line += j vs console.log(line)

Same line / next line

Digits use line += j; end each row with console.log(line).

Live Preview

1–20 rows

Pick a row count and draw the descending number triangle instantly in the browser.

O(n²)

Complexity

Total digit prints = n(n+1)/2; extra memory stays O(1).

Introduction

A descending number triangle pattern starts with the longest row and loses one digit per line. Each row prints consecutive digits from 1 up to the current row length, shrinking from top to bottom.

In JavaScript you usually solve it with two nested for loops: the outer loop picks the row, the inner loop prints digits 1..i on that row, then console.log(line) moves to the next line.

Why it matters?

It is the standard first pattern exercise in JavaScript courses. Once nested loops and console.log click, pyramids, diamonds, and hollow shapes become much easier.

Key Highlights

Row = Digit Count

On row i, print digits 1 through i.

Two Nested Loops

Outer counts down rows; inner prints digits.

Print Then Break

line += j in the inner loop; console.log(line) after.

Series Foundation

Gateway to left-shifted, pyramid, and hollow patterns.

In short: for each row i from rows down to 1, print digits 1..i with line += j, then call console.log(line).

Foundation

📝 Problem & Approach

Given a positive integer rows, print a descending number triangle: each row i shows digits 1 through i, with the outer loop counting from rows down to 1.

JavaScript

// First 5 rows (conceptual shape)
// 12345
// 1234
// 123
// 12
// 1

Inputs & Outputs

Item	Type	Description
`rows`	int	Number of triangle lines to print (typically ≥ 1).
Printed output	text	Each row prints `1..i`; the top row has `rows` digits, the bottom row has one digit.

Minimal workflow

Pseudocode

for i from rows down to 1:
    for j from 1 to i:
        append j to line
    console.log(line)

Approach comparison

Approach	Idea	Best for
Nested loops	Outer rows + inner digits	Learning and interviews
`document.write(j)`	Browser page output	Quick HTML demos

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Walk each row	`for (let i = rows; i >= 1; i--)`
Print digits `1..i`	`for (let j = 1; j <= i; j++) line += j`
End the row	`console.log(line)`
Browser variant	`document.write(j)` then `document.write("<br>")`
Ascending variant	`for (let i = 1; i <= rows; i++)` (grows upward)

Compare

📋 line += j vs console.log(line) vs document.write

Same triangle — different ways to emit characters.

line += j

same line

Builds the row string without moving to the next line

console.log(line)

new line

Ends the current row after all digits are printed

document.write

document.write(j)

Prints each digit directly in the browser

Learning tip

loops first

Master nested loops before browser shortcuts

Context

When This Pattern Shows Up

Reach for this triangle when teaching or testing nested-loop basics.

First lab exercise
Most JavaScript pattern series start here before pyramids and diamonds.
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
Try left-shifted starts (Program 2), pyramids, or spaced digits 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 1 and 20 and draw the descending number triangle in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs — fixed row count, prompt() input, and a browser document.write version. Click View Output to reveal sample results, or Try it Yourself to run the code live.

📚 Getting Started

Print five rows of the descending number triangle with nested loops.

Example 1 — Fixed `rows = 5`

Hard-coded height — ideal for first demos and screenshots.

JavaScript

const rows = 5;

for (let i = rows; i >= 1; i--) {
  let line = "";
  for (let j = 1; j <= i; j++) {
    line += j;
  }
  console.log(line);
}

Try it Yourself

How It Works

When i = 5, the inner loop builds 12345. When i = 4, it builds 1234, and so on until i = 1 prints 1. console.log(line) after the inner loop starts the next row.

📈 Practical Variant

Let the user choose the height at runtime.

Example 2 — User Input Version

Read the row count with prompt() and parseInt() (check Number.isFinite in real apps).

JavaScript

const rowsInput = prompt("Enter the number of rows:");
const rows = parseInt(rowsInput, 10);

if (!Number.isFinite(rows) || rows <= 0) {
  console.log("Please enter a positive integer.");
} else {
  for (let i = rows; i >= 1; i--) {
    let line = "";
    for (let j = 1; j <= i; j++) {
      line += j;
    }
    console.log(line);
  }
}

Try it Yourself

How It Works

Same nested-loop core as Example 1; only the source of rows changes. Non-numeric input yields NaN with bare parseInt(prompt()) — validate with Number.isFinite for safer labs.

⚡ Browser Variant

Same shape rendered in an HTML page with document.write.

Example 3 — Browser `document.write` Version

Print each digit with document.write(j), then end the row with document.write("<br>").

HTML

<!DOCTYPE html>
<html>
<body>
<script>
const rows = 5;

for (let i = rows; i >= 1; i--) {
  for (let j = 1; j <= i; j++) {
    document.write(j);
  }
  document.write("<br>");
}
</script>
</body>
</html>

Try it Yourself

How It Works

document.write(j) prints each digit directly in the browser. Same nested-loop structure as Example 1; useful for quick HTML demos. Prefer console.log or DOM updates in production code.

🧠 How the Algorithm Prints Rows

Set up

console.log is built in; use prompt() when reading input. Set rows (fixed or from prompt).

Setup

Outer loop (rows)

for (let i = rows; i >= 1; i--) selects the current line, starting at the widest.

Row

Inner loop (digits)

for (let j = 1; j <= i; j++) prints digits 1..i with line += j.

Digits

New line

console.log(line) ends the row so the next outer iteration starts fresh.

Break

Triangle complete

Total digit prints: 1+2+…+n = n(n+1)/2 — O(n²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — `rows = 4`

Trace each outer-loop value of i (counting down) and count how many digits the inner loop prints.

`i`	Inner `j` range	Printed row	Digits this row
`4`	`1..4`	`1234`	4
`3`	`1..3`	`123`	3
`2`	`1..2`	`12`	2
`1`	`1..1`	`1`	1

Total digit prints: 1 + 2 + 3 + 4 = 10 = 4×5/2.

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 j <= i and watch the shape change.

2. Pattern Series Base

Foundation for inverted, pyramid, diamond, and hollow variants.

Example: Program 2 changes the inner start value each row.

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: print j + " " for spaced digits on each row.

5. Complexity Intuition

Triangular totals make O(n²) concrete for beginners.

Example: count printed digits for n = 10 → 55.

6. Input Validation Labs

Pair the pattern with prompt() 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: learn the nested-loop version first; treat document.write as a polish shortcut afterward.

Usage Tips

Small habits that keep number-pattern code clean.

1. Name Bounds Clearly
Use rows (or n) and keep i/j for row/column — or rename to row/col.
2. Validate with Number.isFinite
Avoid using uninitialized rows when the user types letters instead of a number.
3. Keep console.log(line) Outside
Only call console.log(line) after the inner loop finishes the row.
4. Count Down on the Outer Loop
rows..1 on the outer loop with j <= i matches “row i prints digits 1..i” naturally.
5. Dry-Run One Small n
Trace rows = 3 on paper before coding larger demos.

Pro Tip: if the output is a vertical list of single digits, you almost certainly put console.log(line) inside the inner loop.

Common Pitfalls

Mistakes that commonly break descending number patterns.

1. console.log(line) Inside the Inner Loop
Each digit lands on its own line — you get a column, not a triangle.
→ Use line += j for digits; console.log(line) only after the inner loop.
2. Wrong Inner Bound
j <= rows prints a rectangle; wrong outer bounds flatten or invert the shape.
→ For this shape, keep for (let j = 1; j <= i; j++).
3. Forgetting the Row Break
Omitting console.log(line) glues every digit onto one endless line.
→ Always end the row after the inner loop.
4. Blind parseInt(prompt(), 10)
Letters or empty input return NaN with bare parseInt(prompt(), 10).
→ Check Number.isFinite(rows) and re-prompt on failure.
5. Off-by-One on 0-Based Loops
Switching to i = 0 without adjusting the inner bound prints an empty first row or wrong counts.
→ If 0-based, print digits 1..i+1 (e.g. for (let j = 1; j <= i + 1; j++)).

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single digit row

Output is just 1 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.

Large n

Many rows

Output grows as n²/2 characters — fine for labs, noisy for huge n.

Bad input

Non-numeric prompt()

parseInt(prompt(), 10) returns NaN on bad input — validate first.

Fill char

Spaced digits

Try line += j + " " for spaces between numbers.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Left-shifted triangle

Inner loop starts at row index (see Program 2)
Continue with Program 2

2. Ascending triangle

Use for (let i = 1; i <= rows; i++) as outer loop
Shows the loop structure is reusable

3. Safe input loop

Validate with Number.isFinite until rows >= 1
Then draw the triangle

4. Spaced output

Use line += j + " " between digits
Harder follow-up after this page

Important

Notes

Triangular count. Total digit prints for n rows is n(n+1)/2 — hence O(n²) time.
line += j stays on the line; console.log(line) advances — mix them carefully.
Validate rows > 0 for interactive programs; rows = 1 should print a single 1.
This page is left-aligned. Centered pyramids need leading spaces — covered later in the series.

Quick Takeaway: outer loop picks the row, inner loop prints digits 1..i, then break the line — that is the whole pattern.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1–2)	`O(rows²)`	`O(1)`
`document.write` (Example 3)	`O(rows²)`	`O(1)`

Wrap Up

🎉 Conclusion

The descending number triangle pattern is a small nested-loop exercise with lasting payoff: row/column thinking, line += j vs row newline, and O(n²) intuition. Master the classic two-loop version, then optionally try the document.write browser version in Example 3.

Practice the three examples above, then continue to Program 2 for a shifted descending triangle.

Row i prints 1..i — keep line += j for digits and console.log(line) for the break, and validate row counts when reading input.

View Examples Gallery Continue to Program 2

Pro Tips

💡 Best Practices

✅ Do

Explain outer counts down, inner prints 1..i before coding
Use line += j for digits and console.log(line) after each row
Validate rows ≥ 1 for interactive programs
Check Number.isFinite(rows) after parseInt(prompt(), 10) before using rows
State O(n²) time when asked about complexity

❌ Don’t

Call console.log(line) inside the inner digit loop
Use ascending outer loop when you meant a descending triangle
Skip the newline after each row
Ignore bad console input in user-facing demos
Skip the rows = 1 edge case

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this number pattern

Print the triangle the beginner-friendly way.

Core concepts

△ 01

Rule

Row i prints 1..i

Definition

↻ 02

Outer loop

Controls each row

Code

1 03

Inner loop

Prints digits with line += j

Code

↵ 04

console.log(line)

Ends each row

I/O

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

How does the nested loop create a descending number triangle?

The outer loop runs i from rows down to 1 with for (let i = rows; i >= 1; i--). For each row i, the inner loop runs j from 1 to i and appends j to a line string. Row rows prints 1..rows, the next row prints one fewer digit, down to a single 1.

Why does the outer loop count down?

Counting down makes the first row the longest. for (let i = rows; i >= 1; i--) sets i to the full width first, then shrinks by one each line — matching 12345, 1234, 123, 12, 1.

What is the difference between line += j and console.log(line)?

line += j stays on the same row while building digits. console.log(line) prints the completed row and adds a newline. Digits use += inside the inner loop; the row break uses console.log after the inner loop.

How do I print an ascending number triangle instead?

Change the outer loop to for (let i = 1; i <= rows; i++). Keep the inner loop as for (let j = 1; j <= i; j++) line += j. The first row then has one digit and the last row has rows digits.

What is the time complexity?

O(n²) where n is the number of rows. Total digit appends equal 1+2+…+n = n(n+1)/2.

Can I use document.write instead of console.log?

Yes in browser demos. document.write(j) prints each digit and document.write("<br>") ends the row. Prefer console.log or DOM updates in production code.

How should I read the row count safely?

Use parseInt with Number.isFinite and a rows > 0 check after prompt(), or validate the raw string before converting so bad input does not produce NaN.

What happens if rows is 0 or negative?

The outer loop never runs, so nothing is printed. Validate and prompt again if you want a clear user message.

Did you Know? 🔊

Row i prints digits 1 through i. The outer loop counts down from rows, so the first line is longest and each row shortens by one digit — still O(n²) total prints. This is the classic first console pattern in JavaScript labs.

Continue to Program 2

Shift the start digit each row — 12345, 2345, 345, 45, 5.

Program 2 tutorial →

About the author

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 Programs JavaScript Number Pattern 2 — Shifted Number Triangle

Descending Number Triangle in JavaScript

What You’ll Learn

Shape Rule

Outer Loop

Inner Loop

line += j vs console.log(line)

Live Preview

O(n²)

Introduction

Why it matters?

Row = Digit Count

Two Nested Loops

Print Then Break

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 line += j vs console.log(line) vs document.write

When This Pattern Shows Up

First lab exercise

Nested-loop warm-up

Console I/O practice

Gateway to variants

Not a UI layout tool

🔮 Live Preview

Examples Gallery

📚 Getting Started

Example 1 — Fixed rows = 5

How It Works

📈 Practical Variant

Example 2 — User Input Version

How It Works

⚡ Browser Variant

Example 3 — Browser document.write Version

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (rows)

Inner loop (digits)

New line

Triangle complete

🔎 Worked Walkthrough — rows = 4

Use Cases

1. Teaching Nested Loops

2. Pattern Series Base

3. Console Formatting Drills

4. Character Substitution

5. Complexity Intuition

6. Input Validation Labs

Advantages

1. Instant Visual Feedback

2. Minimal Concepts

3. Easy to Extend

4. O(1) Extra Memory

Usage Tips

1. Name Bounds Clearly

2. Validate with Number.isFinite

3. Keep console.log(line) Outside

4. Count Down on the Outer Loop

5. Dry-Run One Small n

Common Pitfalls

1. console.log(line) Inside the Inner Loop

2. Wrong Inner Bound

3. Forgetting the Row Break

4. Blind parseInt(prompt(), 10)

5. Off-by-One on 0-Based Loops

Edge Cases

Single digit row

Empty pattern

rows < 0

Many rows

Non-numeric prompt()

Spaced digits

🎯 Practice Problems

1. Left-shifted triangle

2. Ascending triangle

3. Safe input loop

4. Spaced output

Example 1 — Fixed `rows = 5`

Example 3 — Browser `document.write` Version

🔎 Worked Walkthrough — `rows = 4`

2. Validate with `Number.isFinite`

`rows < 0`