Increasing Jump Number Triangle Pattern in JavaScript

Beginner
⏱️ 8 min read
📚 Updated: Sep 2026
🎯 3 Code Examples
🚀 Live Preview
Decreasing Step

What You’ll Learn

The increasing jump number triangle starts each row at i and jumps forward with a decreasing step m — a natural step after the continuous counter in Program 20. This tutorial covers the shape rule, step logic, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Jump sequence

Row 1 prints 1, row 2 prints 2 6, row 3 prints 3 7 10, and so on with shrinking jumps.

Outer Loop

1..rows

for (let i = 1; i <= rows; i++) makes row i print exactly i numbers.

Step Variable m

m -= 1 each jump

Set m = rows - 1 and k = i + m; after each append do m-- then k = k + m.

line += vs console.log()

Same line / next line

Append i first, then k values in the inner loop; end each row with console.log(line).

Live Preview

1–15 rows

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

O(n²)

Complexity

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

Introduction

An increasing jump number triangle prints each row starting at the row index, then jumps forward using a step that shrinks after every print. With rows = 5, the output is 1, 2 6, 3 7 10, 4 8 11 13, 5 9 12 14 15.

In JavaScript you append i first, set m = rows - 1 and k = i + m, then in the inner loop append k, do m--, and update k = k + m before the next value.

Why it matters?

It combines nested loops with a changing step variable — a step up from Program 20’s simple counter.

Key Highlights

Row start i

Print i before the inner loop on every row.

Step m

Start at rows - 1 and decrease after each jump.

Update k

k = i + m first, then m -= 1 and k = k + m in the loop.

Series Foundation

Follow Program 20; continue to Program 22 (odd-length rows) next.

In short: for each row i, print i, then use a decreasing step m to compute and print the remaining i - 1 values.

📝 Problem & Approach

Given a positive integer rows, print an increasing jump number triangle: row i starts with i, then prints i - 1 more values computed by adding a decreasing step m.

JavaScript
// rows = 5 (conceptual shape)
// 1
// 2 6
// 3 7 10
// 4 8 11 13
// 5 9 12 14 15
for (let i = 1; i <= rows; i++) {
  let line = i + " ";
  let m = rows - 1;
  let k = i + m;
  for (let j = 1; j < i; j++) {
    line += k + " ";
    m--;
    k = k + m;
  }
  console.log(line);
}

Inputs & Outputs

ItemTypeDescription
rowsintNumber of triangle lines to print (typically ≥ 1).
mintStep size — starts at rows - 1, decreases after each jump.
kintNext value to print — set to i + m before the inner loop.
Printed outputtextRow i has i spaced numbers with shrinking jumps.

Minimal workflow

Pseudocode
for i from 1 to rows:
    line = i + " "
    m = rows - 1
    k = i + m
    for j from 1 to i - 1:
        append k + " " to line
        m = m - 1
        k = k + m
    console.log(line)

Approach comparison

ApproachIdeaBest for
Decreasing step m1, 2 6, 3 7 10, …Learning and interviews
User-input rowsrows = parseInt(prompt(...))Flexible console programs
Custom initial stepm = 3 instead of rows - 1Tighter or wider jumps

⚡ Quick Reference

GoalPattern
Walk each rowfor (let i = 1; i <= rows; i++)
Print row startline += i + " "
Init stepm = rows - 1
First jump valuek = i + m
Inner loopfor (let j = 1; j < i; j++)
Update stepm -= 1 then k = k + m after each print
User inputrows = parseInt(prompt(...))

📋 Fixed Rows vs User Input vs Custom Step

Same jump triangle — different ways to control rows and step size.

Row start
line += i

Every row begins with the row index

Step m
m = rows-1

Initial jump size — reset each row

Custom step
m = 3

Override step in Example 3

Learning tip
m -= 1

Decrease m after each k print — jumps shrink

Context

When This Pattern Shows Up

Reach for this pattern when teaching variable step sizes and computed sequences inside nested loops.

  1. Post-continuous exercise

    Natural follow-up after Program 20 — introduces a decreasing step variable.

  2. Nested-loop warm-up

    Outer/inner bound practice with an immediate visual check.

  3. Console I/O practice

    Combine loops with prompt() for a flexible row count.

  4. Gateway to variants

    Compare Program 20 (continuous counter) and Program 22 (odd-length rows) next.

  5. 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.

