Sequential Decreasing-Width Number Triangle in JavaScript

Beginner

⏱️ 8 min read

📚 Updated: Sep 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops + Format

Sequential decreasing width number triangle pattern output in JavaScript

Overview

What You’ll Learn

The sequential decreasing-width number triangle appends consecutive integers in rows that get shorter each line. This tutorial covers the shape rule, the k counter, nested loops, padStart(3) alignment, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Shrinking row width

Row 1 prints rows numbers, row 2 prints rows-1, down to one number on the last line.

k Counter

Global sequence

k = 1 tracks the next value; k += 1 after each print keeps the sequence continuous.

Outer Loop

Rows

for (let i = 1; i <= rows; i++) walks from the widest row to the narrowest.

Inner Loop

Decreasing count

for (let j = rows; j >= i; j--) runs fewer times as i grows.

Live Preview

1–20 rows

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

O(n²)

Complexity

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

Introduction

A sequential decreasing-width number triangle prints consecutive integers while each row gets one value shorter. With rows = 5, the output is 1 2 3 4 5, then 6 7 8 9, then 10 11 12, 13 14, and 15.

In JavaScript you solve it with two nested for loops and a shared k counter: the outer loop picks the row, the inner loop appends rows - i + 1 aligned numbers with line += String(k).padStart(3, " "); k += 1, then console.log(line) moves to the next line.

Why it matters?

It teaches counter-driven output and aligned columns — key skills before harder number-pattern variants.

Key Highlights

Shrinking Row Width

Row i prints rows - i + 1 consecutive values.

k Counter

line += String(k).padStart(3, " "); k += 1 keeps columns aligned.

Format Then Break

line += String(k).padStart(3, " "); k += 1 in the inner loop; console.log(line) after.

Series Foundation

Follow Program 37 palindrome rows; continue to Program 39 rotating numbers.

In short: for each row i from 1 to rows, print rows - i + 1 consecutive numbers with line += String(k).padStart(3, " "); k += 1, then call console.log(line).

Foundation

📝 Problem & Approach

Given a positive integer rows, print consecutive integers starting at 1 in a triangle where row i contains exactly rows - i + 1 values.

JavaScript

# First 5 rows (conceptual shape)
#   1  2  3  4  5
#   6  7  8  9
#  10 11 12
#  13 14
#  15

Inputs & Outputs

Item	Type	Description
`rows`	int	Number of triangle lines to print (typically ≥ 1).
Printed output	text	Left-aligned rows of consecutive integers; row `i` has `rows - i + 1` values.

Minimal workflow

Pseudocode

k = 1
for i from 1 to rows:
    for count from 1 to (rows - i + 1):
        print k with width 3
        k = k + 1
    print newline

Approach comparison

Approach	Idea	Best for
Nested loops + k counter	Outer rows + inner shrinking width + format	Learning and interviews
Custom start k	Change initial k instead of 1	Variations and demos

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Walk each row	`for (let i = 1; i <= rows; i++)`
Print shrinking count	`for (let j = rows; j >= i; j--) { line += String(k).padStart(3, " "); k += 1; }`
End the row	`console.log(line)`
Wider columns	`line += String(k).padStart(4, " "); k += 1` for larger totals
Program 37 variant	Palindrome per row instead of global sequence

Compare

📋 padStart vs toString vs Template Literals

Same triangle — different ways to emit aligned numbers.

no padding

Digits run together — columns misalign at 10+

padStart(3)

String(k).padStart(3, " ")

Right-aligns each value in a 3-character field

format()

String(k).padStart(3, " ")

Same width idea via str.format / format()

Learning tip

k counter

Master the k += 1 pattern before wider field widths

Context

When This Pattern Shows Up

Reach for this pattern when teaching counters and aligned output inside nested loops.

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
Compare Program 37 palindrome rows and Program 39 rotating numbers 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 sequential decreasing-width triangle in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs — fixed row count, prompt() input, and a custom starting value for k. Click View Output to reveal sample console results, or Try it Yourself to run the code live.

📚 Getting Started

Print five rows with nested loops, a k counter, and aligned output.

Example 1 — Fixed `rows = 5`

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

JavaScript

const rows = 5;
let k = 1;

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

Try it Yourself

How It Works

