Shape Rule
j % 2 alternates 0 and 1
Row 1 prints 1, row 2 prints 01, row 3 prints 101, and so on as width grows.
Alternating Binary Number Triangle Pattern in JavaScript
Overview
What You’ll Learn
The alternating binary number triangle combines nested loops with the modulo operator to print 0 and 1 in an alternating sequence. 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
i..1 descending
for (let j = i; j >= 1; j--) prints j % 2 while counting down, creating the alternating binary row.
line += j % 2 vs console.log(line)
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 alternating binary triangle instantly in the browser.
O(n²)
Complexity
Total digit prints still = n(n+1)/2; extra memory stays O(1).
Introduction
An alternating binary number triangle grows each row by one digit while alternating between 0 and 1 using the modulo operator. With rows = 5, the output is 1, 01, 101, 0101, 10101.
In JavaScript you solve it with an ascending outer loop and a descending inner loop: for (let j = i; j >= 1; j--) appends j % 2, then console.log(line) ends each row.
Why it matters?
It is a fun way to practice parity and nested loops before more complex logic-heavy patterns.
Key Highlights
Modulo Alternation
j % 2 yields 0 for even j, 1 for odd j.
Descending Inner Loop
j = i down to 1 sets digit order on each row.
Print Then Break
line += j % 2 in the inner loop; console.log(line) after.
Series Foundation
Follow Program 14; continue to Program 16 (ascending inner loop).
In short: for each row i from 1 to rows, append j % 2 for j from i down to 1, then call console.log(line).
Foundation
📝 Problem & Approach
Given a positive integer rows, print an alternating binary number triangle: row i has i digits from j % 2 as j counts down from i to 1.
JavaScript
# rows = 5 (conceptual shape)
# 1
# 01
# 101
# 0101
# 10101
for (let i = 1; i <= rows; i++)
for (let j = i; j >= 1; 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 i down to 1:
append j % 2 to line
console.log(line)Approach comparison
| Approach | Idea | Best for |
|---|---|---|
Descending inner + j % 2 | 1, 01, 101, … | Learning and interviews |
Flip with 1 - (j % 2) | Start rows with 0 instead of 1 | Parity inversion variant |
Cheat Sheet
⚡ Quick Reference
| Goal | Pattern |
|---|---|
| Walk each row | for (let i = 1; i <= rows; i++) |
| Print binary digit | for (let j = i; j >= 1; j--) line += j % 2 |
| End the row | console.log(line) |
| Flip parity | line += (1 - (j % 2)) |
| Program 16 variant | for (let j = 1; j <= i; j++) line += j % 2 (ascending inner) |
| Row + column parity | line += ((i + j) % 2) |
Compare
📋 j % 2 vs Flip vs Ascending Inner
Same binary triangle family — different ways to emit 0 and 1.
j % 2
parityEven j → 0, odd j → 1
1 - (j % 2)
flippedInverts every digit — row 1 starts with 0
j down to 1
desc innerThis page — produces 1, 01, 101, …
Learning tip
% 2 firstMaster j % 2 before row+column parity
Context
When This Pattern Shows Up
Reach for this pattern when teaching the modulo operator 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 14 (odd-length rows) and Program 16 (ascending inner loop) 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 alternating 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 = i; j >= 1; 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 3%2=1, 2%2=0, 1%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 = i; j >= 1; 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 = i; j >= 1; 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 prompt).
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 = i; j >= 1; 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 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 and note the j % 2 values printed on each row.
i | Inner j order | j % 2 values | Printed row |
|---|---|---|---|
1 | 1 | 1 | 1 |
2 | 2, 1 | 0, 1 | 01 |
3 | 3, 2, 1 | 1, 0, 1 | 101 |
4 | 4, 3, 2, 1 | 0, 1, 0, 1 | 0101 |
Total digit 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: use (i + j) % 2 for row+column parity grids.
3. Console Formatting Drills
Practice line += j % 2 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 j % 2 first; compare with 1 - (j % 2) to flip every digit on 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. Trace j % 2 on Paper
Write the j values and their modulo before coding — catches direction mistakes early.
5. Dry-Run One Small n
Trace
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 % 2for binary digits;console.log(line)only after the inner loop.2. Wrong Inner Direction
Counting
jup instead of down changes row ordering (see Program 16).→ For this shape, keep
for (let j = i; j >= 1; 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 = i; j >= 1; 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. Odd-length descending triangle
- Outer loop
i -= 2for odd widths only - Continue with Program 14
2. Ascending inner binary triangle
- Inner loop
for (let j = 1; j <= i; j++)instead of down - Continue with Program 16
3. Flip parity
- Use
1 - (j % 2)so row 1 starts with 0 - Compare output with Example 2
4. Spaced binary output
- Use
line += j % 2 + " "between digits - 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 % 2stays 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 descending, 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 is a compact lesson in modulo inside nested loops. Master the j % 2 version, then try the flip variant with 1 - (j % 2).
Practice the three examples above, then continue to Program 16 for the ascending-inner-loop binary triangle.
Use j % 2 for alternating 0/1 — keep line += j % 2 for digits and console.log(line) for the break, and validate row counts when reading input.
Pro Tips
💡 Best Practices
✅ Do
- Explain
j % 2before coding descending inner loop - 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
jup when you meant this page’s descending 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 binary pattern
Print the pattern the beginner-friendly way.
5
Core concepts 01
Rule
j % 2 alternates 0 and 1
Definition 02
Outer loop
Grows row length each line
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 = 2 then j = 1. That becomes 2 % 2 = 0 then 1 % 2 = 1, so the row is 01.
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 = 3, 2, 1 and j % 2 becomes 1, 0, 1 — concatenated as 101.
Program 15 counts the inner loop down (for (let j = i; j >= 1; j--)) producing 1, 01, 101, 0101, 10101. Program 16 counts up (for (let j = 1; j <= i; j++)) producing 1, 10, 101, 1010, 10101.
Yes. Use 1 - (j % 2) instead of j % 2 to flip every digit — first row becomes 0 instead of 1.
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 down with for (let j = i; j >= 1; j--), so row length grows each line — still O(n²) total prints.
Continue to Program 16
Move on to the column-wise alternating binary pattern in the JavaScript number-pattern series.
About the author
12 people found this page helpful