JavaScript Number Pattern Programs
Number and star patterns are the classic way to practice nested loops. They sharpen your logic and prepare you for interview questions on iteration and indexing.
What is a Number Pattern?
A number or star pattern is a visual arrangement printed with nested loops — such as pyramids, triangles, or diamonds made of digits or stars. They are the best exercises to build loop and logic intuition.
Common Patterns You Will Build
Right Triangle
1 / 1 2 / 1 2 3 …
Pyramid
Centered numbers with spaces.
Inverted
Top-down decreasing rows.
Star Pyramid
Stars instead of numbers.
Floyd's Triangle
Consecutive natural numbers.
Diamond
Two pyramids joined together.
Key Idea
- Outer loop controls the rows.
- Inner loop controls the columns.
- Use spaces to align centered patterns.
- Use
document.write("<br>")to start a new line.
Number Pattern in JavaScript
Number patterns are structured arrangements of numbers displayed using loops and conditions.
Pattern programs help beginners improve logical thinking and understand nested loops in JavaScript programming.
What is Number Pattern ?
A number pattern is a structured arrangement of numbers shown in rows and columns using loops. Patterns can form triangles, pyramids, squares, diamonds, and many creative shapes.
How to Create Number Patterns
- Initialize variables properly.
- Use nested loops for rows and columns.
- Use document.write() to print values.
- Add <br> after every row.
- Use <pre> for proper spacing.
Your First Pattern
<script>
let n = 5;
for(
let i=1;
i<=n;
i++
){
for(
let j=1;
j<=i;
j++
){
document.write(
j + " "
);
}
document.write(
"<br>"
);
}
</script>
1 2
1 2 3
1 2 3 4
1 2 3 4 5
Simple Sequence Pattern
<script>
var n = 5;
let pattern = "";
for(
let i=1;
i<=n;
i++
){
pattern += i + " ";
}
document.write(pattern);
</script>
Same Number Triangle
<script>
let n = 5;
for(
let i=1;
i<=n;
i++
){
for(
let j=1;
j<=i;
j++
){
document.write(
i + " "
);
}
document.write(
"<br>"
);
}
</script>
2 2
3 3 3
4 4 4 4
5 5 5 5 5
Inverted Number Triangle
<script>
let n = 5;
for(
let i=n;
i>=1;
i--
){
for(
let j=1;
j<=i;
j++
){
document.write(
j + " "
);
}
document.write(
"<br>"
);
}
</script>
1 2 3 4
1 2 3
1 2
1
Number Pyramid
<pre>
<script>
let n = 5;
for(
let i=1;
i<=n;
i++
){
for(
let s=1;
s<=n-i;
s++
)
document.write(" ");
for(
let j=1;
j<=i;
j++
)
document.write(j+" ");
document.write("\n");
}
</script>
</pre>
Star Pyramid
<pre>
<script>
let n = 5;
for(
let i=1;
i<=n;
i++
){
for(
let s=1;
s<=n-i;
s++
)
document.write(" ");
for(
let j=1;
j<=2*i-1;
j++
)
document.write("*");
document.write("\n");
}
</script>
</pre>
Floyd's Triangle
<script>
let n = 5;
let k = 1;
for(
let i=1;
i<=n;
i++
){
for(
let j=1;
j<=i;
j++
){
document.write(
k++ + " "
);
}
document.write(
"<br>"
);
}
</script>
2 3
4 5 6
7 8 9 10
11 12 13 14 15
Diamond Pattern
<pre>
<script>
let n = 4;
for(
let i=1;
i<=n;
i++
){
for(
let s=1;
s<=n-i;
s++
)
document.write(" ");
for(
let j=1;
j<=2*i-1;
j++
)
document.write("*");
document.write("\n");
}
for(
let i=n-1;
i>=1;
i--
){
for(
let s=1;
s<=n-i;
s++
)
document.write(" ");
for(
let j=1;
j<=2*i-1;
j++
)
document.write("*");
document.write("\n");
}
</script>
</pre>
Important Notes
- Use nested loops for patterns.
- Outer loop controls rows.
- Inner loop controls columns.
- Use <pre> tag for exact spacing.
- Practice small patterns first.
Real-Life Use Cases
Interviews
Common in coding interviews.
Logic Building
Improves problem-solving skills.
Games
Used in map and grid systems.
Console Design
Useful in ASCII art and CLI apps.
Practice Questions
- Print hollow square stars.
- Print Pascal Triangle.
- Print butterfly pattern.
- Print alphabet triangle.
- Print reverse number pyramid.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Why are patterns important? | They improve loop and logic understanding. |
| Which loop is best for patterns? | for loop is mostly used. |
| Why use <pre> tag? | It preserves spaces and formatting. |
Conclusion
Number patterns help beginners strengthen nested loop concepts, logical thinking, and problem solving abilities in JavaScript.
JavaScript All Chapters
Continue Learning
Previous
Go to Real Life Chapter