Number Pattern in JavaScript

Introduction to Patterns in JavaScript

Design patterns are well-regarded concepts in Java programming that aim to refine logical reasoning and improve comprehension of flow control. These patterns represent reusable models of objects and their interactions. Each pattern is assigned a specific name, which becomes part of the terminology used when discussing complex design choices. Every developer aspires for their code to be reusable, easy to read, and straightforward to maintain. As applications grow in size, organizing code effectively becomes increasingly important. Design patterns address this challenge by providing structural frameworks for common issues within specific contexts. In this article, we will explore Patterns in JavaScript.

JavaScript web developers frequently utilize design patterns in their application development, often without realizing it. While specific design patterns may be applicable in particular contexts, JavaScript developers tend to favor certain patterns over others. A design pattern represents a shared solution to recurring software design challenges. These patterns embody best practices that seasoned software developers draw upon. You can think of a design pattern as a coding template.

Why use patterns?

Certain developers perceive design patterns as unproductive or struggle to implement them effectively. Nonetheless, the proper application of a design pattern can enhance the readability and cleanliness of your code while reducing the burden of maintenance. Most importantly, these patterns provide a shared vocabulary for software architects to articulate their work. They offer immediate clarity to anyone who may need to review your code.

Number Patterns

Loops can be categorized into two types: the inner loop and the outer loop.

The outer loop generally governs the rows, while the inner loop builds the pattern progressively based on the current row number.

Note: Keep in mind that this is a simple framework that can be expanded to create more sophisticated patterns.

When numerical values are arranged to create specific shapes or designs, such as pyramids or triangles, they give rise to a numerical pattern. Engaging with these patterns will lead to the understanding of loops and nested loops.

Let us examine a few examples to gain a deeper insight into numerical patterns.

Example 1: Triangle Pattern – I

1
1 2
1 2 3
1 2 3 4
1 2 3 4 5

Approach:

• ✅ To do this, we have to form an external loop that will run for a particular number of times based on the number of rows. In our example, we will run a loop of 5 rows, which is our external loop.
• ✅ For every row, we are going to utilize another loop called internal loop that will display a certain amount of values whose count is equal to the current row number.
• ✅ Therefore, in our case of 5 rows, the outer loop will run from n = 1 to n = 5, i.e., the number of rows.
• ✅ We will print the numbers from num = 1 through num = n for every iteration.
• ✅ For instance, in 5th row when n = 5, the inner loop will print numbers 1 to 5 and the output will be: 1 2 3 4 5.
Example
Copy
let rows = 5;
// pattern variable carries the final pattern in string format
let pattern = "";
// outer loop runs for `rows` no. of times
for (let n = 1; n <= rows; n++) {
   // inner loop runs for n
   for (let num = 1; num <= n; num++) {
      pattern += num;
   }
   // Add a new line character after contents of each line
   pattern += "\n";
}
console.log(pattern);
Try it Yourself

Output

Line 1: We start by defining the number of rows. Therefore, if your intention is to create a pattern consisting of 10 rows, you can straightforwardly assign the value 10 to the variable rows, and this will serve the purpose accordingly:

1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678910

Line 4: We initiate with a blank string to serve as our pattern. Within the inner loop, we append digits to this string in order to form the desired numerical pattern.

Lines 7 to 15: Here, we find the outer loop. This loop runs from n = 1 up to the total count of rows.

Lines 9-11: In this section, we observe the inner loop. Its function is to output the numbers ranging from 1 to the specific row number for every individual row.

Line 16: The console displays the pattern that has been created.

Example 2: Triangle Pattern - II

1
2 2
3 3 3
4 4 4 4
5 5 5 5 5

Approach:

