Bidirectional Number Triangle in JavaScript

Q: Why does the last row print 1 and not 5?

For i = 5, the condition i < 4 is false, so the program appends rows + 1 - i which becomes 1.

Q: Why does the row length shrink?

Because the inner loop runs from j = i to rows. As i increases, the inner loop executes fewer times.

Q: What does bidirectional mean here?

Digits rise (1, 2, 3) on early rows then mirror down (2, 1) on the last rows via the rows + 1 - i mapping.

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

line += val repeats the digit on the same line. console.log(line) ends the row after the inner loop finishes.

Q: Why use if/else instead of two separate loops?

A single inner loop with a digit mapping keeps the shrinking row logic in one place.

Q: How do I generalize for any row count?

Replace 5 with rows and use val = i < rows - 1 ? i : rows + 1 - i — see Example 2.

Q: What is the time complexity?

O(n²) for n rows because total prints are triangular (n + (n-1) + … + 1).

Q: How should I read rows safely?

Use parseInt with Number.isFinite or validate the raw string before converting so bad input does not produce NaN.

Q: What happens if rows is 1?

Only one row prints — a single 1.

Beginner

⏱️ 8 min read

📚 Updated: Sep 2026

🎯 3 Code Examples

🚀 Live Preview

If/Else Mapping

Bidirectional number triangle output (11111, 2222, 333, 22, 1) in JavaScript programming

Overview

What You’ll Learn

The bidirectional number triangle prints 11111, 2222, 333, 22, 1 — a natural step after the centered pyramid in Program 24. This tutorial covers shrinking rows, if/else digit mapping, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Shrinking rows

Row 1 prints five 1s, row 2 prints four 2s, row 5 prints a single 1.

Outer Loop

i = 1..rows

for (let i = 1; i <= rows; i++) walks each row top to bottom.

Shrinking Inner Loop

j = i..rows

for (let j = i; j <= rows; j++) prints fewer digits as i grows.

If/Else Mapping

rows + 1 - i mirror

i < 4 prints i; else prints rows + 1 - i for rows 4 and 5.

Live Preview

3–9 rows

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

O(n²)

Complexity

Total prints are triangular — scales as n² for n rows.

Introduction

A bidirectional number triangle prints repeated digits per row with shrinking length — digits rise then mirror down. With rows = 5, the output is 11111, 2222, 333, 22, 1.

In JavaScript you use an outer loop for rows, a shrinking inner loop j = i..rows, and an if/else to pick which digit to repeat.

Why it matters?

It combines shrinking inner loops with conditional mapping — a step up from Program 24’s spacing logic.

Key Highlights

Shrinking rows

j = i..rows — each row prints fewer digits.

Rising digits

i < 4 repeats 1, 2, 3.

Mirror down

rows + 1 - i produces 2 and 1 on last rows.

Series Foundation

Follow Program 24; continue to Program 26 (diagonal asterisk) next.

In short: for each i, repeat a digit (rows - i + 1) times — use i when i < rows - 1, else rows + 1 - i.

Foundation

📝 Problem & Approach

Given a positive integer rows (e.g. 5), print a shrinking triangle where each row repeats one digit — rising on early rows, mirroring down on the last rows.

JavaScript

# rows = 5 (conceptual shape)
# 11111
# 2222
# 333
# 22
# 1

Inputs & Outputs

Item	Type	Description
`rows`	int	Number of rows — outer loop runs from `1` to `rows`.
`i`	int	Outer loop — current row number (also the digit for early rows).
`j`	int	Inner loop — `j = i..rows` controls shrinking row length.
`val`	int	Digit to repeat — `i` or `rows + 1 - i` via if/else.

Minimal workflow

Pseudocode

for i from 1 to rows:
    val = i < rows - 1 ? i : rows + 1 - i
    line = ""
    for j from i to rows:
        line += val
    console.log(line)

Approach comparison

Approach	Idea	Best for
If/else mapping	`11111`, `2222`, … `1`	Learning and interviews
User-input rows	`const rows = parseInt(prompt(...), 10)`	Flexible console programs
Ternary val	`val = i if i < rows - 1 else rows + 1 - i`	Compact generalized version

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Walk rows	`for (let i = 1; i <= rows; i++)`
Shrink inner loop	`for (let j = i; j <= rows; j++)`
Pick digit (fixed)	`if (i < 4) { line += i; } else { line += rows + 1 - i; }`
Pick digit (general)	`val = i if i < rows - 1 else rows + 1 - i`
End the row	`console.log(line)`
User input	`const rows = parseInt(prompt(...), 10)`

Compare

📋 Fixed rows vs User Input vs Spaced Output

Same bidirectional triangle — different ways to control rows and formatting.

Outer loop

i = 1..rows

One row per outer iteration

Inner loop

j = i..rows

Shrinking row length each row

Mapping

rows + 1 - i

Mirrors digits on last rows

Learning tip

if/else

Compute val once per row, not per column

