Shape Rule
j % 2 alternates 0 and 1
Row 1 prints 1, row 2 prints 10, row 3 prints 101, and so on as width grows.
Alternating Binary Number Triangle (Starting with 1) Pattern in JavaScript
Overview
What You’ll Learn
The alternating binary number triangle with an ascending inner loop prints each row starting with 1 and alternating 0/1 as width grows. This tutorial covers the shape rule, loop structure, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.
Outer Loop
Rows
for (let i = 1; i <= rows; i++) makes each new row one digit longer than the previous.
Inner Loop
1..i ascending
for (let j = 1; j <= i; j++) appends j % 2 while counting up, so every row starts with 1.
line += vs console.log()
Same line / next line
Binary digits use line += j % 2;; end each row with console.log(line).
Live Preview
1–20 rows
Pick a row count and draw the ascending-inner binary triangle instantly in the browser.
O(n²)
Complexity
Total digit appends still = n(n+1)/2; extra memory stays O(1).
Introduction
An alternating binary number triangle (starting with 1) grows each row by one digit while alternating between 0 and 1 using the modulo operator. With const rows = 5, the output is 1, 10, 101, 1010, 10101.
In JavaScript you solve it with an ascending outer loop and an ascending inner loop: for (let j = 1; j <= i; j++) appends j % 2, then console.log(line) ends each row.
Why it matters?
It is a natural follow-up to Program 15 — same modulo idea, different inner-loop direction.
Key Highlights
Modulo Alternation
j % 2 yields 0 for even j, 1 for odd j.
Ascending Inner Loop
j = 1 up to i makes every row start with 1.
Print Then Break
line += j % 2; in the inner loop; console.log(line) after.
Series Foundation
Follow Program 15 (descending inner); continue to Program 17 (left-shifted odd numbers).
In short: for each row i from 1 to rows, append j % 2 for j from 1 up to i, then call console.log(line).
Foundation
📝 Problem & Approach
Given a positive integer rows, print an alternating binary number triangle starting with 1: row i has i digits from j % 2 as j counts up from 1 to i.
JavaScript
# rows = 5 (conceptual shape)
# 1
# 10
# 101
# 1010
# 10101
for (let i = 1; i <= rows; i++)
for (let j = 1; j <= i; j++)
line += j % 2 # binary digit from parity
console.log(line) # next rowInputs & Outputs
| Item | Type | Description |
|---|---|---|
rows | int | Number of triangle lines to print (typically ≥ 1). |
| Printed output | text | Each row has i alternating binary digits from j % 2. |
Minimal workflow
Pseudocode
for i from 1 to rows:
for j from 1 to i:
append j % 2 to line
console.log(line)Approach comparison
| Approach | Idea | Best for |
|---|---|---|
Ascending inner + j % 2 | 1, 10, 101, … | Learning and interviews |
Flip with 1 - (j % 2) | Start rows with 0 instead of 1 | Parity inversion variant |
| Program 15 variant | Descending inner loop | Produces 1, 01, 101, … |
Cheat Sheet
⚡ Quick Reference
| Goal | Pattern |
|---|---|
| Walk each row | for (let i = 1; i <= rows; i++) |
| Print binary digit | for (let j = 1; j <= i; j++) { line += j % 2; } |
| End the row | console.log(line) |
| Flip parity | line += 1 - (j % 2); |
| Program 15 variant | for (let j = i; j >= 1; j--) { line += j % 2; } (descending inner) |
| Row + column parity | line += (i + j) % 2; |
Compare
📋 Ascending Inner vs Descending Inner vs Flip
Same binary triangle family — inner-loop direction changes the row shape.
j % 2
parityEven j → 0, odd j → 1
1 - (j % 2)
flippedInverts every digit — row 1 starts with 0
j up to i
asc innerThis page — produces 1, 10, 101, …
Learning tip
compare 15Try Program 15’s descending inner loop next
Context
When This Pattern Shows Up
Reach for this pattern when teaching the modulo operator inside nested loops.
First lab exercise
Natural follow-up after Program 15 — same modulo, different inner-loop direction.
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 15 (descending inner loop) and Program 17 (left-shifted odd 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 alternating binary triangle in the browser.
Hands-On
Examples Gallery
Three complete JavaScript programs — fixed rows, a flip variant, and a user-input version. Click View Output to reveal sample results, or Try it Yourself to run the code live.
📚 Getting Started
Print five rows of the ascending-inner binary triangle with j % 2.
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 = 1; j <= i; j++) {
line += j % 2;
}
console.log(line);
}How It Works
When i = 1, the inner loop prints 1 % 2 = 1. When i = 3, it prints 1%2=1, 2%2=0, 3%2=1 as 101, and so on as row width grows. console.log(line) after the inner loop starts the next row.
📈 Flip Variant
Invert parity so the first row starts with 0 instead of 1.
Example 2 — Flip with 1 - (j % 2)
Start each row with 0 instead of 1 by inverting the parity output.
JavaScript
const rows = 5;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += 1 - (j % 2);
}
console.log(line);
}How It Works
1 - (j % 2) flips every digit: where j % 2 was 1 it prints 0, and vice versa. Row 1 becomes 0 instead of 1.
⚡ User Input
Read the row count at runtime and scale the binary triangle.
Example 3 — User Input Version
Read rows with prompt() and parseInt() (check Number.isFinite in real apps) and apply the same j % 2 logic.
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 = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += j % 2;
}
console.log(line);
}
}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.
🧠 How the Algorithm Prints Rows
1
Set up
console.log is built in; use prompt() when reading input. Set rows (fixed or from input).
Setup
2
Outer loop (row length)
for (let i = 1; i <= rows; i++) makes each row one digit longer than the previous.
Row
3
Inner loop (modulo)
for (let j = 1; j <= i; j++) appends j % 2 with line += j % 2 to alternate 0 and 1.
Binary
4
New line
console.log(line) ends the row so the next outer iteration starts fresh.
Break
=
Binary triangle complete
Total digit appends: 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 and note the j % 2 values printed as j counts up.
i | Inner j order | j % 2 values | Printed row |
|---|---|---|---|
1 | 1 | 1 | 1 |
2 | 1, 2 | 1, 0 | 10 |
3 | 1, 2, 3 | 1, 0, 1 | 101 |
4 | 1, 2, 3, 4 | 1, 0, 1, 0 | 1010 |
Total digit appends: 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: use (i + j) % 2 for row+column parity grids.
3. Console Formatting Drills
Practice line += digit 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 line += (j % 2) + " "; 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 after parseInt(prompt(), 10) 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 ascending inner loop first; compare with Program 15’s descending inner loop to see how direction changes each row.
Usage Tips
Small habits that keep number-pattern code clean.
1. Name Bounds Clearly
Use
rows(orn) and keepi/jfor row/column — or rename torow/col.2. Validate with
Number.isFiniteCheck
Number.isFinite(rows)afterparseInt(prompt(), 10)so bad input does not leaverowsunset.3. Keep console.log Outside
Only call
console.log(line)after the inner loop finishes the row.4. Compare with Program 15
Run both pages with the same
rowsto see how inner-loop direction changes output.5. Dry-Run One Small n
Trace
const rows = 5on 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 alternating binary 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 % 2;for binary digits;console.log(line)only after the inner loop.2. Wrong Inner Direction
Counting
jdown instead of up produces Program 15’s shape (01 on row 2).→ 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. Bare parseInt(prompt())
Letters or empty input return
NaNwith bareparseInt(prompt(), 10).→ Check
Number.isFinite(rows)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++)withfor (let j = 1; j <= i; j++)for the digits.
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
parseInt(prompt(), 10) returns NaN on bad input — validate with Number.isFinite first.
Fill char
Forgot modulo
line += j; prints 1,2,3… — use line += j % 2; for binary output.
Drill
🎯 Practice Problems
Try these variations to lock in the pattern.
1. Descending inner binary triangle
- Inner loop
for (let j = i; j >= 1; j--) - Continue with Program 15
2. Left-shifted odd number triangle
- Outer loop steps by 2 with odd digits
- Continue with Program 17
3. Flip parity
- Use
1 - (j % 2)so row 1 starts with 0 - Compare output with Example 2
4. Row+column parity
- Use
line += (i + j) % 2;for a checkerboard-style grid - Harder follow-up after this page
Important
Notes
- Triangular sum. Digit prints for rows 1+2+3+…+n still grow as O(n²) for
nrows. line += j % 2;stays on the line;console.log(line)advances — mix them carefully.- Validate
rows > 0for interactive programs;rows = 1should print a single1. - This page is left-aligned. Centered pyramids need leading spaces — covered later in the series.
Quick Takeaway: outer loop grows row length, inner loop prints j % 2 ascending, then break the line.
Analysis
⏱️ Time and Space Complexity
| Program | Time | Extra space |
|---|---|---|
| Nested loops (Examples 1–2) | O(rows²) | O(1) |
| User input (Example 3) | O(rows²) | O(1) |
🎉 Conclusion
The alternating binary number triangle with an ascending inner loop is a compact lesson in how loop direction changes output. Master the j % 2 version, then compare with Program 15’s descending inner loop.
Practice the three examples above, then continue to Program 17 for the left-shifted odd number triangle.
Use for (let j = 1; j <= i; j++) with line += j % 2; — keep console.log(line) for the break, and validate row counts when reading input.
Pro Tips
💡 Best Practices
✅ Do
- Explain ascending inner loop
for (let j = 1; j <= i; j++)before coding - Use
line += j % 2for digits andconsole.log(line)after each row - Validate
rows ≥ 1for interactive programs - Check
Number.isFinite(rows)afterparseInt(prompt(), 10)before usingrows - State O(n²) time when asked about complexity
❌ Don’t
- Call
console.log(line)inside the inner digit loop - Print
jdirectly instead ofj % 2 - Count
jdown when you meant this page’s ascending inner loop - Skip the newline after each row
- Ignore bad console input in user-facing demos
- Skip the
rows = 1edge case
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about this ascending-inner pattern
Print the pattern the beginner-friendly way.
5
Core concepts 01
Rule
j % 2 alternates 0 and 1
Definition 02
Inner loop
Counts j up to i
Code 03
Modulo
j % 2 picks digit
Logic 04
Newline
Ends each row
I/O 05
Complexity
O(n²) time
Analysis❓ Frequently Asked Questions
Modulo 2 returns the remainder after dividing by 2. Any integer is either even (remainder 0) or odd (remainder 1).
On row 2, the inner loop prints j = 1 then j = 2. That becomes 1 % 2 = 1 then 2 % 2 = 0, so the row is 10.
line += j % 2 stays on the same row while building binary digits. console.log(line) prints the completed row and adds a newline. Binary digits use += inside the inner loop; the row break uses console.log after the inner loop.
Row 3 prints j = 1, 2, 3 and j % 2 becomes 1, 0, 1 — concatenated as 101.
Program 16 counts the inner loop up (for (let j = 1; j <= i; j++)) producing 1, 10, 101, 1010, 10101. Program 15 counts down (for (let j = i; j >= 1; j--)) producing 1, 01, 101, 0101, 10101.
Yes. Use 1 - (j % 2) instead of j % 2 to flip every digit — first row becomes 0 instead of 1.
Yes. Toggle a variable between 0 and 1 on each append, but modulo is the simplest approach for this pattern.
O(n²) where n is the number of rows. Total digit appends equal n+(n-1)+…+1 = 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 prints alternating 0 and 1 using j % 2. The inner loop counts up with for (let j = 1; j <= i; j++), so every row starts with 1 — still O(n²) total appends.
Continue to Program 17
Move on to the left-shifted odd number triangle in the JavaScript number-pattern series.
About the author
12 people found this page helpful