🔮 Live Preview

Choose a row count between 1 and 15 and draw the jump number triangle in the browser.

Try 4, 5, or 7. Larger values still work up to 15.

Live result
Press "Draw pattern".

Examples Gallery

Three complete JavaScript programs — fixed row count, user input, and custom initial step for m. Click View Output to reveal sample results, or Try it Yourself to run the code live.

📚 Getting Started

Print five rows of the jump number triangle with a decreasing step.

Example 1 — Fixed rows = 5

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

JavaScript
const rows = 5;

for (let i = 1; i <= rows; i++) {
  let line = i + " ";
  let m = 4;
  let k = i + m;

  for (let j = 1; j < i; j++) {
    line += k + " ";
    m--;
    k = k + m;
  }
  console.log(line);
}
Try it Yourself

How It Works

When i = 2, append 2, then m = 4 and k = 6 — the inner loop appends 6 once. When i = 3, append 3, then k = 7, m-- to 3, k = 10 — output 3 7 10. console.log(line) after the inner loop starts the next row.

📈 User Input

Read the row count with prompt() instead of hard-coding 5.

Example 2 — User Input

Read rows with prompt() and parseInt(); set m = rows - 1 each row.

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

for (let i = 1; i <= rows; i++) {
  let line = i + " ";
  let m = rows - 1;
  let k = i + m;

  for (let j = 1; j < i; j++) {
    line += k + " ";
    m--;
    k = k + m;
  }
  console.log(line);
}
Try it Yourself

How It Works

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

⚡ Custom Step

Use a fixed initial step instead of rows - 1.

Example 3 — Custom Initial Step m = 3

Keep rows = 4 but start each row with m = 3 for tighter jumps.

JavaScript
const rows = 4;

for (let i = 1; i <= rows; i++) {
  let line = i + " ";
  let m = 3;
  let k = i + m;

  for (let j = 1; j < i; j++) {
    line += k + " ";
    m--;
    k = k + m;
  }
  console.log(line);
}
Try it Yourself

How It Works

Change only the initial value of m — the inner loop and k = k + m logic stay the same. Smaller starting steps produce tighter jumps within each row.

🧠 How the Algorithm Prints Rows

1

Set up

console.log is built in; use prompt() when reading input. Set rows and loop variables i, j, k, m.

Setup
2

Outer loop + row start

for (let i = 1; i <= rows; i++) then line += i + " " — row i prints i numbers.

Row
3

Init step and jump

m = rows - 1 and k = i + m set up the first jump in that row.

Setup
4

Inner loop + m -= 1

Print k, then m -= 1 and k = k + m to compute the next jump.

Sequence
5

New line

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

Break
=

Jump triangle complete

Total prints: rows(rows+1)/2O(n²) time, O(1) extra memory.

🔎 Worked Walkthrough — rows = 5

Trace each outer-loop value of i, the initial m, and the numbers printed on each row.

iInit mJump sequenceRow output
141 (no inner loop)1
24 → k=62, 62 6
34 → k=7, m=3 → k=103, 7, 103 7 10
44 → 8, 11, 134, 8, 11, 134 8 11 13
54 → 9, 12, 14, 155, 9, 12, 14, 155 9 12 14 15

Total number prints: 1 + 2 + 3 + 4 + 5 = 15 = 5×6/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: use (i + j) % 2 for row+column parity grids.

3. Console Formatting Drills

