Left-Shifted Number Triangle Pattern in JavaScript

Beginner

⏱️ 8 min read

📚 Updated: Sep 2026

🎯 3 Code Examples

🚀 Live Preview

Inner Loop Start

Left-shifted number triangle output (12345, 2345, 345, 45, 5) in JavaScript programming

Overview

What You’ll Learn

The left-shifted descending number triangle changes the inner loop start value each row — a natural step after the classic descending triangle in Program 1. This tutorial covers the shape rule, loop structure, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.

Shape Rule

i..rows per row

Row 1 prints 12345, row 2 prints 2345, row 3 prints 345, and so on until a single 5.

Outer Loop

1..rows

for (let i = 1; i <= rows; i++) picks the starting digit for each row.

Inner Loop

Start at i

for (let j = i; j <= rows; j++) prints digits from i through rows.

line += vs console.log()

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 left-shifted triangle instantly in the browser.

O(n²)

Complexity

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

Introduction

A left-shifted descending number triangle keeps the longest row on top but shifts the start digit right each line. With rows = 5, the output is 12345, 2345, 345, 45, 5.

In JavaScript the outer loop picks the row start i, the inner loop prints j from i to rows, then console.log(line) moves to the next line.

Why it matters?

It teaches how changing the inner loop start value reshapes the output — a key step after Program 1.

Key Highlights

Row Start = i

On row i, print digits i through rows.

Inner Starts at i

for (let j = i; j <= rows; j++) — not j = 1.

Print Then Break

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

Series Foundation

Follow Program 1; continue to Program 3 (reverse descending triangle).

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

Foundation

📝 Problem & Approach

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

JavaScript

// rows = 5 (conceptual shape)
// 12345
// 2345
// 345
// 45
// 5
for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let j = i; j <= rows; j++) {
    line += j;   // digits i..rows
  }
  console.log(line);   // next row
}

Inputs & Outputs

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

Minimal workflow

Pseudocode

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

Approach comparison

Approach	Idea	Best for
Nested loops	Outer rows + inner digits	Learning and interviews
`Array.push` + `join("")`	Collect digits then print the row	Shorter production-style demos

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Walk each row	`for (let i = 1; i <= rows; i++)`
Print digits `i..rows`	`for (let j = i; j <= rows; j++) { line += j; }`
End the row	`console.log(line)`
One-line row shortcut	`row.push(j); row.join("")`
Program 1 variant	`for (let i = rows; i >= 1; i--)` with `for (let j = 1; j <= i; j++)`

Compare

📋 line += vs console.log() vs join shortcut

Same triangle — different ways to emit characters.

line +=

same line

Appends a digit without moving to the next line

Newline

new line

Ends the current row after all digits are printed

join

whole row

Builds digits i..rows with row.push(j).join("")

Learning tip

loops first

Master nested loops before the array join shortcut

Context

When This Pattern Shows Up

Reach for this pattern when teaching how the inner loop start value changes the shape.

First lab exercise
Natural follow-up after Program 1 — changes the inner loop start value.
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 1 (classic descending) and Program 3 (reverse descending) 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 left-shifted number triangle in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs — fixed rows, user input, and an array join shortcut. Click View Output to reveal sample results, or Try it Yourself to run the code live.

📚 Getting Started

Print five rows of the left-shifted 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 = 1; i <= rows; i++) {
  let line = "";
  for (let j = i; j <= rows; j++) {
    line += j;
  }
  console.log(line);
}

Try it Yourself

How It Works

When i = 1, the inner loop appends 12345. When i = 2, it appends 2345, and so on until i = 5 prints 5. 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() (check Number.isFinite in real apps).

JavaScript

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

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let j = i; j <= rows; 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.

⚡ Array Join Shortcut

Same left-shifted shape by collecting digits in an array, then joining before printing.

Example 3 — `row.join("")` Row Builder

Push each digit into an array, then console.log(row.join("")) once per row.

JavaScript

const rows = 5;

for (let i = 1; i <= rows; i++) {
  const row = [];
  for (let j = i; j <= rows; j++) {
    row.push(j);
  }
  console.log(row.join(""));
}

Try it Yourself

How It Works

row.push(j) collects each digit, then row.join("") builds the whole row string at once. Same nested-loop structure as Example 1; a compact alternative to repeated line += j. Keep either style for exams that want both loop bounds visible.

🧠 How the Algorithm Prints Rows

Set up

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

Setup

Outer loop (rows)

for (let i = 1; i <= rows; i++) selects the starting digit for each row.

Row

Inner loop (digits)

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

Digits

New line

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

Break

Left-shifted 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 up) and the inner j range on each row.

`i`	Inner `j` range	Printed row	Digits this row
`1`	`1..4`	`1234`	4
`2`	`2..4`	`234`	3
`3`	`3..4`	`34`	2
`4`	`4..4`	`4`	1