• ✅ To achieve this, we need to construct an external loop that iterates a number of times based on the number of rows. We will iterate 5 times in this case, which is our external loop.
• ✅ We will have an internal loop for every row, so that it will print a number of times based on the row number. This is our internal loop.
• ✅ For our case, having 5 rows, the outer loop will go from n = 1 to n = 5 (number of rows). For each row, we will output the row number, n, n times.
• ✅ For example, for the 5th row when n = 5, the inner loop will execute from num = 1 to num = 5, and will print the row number (i.e., 5). So, the 5th row will be: 5 5 5 5 5.
Example
Copy
let rows = 5;

// pattern variable carries the final pattern in string format
let pattern = "";

// outer loop runs for `rows` no. of times
for (let n = 1; n <= rows; n++) {
   for (let num = 1; num <= n; num++) {
      pattern += n;
   }

   // Add a new line character after contents of each line
   pattern += "\n";
}
console.log(pattern);
Try it Yourself

Output

Example 3: Reverse Triangle – I

12345
1234
123
12
1

Approach:

• ✅ For this issue, we require an outer loop that will iterate some quantity depending on the number of rows. In our situation, we iterate the loop 5 times since our outer loop.
• ✅ For each row, we will have an internal loop to print a decreasing number of values, i.e., 6 minus the current row number (n). This is our internal loop.
• ✅ In our example with 5 rows, the outer loop will iterate from n = 1 to n = 5. In each iteration, we will print 6-n numbers one by one.
• ✅ Suppose n = 3 in row 3, then the middle loop will execute from num = 1 to 6-3 = 3. So, we will be printing 3 numbers sequentially and thus, the third row will have 1 2 3 printed on it.
Example
Copy
let rows = 5;

// pattern variable carries the final pattern in string format
let pattern = "";

// outer loop runs for `rows` no. of times
for (let n = 1; n <= rows; n++) {
   for (let num = 1; num <= 6 - n; num++) {
      pattern += num;
   }
   pattern += "\n";
}
console.log(pattern);
Try it Yourself

Output

Example 4: Number Pyramid Pattern - I

1
   123
  12345
 1234567
123456789

Approach:

• ✅ We need to run a loop for a set number of rows, in our case, 5. This will be our outer loop.
• ✅ We will have a second loop for each row to print 2*n - 1 numbers, where n is the row number. This will be our inner loop.
• ✅ Each row has two members: The leading spaces. The sequential numbers.
• ✅ If the row number currently being processed is n and row is the row number, the spaces in the current row can be obtained as (row - n). The numbers would be between 1 and (2*n - 1).
• ✅ Here, for 5 rows, the outer loop will iterate from n = 1 to n = 5. For every row, we will print the correct number of spaces followed by numbers. For instance, for the 3rd row when n = 3, the inner loop will iterate from num = 1 to num = 3. We will print (5 - 3) = 2 spaces followed by numbers from 1 to (2*3 - 1) = 5. So the 3rd row will be: __12345, where the underscore is a space.
• ✅ The leading spaces.
• ✅ The sequential numbers.
Example
Copy
let rows = 5;

// pattern variable carries the final pattern in string format
let pattern = "";

// outer loop runs for `rows` no. of times
for (let n = 1; n <= rows; n++) {
   // Inner Loop - I -> for the spaces
   for (let space = 1; space <= rows - n; space++) {
      pattern += " ";
   }

   // Inner Loop - II -> for the numbers
   for (let num = 1; num <= 2 * n - 1; num++) {
      pattern += num;
   }

   pattern += "\n";
}
console.log(pattern);
Try it Yourself

Output

Conclusion

This article has discussed various categories of patterns, including numerical patterns that feature pyramids, inverted triangles, and standard triangles. Within the realm of software development, a pattern refers to a solution that can be reused to address a specific design challenge.

Design patterns serve multiple objectives and provide reliable, well-established solutions that have been validated by seasoned experts in the industry. These solutions are effective approaches to addressing challenges in a universally recognized way, drawing upon the knowledge and proficiency of leading developers who devised them.

Additionally, design patterns enhance the reusability and clarity of your software, significantly speeding up the development workflow. Patterns are engaging to study across various programming languages and serve as a fascinating topic for discussion.