Context

When This Pattern Shows Up

Reach for this pattern when teaching shrinking inner loops, conditional digit mapping, and bidirectional output.

Post pyramid exercise
Natural follow-up after Program 24 — introduces if/else mapping and shrinking rows.
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 24 (centered pyramid) and Program 26 (diagonal asterisk) 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 bidirectional number triangle in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs — fixed rows, user 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 bidirectional triangle with if/else mapping.

Example 1 — Fixed `rows = 5`

Hard-coded row count — 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++) {
    if (i < 4) {
      line += i;
    } else {
      line += rows + 1 - i;
    }
  }
  console.log(line);
}

Try it Yourself

How It Works

When i = 1, append five 1s — output 11111. When i = 3, append three 3s — output 333. When i = 4, the else branch appends rows + 1 - 4 = 2 twice — output 22. When i = 5, append rows + 1 - 5 = 1 once.

📈 User Input

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

Example 2 — User Input

Read rows with prompt() and parseInt(); use a ternary expression to generalize the digit mapping.

JavaScript

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

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

Try it Yourself

How It Works

Same shrinking inner loop as Example 1; the ternary i < rows - 1 ? i : rows + 1 - i generalizes the if/else mapping for any row count. Non-numeric input yields NaN with bare parseInt(prompt(), 10) — validate with Number.isFinite for safer labs.

⚡ Spaced Output

Add a space between repeated digits for easier reading.

Example 3 — Spaced Digits

Keep rows = 5 but append each digit followed by a space.

JavaScript

const rows = 5;

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

Try it Yourself

How It Works

Only the append changes — line += val + " " instead of line += val. The shrinking loop and digit mapping stay the same.

🧠 How the Algorithm Prints Rows

Set up

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

Setup

Outer loop walks rows

for (let i = 1; i <= rows; i++) — one row per iteration.

Row

Shrinking inner loop (j)

for (let j = i; j <= rows; j++) — row length shrinks as i grows.

Shrink

If/else digit mapping

if (i < 4) appends i; else line += rows + 1 - i mirrors down.

Mapping

New line

console.log(line) ends the row after the inner loop.

Break

Bidirectional triangle complete

Digits rise then mirror down — O(n²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — `rows = 5`

Trace each outer-loop value of i, the digit chosen, inner-loop count, and row output.

`i`	Digit (`val`)	Inner loop (`j`)	Prints	Row output
`1`	1 (`i < 4`)	1..5 (5 times)	5	`11111`
`2`	2	2..5 (4 times)	4	`2222`
`3`	3	3..5 (3 times)	3	`333`
`4`	2 (`rows + 1 - i`)	4..5 (2 times)	2	`22`
`5`	1 (`rows + 1 - i`)	5..5 (1 time)	1	`1`

Prints per row = rows - i + 1 — 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: change j = i to j = 1 and watch rows stop shrinking.

2. Pattern Series Base

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

Example: use rows + 1 - i for a fully symmetric variant.

3. Console Formatting Drills

Practice line += 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 or add spaces once the loop works.

Example: print val + " " for spaced repeated digits.

5. Complexity Intuition

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

Example: count printed numbers for rows = 5 → 5 + 4 + 3 + 2 + 1 = 15.

6. Input Validation Labs

Pair the pattern with Number.isFinite and positive-row checks.

Example: reject max <= 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 the shrinking inner loop on paper for rows = 3 before coding — mapping bugs hide in the rows + 1 - i threshold.

Usage Tips

Small habits that keep number-pattern code clean.

1. Name Bounds Clearly
Do not reset val inside the inner loop — compute it once per row.
2. Validate prompt()
Validate parseInt(prompt(), 10) with Number.isFinite so bad input does not produce NaN.
3. Keep console.log(line) Outside
Only call console.log(line) after the inner loop finishes the row.
4. Trace i and val on Paper
Write each i, digit chosen, and print count before coding.
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 bidirectional number triangle patterns.

1. Newline Inside the Inner Loop
Each digit lands on its own line — you get a column, not a triangle.
→ Use line += val; console.log(line) only after the inner loop.
2. Recomputing val Inside Inner Loop
Putting the if/else inside the inner loop works but is wasteful — compute val once per row.
→ Set val before the inner loop, then just line += val.
3. Wrong Inner Loop Bound
Using j = 1 to rows prints full-width rows — no shrinking.
→ Use for (let j = i; j <= rows; j++) so each row is shorter.
4. Wrong Mirror Threshold
Using i < rows instead of i < rows - 1 skips the mirror on the last row.
→ For generalized code use i if i < rows - 1 else rows + 1 - i.
5. Unchecked input
Letters or empty input yield NaN from bare parseInt(prompt(), 10).
→ Validate with Number.isFinite and re-prompt on failure.

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single row

Output is just 1 — one digit, one row.

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: 11 and 1.

Bad input

Non-numeric input

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

Large rows

Large row count

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

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Centered pyramid

Continuous counter with spacing
Review Program 24

2. Diagonal asterisk

Descending numbers with * on diagonal
Continue with Program 26

3. Extract a method

Move pattern logic into PrintTriangle(int rows)
Call from Main with user input

4. Full mirror mapping

Use rows + 1 - i for all rows, not just last two
Compare symmetric vs bidirectional output

Important

Notes

Shrinking rows. Inner loop j = i..rows — row length = rows - i + 1 digits per row.
line += val repeats the digit; console.log(line) advances — mix them carefully.
Validate rows > 0 for interactive programs; rows = 1 prints a single 1.
Compute val once per row outside the inner loop — cleaner and slightly faster.

Quick Takeaway: outer loop i = 1..rows, shrinking inner loop j = i..rows, if/else digit mapping, then console.log(line) after each row.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1–2)	`O(n²)`	`O(1)`
Spaced output (Example 3)	`O(n²)`	`O(1)`