Total digit prints: 4 + 3 + 2 + 1 = 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 for (let j = 1; j <= i; j++) for the inner loop and watch the shape change.

2. Pattern Series Base

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

Example: change inner start from j = i to j = 1 and compare with Program 1.

3. Console Formatting Drills

Practice line += j 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 += 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 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. 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 the row.join("") row builder 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
Check parseInt(prompt()) with Number.isFinite so bad input does not leave rows as NaN.
3. Keep console.log Outside
Only call console.log(line) after the inner loop finishes the row.
4. Start Inner Loop at i
for (let j = i; j <= rows; j++) matches “row i prints digits i..rows” 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 left-shifted number patterns.

1. Newline 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 Start
Starting the inner loop at 1 with for (let j = 1; j <= i; j++) prints a growing triangle instead of i..rows.
→ For this shape, keep for (let j = i; j <= rows; 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())
Letters or empty input yield NaN with bare parseInt(prompt()).
→ Validate with Number.isFinite and re-prompt on failure.
5. Off-by-One on 0-Based Loops
Switching to a 0-based outer loop without adjusting the stop value can drop the last row or print an empty first row.
→ Prefer for (let i = 1; i <= rows; i++) with for (let j = i; j <= rows; j++) for the digits.

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 input

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

Fill char

Spaced digits

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

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Classic descending triangle

Outer loop counts down; inner prints 1..i
Review Program 1

2. Reverse descending triangle

Continue with Program 3
Another inner-start variation

3. Safe input loop

Validate parseInt(prompt()) 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 start i, inner loop prints digits i..rows, 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)`
`row.join("")` row builder (Example 3)	`O(rows²)`	`O(rows)` per row string (temporary)

Wrap Up

🎉 Conclusion

The left-shifted descending number triangle is a small nested-loop exercise with lasting payoff: changing the inner start value, line += j vs row newline, and O(n²) intuition. Master the classic two-loop version, then optionally build each row with row.join("").

Practice the three examples above, then continue to Program 3 for the reverse descending number triangle.

Row i prints i..rows — 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 3

Pro Tips

💡 Best Practices

✅ Do

Explain j = i inner start before coding
Use line += j; for digits and console.log(line) after each row
Validate rows ≥ 1 for interactive programs
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 digit loop
Use j = 1 when you meant left-shifted shape
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 i..rows

Definition

↻ 02

Outer loop

Controls each row

Code

1 03

Inner start

j = i, not j = 1

Code

↵ 04

Newline

Ends each row

I/O

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Why does each row start with a different number?

The inner loop starts at j = i, not j = 1. When i increases (1, 2, 3, ...), each row begins at that value and prints until rows.

Why does the first digit disappear on the next row?

Because each next row starts at a higher i, numbers below i are not appended anymore — the triangle shifts left visually.

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 is this different from Program 1?

Program 1 counts the outer loop down and prints 1..i. Program 2 counts up and prints i..rows — same total appends, different shape.

How can I change the number of rows?

Change the rows variable or read it with parseInt(prompt()). The outer loop runs from 1 to rows, and the inner loop appends j from i to rows.

Can I build each row as a string instead?

Yes. Push digits into an array and use join("") then console.log the row — same shape with a different output style (see Example 3).

What is the time complexity?

O(n²) for n rows because total appends are n+(n-1)+...+1 = n(n+1)/2.

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? 🔊

Each row starts at i and prints through rows, so the left edge shifts right each line — still O(n²) total appends for n rows.

Continue to Program 3

Move on to the reverse descending number triangle in the JavaScript number-pattern series.

Program 3 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 1 — Descending Number Triangle JavaScript Number Pattern 3 — Reverse Descending Triangle

Left-Shifted Number Triangle Pattern in JavaScript

What You’ll Learn

Shape Rule

Outer Loop

Inner Loop

line += vs console.log()

Live Preview

O(n²)

Introduction

Why it matters?

Row Start = i

Inner Starts at i

Print Then Break

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 line += vs console.log() vs join shortcut

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

📈 User Input

Example 2 — User Input

How It Works

⚡ Array Join Shortcut

Example 3 — row.join("") Row Builder

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (rows)

Inner loop (digits)

New line

Left-shifted 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 Outside

4. Start Inner Loop at i

5. Dry-Run One Small n

Common Pitfalls

1. Newline Inside the Inner Loop

2. Wrong Inner Start

3. Forgetting the Row Break

4. Blind parseInt(prompt())

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

Edge Cases

Single digit row

Empty pattern

rows < 0

Many rows

Non-numeric input

Spaced digits

🎯 Practice Problems

1. Classic descending triangle

2. Reverse descending triangle

3. Safe input loop

4. Spaced output

Example 1 — Fixed `rows = 5`

Example 3 — `row.join("")` Row Builder

🔎 Worked Walkthrough — `rows = 4`

2. Validate with `Number.isFinite`

`rows < 0`