Practice line += k + " " vs console.log(line) 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 += k + " " for spaced digits 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 checks around parseInt(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. 1. Instant Visual Feedback

    Wrong bounds show up immediately as a broken staircase.

  2. 2. Minimal Concepts

    Only loops and console output — no arrays or math libraries.

  3. 3. Easy to Extend

    Invert, center, hollow, or change the fill character with small edits.

  4. 4. O(1) Extra Memory

    Streaming output needs no storage beyond loop counters.

Pro Tip: learn m = rows - 1 and k = i + m first; compare with custom step in Example 3.

Usage Tips

Small habits that keep number-pattern code clean.

  1. 1. Name Bounds Clearly

    Reset m = rows - 1 at the start of each row — not once before all loops.

  2. 2. Validate prompt()

    Check parseInt(prompt()) with Number.isFinite so bad input does not leave rows as NaN.

  3. 3. Keep console.log Outside

    Only call console.log(line) after the inner loop finishes the row.

  4. 4. Trace m and k on Paper

    Write row i, initial m, and each k jump before coding.

  5. 5. Dry-Run One Small n

    Trace rows = 5 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 jump number patterns.

  1. 1. Newline Inside the Inner Loop

    Each digit lands on its own line — you get a column, not a triangle.

    → Use line += i + " " and line += k + " "; console.log(line) only after the inner loop.

  2. 2. Wrong Inner Loop Bound

    Using j <= i prints one extra value per row.

    → Use for (let j = 1; j < i; j++) — only i - 1 jumps after printing i.

  3. 3. Forgetting m -= 1 Before k Update

    Skipping m -= 1 makes every jump the same size.

    → Always do m -= 1 then k = k + m after printing k.

  4. 4. Forgetting the Row Break

    Omitting console.log(line) glues every number onto one endless line.

    → Always end the row after the inner loop.

  5. 5. Non-numeric input

    Letters or empty input yield NaN with bare parseInt(prompt()).

    → Validate with Number.isFinite and re-prompt on failure.

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

Large width

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

Bad input

Non-numeric input

parseInt(prompt()) yields NaN — validate with Number.isFinite first.

m not reset

m carries over rows

Declaring m once before all loops gives wrong jumps — reset inside each row.

i = 1

No inner loop

When i = 1, the inner loop runs zero times — only 1 prints.

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Continuous counter

2. Odd-length rows

3. Custom step size

  • Try m = 2 or m = 6 instead of rows - 1
  • Watch how jump spacing changes

4. No trailing space

  • Print space only between numbers, not after the last
  • Harder follow-up after this page

Notes

  • Triangular sum. Total prints = rows(rows+1)/2 — O(n²) for n rows.
  • line += k + " " 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: print i first, set m = rows - 1 and k = i + m, then loop with m -= 1 and k = k + m.

⏱️ Time and Space Complexity

ProgramTimeExtra space
Nested loops (Examples 1–2)O(rows²)O(1)
Custom step (Example 3)O(rows²)O(1)
Wrap Up

🎉 Conclusion

The increasing jump number triangle is a compact lesson in variable step sizes: print i, set m = rows - 1, compute jumps with k = i + m, and shrink m after each print. Master the fixed-rows version, then try user input and a custom step value.

Practice the three examples above, then continue to Program 22 for odd-length number rows.

Reset m each row — use j < i for the inner loop and validate rows when reading input.

💡 Best Practices

✅ Do

  • Print i before the inner loop on every row
  • Reset m = rows - 1 inside each outer iteration
  • Use for (let j = 1; j < i; j++) for jump values
  • Validate parseInt(prompt()) with Number.isFinite before using rows
  • State O(n²) time when asked about complexity

❌ Don’t

  • Call console.log(line) inside the inner jump loop
  • Use j <= i — that prints one extra value
  • Forget m -= 1 before updating k
  • Skip the newline after each row
  • Ignore bad console input in user-facing demos
  • Skip the rows = 1 edge case

Key Takeaways

Knowledge Unlocked

Five things to remember about this jump pattern

Print the pattern the beginner-friendly way.

5
Core concepts
02

Print i

Row start first

Code
+ 03

Step m

rows - 1, then m -= 1

Code
04

Grow width

Row i prints i nums

Shape
O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Because the step variable m starts at rows - 1 and decreases after each appended number. Each next value is computed by adding the current m, so the jumps shrink across the row.
m is the step size used to compute the next printed number in the row. It decreases each time, changing the increment between consecutive outputs.
Row 2 appends i = 2 first. Then m = 4 and k = i + m = 6 — the inner loop appends k once, giving 2 6.
line += k + " " 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 loop; the row break uses console.log after the inner loop.
Total prints are 1+2+...+n = n(n+1)/2 — row i prints exactly i values.
Yes. Set m to a custom value instead of rows - 1 (see Example 3) — smaller steps produce tighter jumps.
O(n²) for n rows because total digit prints equal n(n+1)/2.
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.
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 starts at i, then adds a decreasing step m to compute the next value. As m shrinks after each append, the jumps get smaller toward the end of the row — total prints still equal n(n+1)/2 for n rows.

Continue to Program 22

Move on to the odd-length number rows pattern in the JavaScript number-pattern series.

Program 22 tutorial →

About the author

Mari Selvan M P
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.

12 people found this page helpful