No products in the cart.
Return To ShopJava
Patterns in JavaScript
JavaScript is a versatile programming language widely used for web development. One of the essential aspects of learning JavaScript is understanding how to work with loops and nested loops to create different patterns. This article will guide you through various patterns in JavaScript, complete with code examples and a quiz to test your understanding.
Introduction to Patterns
Patterns are a common task in programming that involves printing a series of characters in a structured format. Understanding how to create these patterns helps in mastering loops and nested loops, which are crucial for solving more complex problems.
Types of Patterns
Patterns can be categorized into various types:
- Star Patterns: Patterns made using asterisks (*).
- Number Patterns: Patterns made using numbers.
- Alphabet Patterns: Patterns made using letters.
Let’s explore each type with code examples.
-
Star Patterns
Right-Angled Triangle
A right-angled triangle pattern looks like this:
* ** *** **** *****
JavaScript Code:
function rightAngledTriangle(n) { for (let i = 1; i <= n; i++) { console.log('*'.repeat(i)); } } rightAngledTriangle(5);
Pyramid Pattern
A pyramid pattern looks like this:
* *** ***** ******* *********
JavaScript Code:
function pyramidPattern(n) { for (let i = 1; i <= n; i++) { console.log(' '.repeat(n - i) + '*'.repeat(2 * i - 1)); } } pyramidPattern(5);
Diamond Pattern
A diamond pattern looks like this:
* *** ***** ******* ********* ******* ***** *** *
JavaScript Code:
function diamondPattern(n) { for (let i = 1; i <= n; i++) { console.log(' '.repeat(n - i) + '*'.repeat(2 * i - 1)); } for (let i = n - 1; i >= 1; i--) { console.log(' '.repeat(n - i) + '*'.repeat(2 * i - 1)); } } diamondPattern(5);
-
Number Patterns
Right-Angled Number Triangle
A right-angled number triangle looks like this:
1 12 123 1234 12345
JavaScript Code:
function rightAngledNumberTriangle(n) { for (let i = 1; i <= n; i++) { let row = ''; for (let j = 1; j <= i; j++) { row += j; } console.log(row); } } rightAngledNumberTriangle(5);
Inverted Number Pyramid
An inverted number pyramid looks like this:
12345 1234 123 12 1
JavaScript Code:
function invertedNumberPyramid(n) { for (let i = n; i >= 1; i--) { let row = ''; for (let j = 1; j <= i; j++) { row += j; } console.log(row); } } invertedNumberPyramid(5);
-
Alphabet Patterns
Right-Angled Alphabet Triangle
A right-angled alphabet triangle looks like this:
A AB ABC ABCD ABCDE
JavaScript Code:
function rightAngledAlphabetTriangle(n) { for (let i = 1; i <= n; i++) { let row = ''; for (let j = 0; j < i; j++) { row += String.fromCharCode(65 + j); } console.log(row); } } rightAngledAlphabetTriangle(5);
Alphabet Pyramid
An alphabet pyramid looks like this:
A ABA ABCBA ABCDCBA ABCDEDCBA
JavaScript Code:
function alphabetPyramid(n) { for (let i = 1; i <= n; i++) { let row = ' '.repeat(n - i); for (let j = 0; j < i; j++) { row += String.fromCharCode(65 + j); } for (let j = i - 2; j >= 0; j--) { row += String.fromCharCode(65 + j); } console.log(row); } } alphabetPyramid(5);
Approach to Writing Code for Patterns
- Understand the Pattern: Analyze the pattern you need to print. Determine the number of rows and columns and how the characters are aligned.
- Use Nested Loops: Most patterns can be printed using nested loops. The outer loop usually represents the rows, while the inner loop represents the columns or the characters within each row.
- Initialize Variables: Depending on the pattern, you may need to initialize variables to keep track of characters, spaces, or numbers.
- Build the String: Within the inner loop, build the string for each row by concatenating characters or numbers.
- Print the Row: After constructing the row string, print it.
- Adjust for Spaces and Alignments: For patterns that require alignment (like pyramids), use spaces to align characters properly.
Quiz: Test Your Knowledge
1. What will be the output of the following code snippet?
function pattern(n) { for (let i = 1; i <= n; i++) { console.log('*'.repeat(i)); } } pattern(3);
2. How many spaces are in the first row of a pyramid pattern with height 4?
3. What does the following code print?
function numberTriangle(n) { for (let i = 1; i <= n; i++) { let row = ''; for (let j = 1; j <= i; j++) { row += j; } console.log(row); } } numberTriangle(3);