When i = 1, the inner loop runs 5 times and prints 1 through 5. When i = 2, it prints 6 through 9, and so on until the last row prints 15. 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() instead of hard-coding 5.

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 {
  let k = 1;
  for (let i = 1; i <= rows; i++) {
    let line = "";
    for (let j = rows; j >= i; j--) {
      line += String(k).padStart(3, " ");
      k += 1;
    }
    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(), 10) — validate with Number.isFinite for safer labs.

⚡ Variation

Same shape with a different starting value for the sequence.

Example 3 — Custom Start `k = 10`

Initialize k with any starting value — the inner loop logic stays the same.

JavaScript

const rows = 5;
let k = 10;

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

Try it Yourself

How It Works

Only the initial value of k changes. The shrinking inner loop still prints rows - i + 1 values per row. Great for variations once you understand the default k = 1 version.

🧠 How the Algorithm Prints Rows

Set up

No imports needed for fixed rows; use prompt() when reading. Set const rows = 5 (fixed or from prompt()).

Setup

Outer loop (rows)

for (let i = 1; i <= rows; i++) selects the current row from widest to narrowest.

Row

Inner loop (values)

for (let j = rows; j >= i; j--) prints rows - i + 1 numbers with line += String(k).padStart(3, " "); k += 1.

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, the inner-loop count, and the values printed via k.

`i`	Inner runs	`k` range	Printed row
`1`	4	`1..4`	`1 2 3 4`
`2`	3	`5..7`	`5 6 7`
`3`	2	`8..9`	`8 9`
`4`	1	`10`	`10`

Total value 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: change k start to 100 for a shifted sequence.

3. Console Formatting Drills

Practice print 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 :4d when values exceed two digits.

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 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 k-counter nested-loop version first; then try custom start values or wider field widths.

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 crashes when the user types letters instead of a number.
3. Keep console.log(line) Outside the Inner Loop
Only call console.log(line) after the inner loop finishes the row.
4. Pick Field Width Early
Use :4d or wider when total values exceed 99.
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 per line, you almost certainly put console.log(line) inside the inner loop.

Common Pitfalls

Mistakes that commonly break sequential decreasing-width 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 += String(k).padStart(3, " "); k += 1 for values; console.log(line) only after the inner loop.
2. Wrong Inner Bound
Using j <= rows on every row prints a rectangle; resetting k each row breaks the sequence.
→ Keep for (let j = rows; j >= i; j--) and one shared k.
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. Unchecked parseInt(prompt())
Letters or empty input yield NaN with bare parseInt(prompt(), 10).
→ Validate with Number.isFinite 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.
→ With a 0-based outer loop, keep the inner count as rows - i (or stick to 1-based for (let i = 1; i <= rows; i++)).

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single digit

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 input

Bare parseInt(prompt(), 10) yields NaN on bad input — validate with Number.isFinite first.

Fill char

Custom start k

Initialize k to any value — the sequence continues from there.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Palindrome number triangle

Build symmetric rows like 4321234
Continue with Program 37

2. Rotating number pattern

Shift the sequence each row (23451, 34521, …)
Continue with Program 39

3. Upside-down triangle

Start with one number and grow row width each line
Reverse outer and inner loop bounds

4. Wider field width

Use :4d or %5d for larger triangles
Keeps columns aligned past two digits

Important

Notes

Triangular count. Total digit prints for n rows is n(n+1)/2 — hence O(n²) time.
print stays on the line; println 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 shrinking count with k += 1, then break the line.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1–2)	`O(rows²)`	`O(1)`
Custom start k (Example 3)	`O(rows²)`	`O(1)`

Wrap Up

🎉 Conclusion

The sequential decreasing-width number triangle combines nested loops with a shared k counter and aligned output — a natural step after palindrome rows. Master the default k = 1 version, then optionally change the start value or field width.

Practice the three examples above, then continue to Program 39 for the rotating number pattern.

Row i prints rows - i + 1 consecutive values — keep line += String(k).padStart(3, " "); k += 1 for digits and console.log(line) for the break.

View Examples Gallery Continue to Program 39

Pro Tips

💡 Best Practices

✅ Do

Explain k counter and shrinking inner bound before coding
Use line += String(k).padStart(3, " "); k += 1 for values and console.log(line) after each row
Validate rows ≥ 1 for interactive programs
Check prompt() return value before using rows
State O(n²) time when asked about complexity

❌ Don’t

Call console.log(line) inside the inner digit loop
Reset k inside the outer loop (breaks the global sequence)
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 sequential pattern

Print the pattern the beginner-friendly way.

Core concepts

△ 01

Rule

Row i prints rows-i+1 values

Definition

↻ 02

Outer loop

Controls each row

Code

k 03

k counter

k += 1 after each print

Logic

# 04

padStart(3)

Aligns columns

I/O

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Why does this pattern print 15 numbers for 5 rows?

Because the row lengths are 5, 4, 3, 2, and 1. Their sum is 5+4+3+2+1 = 15, which equals n(n+1)/2.

What does padStart(3) do?

padStart(3, " ") appends an integer right-aligned in a field width of 3 characters, which keeps columns aligned when numbers reach two digits.

Why use a k counter instead of printing j?

Each row appends a different count of numbers, but the sequence must continue globally (1, 2, 3, ...). k stores the next value and increments after every append.

Can I start from a different number?

Yes. Initialize k with your starting value instead of 1, for example k = 10.

How is this different from Program 37?

Program 37 builds a palindrome on each row (4321234). Program 38 appends one continuous ascending sequence with shrinking row widths.

What is the time complexity?

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

How should I read the row count safely?

Use parseInt with Number.isFinite 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 appended. Validate and prompt again if you want a clear user message.

Did you Know? 🔊

Row i appends rows - i + 1 consecutive numbers via a shared k counter. Total values for n rows is the triangular number n(n+1)/2 — 15 when rows = 5.

Continue to Program 39

Move on to the rotating number pattern in the JavaScript number-pattern series.

Program 39 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 37 — Palindrome Triangle JavaScript Number Pattern 39 — Rotating Numbers

Sequential Decreasing-Width Number Triangle in JavaScript

What You’ll Learn

Shape Rule

k Counter

Outer Loop

Inner Loop

Live Preview

O(n²)

Introduction

Why it matters?

Shrinking Row Width

k Counter

Format Then Break

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 padStart vs toString vs Template Literals

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

⚡ Variation

Example 3 — Custom Start k = 10

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (rows)

Inner loop (values)

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 the Inner Loop

4. Pick Field Width Early

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. Unchecked parseInt(prompt())

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

Edge Cases

Single digit

Empty pattern

rows < 0

Many rows

Non-numeric input

Custom start k

🎯 Practice Problems

1. Palindrome number triangle

2. Rotating number pattern

3. Upside-down triangle

4. Wider field width

Example 1 — Fixed `rows = 5`

Example 3 — Custom Start `k = 10`

🔎 Worked Walkthrough — `rows = 4`

2. Validate with `Number.isFinite`

`rows < 0`