Wrap Up

🎉 Conclusion

The bidirectional number triangle is a compact lesson in shrinking loops and conditional mapping: repeat a digit per row with j = i..rows, then mirror down with rows + 1 - i. Master the fixed-rows version, then try user input and spaced output.

Practice the three examples above, then continue to Program 26 for the descending pattern with diagonal asterisk.

Compute val once per row — validate rows when reading from the console.

View Examples Gallery Continue to Program 26

Pro Tips

💡 Best Practices

✅ Do

Use for (let i = 1; i <= rows; i++) in the outer loop
Shrink with for (let j = i; j <= rows; j++)
Compute val once per row before the inner loop
Validate parseInt(prompt(), 10) with Number.isFinite before using rows
State O(n²) time when asked about complexity

❌ Don’t

Call console.log(line) inside the inner loop
Use j = 1 in the inner loop — rows won’t shrink
Hard-code rows + 1 - i in generalized code — use rows + 1 - i
Recompute the digit mapping on every inner iteration
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 triangle pattern

Print the pattern the beginner-friendly way.

Core concepts

△ 01

Rule

Shrink + repeat

Definition

↻ 02

j = i..rows

Shrinking rows

Code

+ 03

if/else

rows + 1 - i mirror

Code

↑ 04

Bidirectional

1,2,3 then 2,1

Shape

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Why does the last row print 1 and not 5?

For i = 5, the condition i < 4 is false, so the program appends rows + 1 - i which becomes 1.

Why does the row length shrink?

Because the inner loop runs from j = i to rows. As i increases, the inner loop executes fewer times.

What does bidirectional mean here?

Digits rise (1, 2, 3) on early rows then mirror down (2, 1) on the last rows via the rows + 1 - i mapping.

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

line += val repeats the digit on the same line. console.log(line) ends the row after the inner loop finishes.

Why use if/else instead of two separate loops?

A single inner loop with a digit mapping keeps the shrinking row logic in one place.

How do I generalize for any row count?

Replace 5 with rows and use val = i < rows - 1 ? i : rows + 1 - i — see Example 2.

What is the time complexity?

O(n²) for n rows because total prints are triangular (n + (n-1) + … + 1).

How should I read rows 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 1?

Only one row prints — a single 1.

Did you Know? 🔊

This pattern prints repeated digits per row. The inner loop runs from j = i to rows, shrinking each row. The row digit is i for the first half, then switches to rows + 1 - i to produce 22 and 1.

Continue to Program 26

Move on to the descending number pattern with diagonal asterisk in the JavaScript number-pattern series.

Program 26 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 24 — Centered Continuous Pyramid JavaScript Number Pattern 26 — Diagonal Asterisk Pattern

Bidirectional Number Triangle in JavaScript

What You’ll Learn

Shape Rule

Outer Loop

Shrinking Inner Loop

If/Else Mapping

Live Preview

O(n²)

Introduction

Why it matters?

Shrinking rows

Rising digits

Mirror down

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 Fixed rows vs User Input vs Spaced Output

When This Pattern Shows Up

Post pyramid 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

⚡ Spaced Output

Example 3 — Spaced Digits

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop walks rows

Shrinking inner loop (j)

If/else digit mapping

New line

Bidirectional triangle complete

🔎 Worked Walkthrough — rows = 5

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 prompt()

3. Keep console.log(line) Outside

4. Trace i and val on Paper

5. Dry-Run One Small n

Common Pitfalls

1. Newline Inside the Inner Loop

2. Recomputing val Inside Inner Loop

3. Wrong Inner Loop Bound

4. Wrong Mirror Threshold

5. Unchecked input

Edge Cases

Single row

Empty pattern

rows < 0

Smallest triangle

Non-numeric input

Large row count

🎯 Practice Problems

1. Centered pyramid

2. Diagonal asterisk

3. Extract a method

Example 1 — Fixed `rows = 5`

🔎 Worked Walkthrough — `rows = 5`

2. Validate `prompt()`

3. Keep `console.log(line)` Outside

`rows < 0`