Patterns in JavaScript

Introduction

A pattern is a series or a sequence that repeats itself. Patterns are the most common programs practiced while learning the basics of JavaScript. They improve logical thinking and help us quickly figure out the program's execution flow (especially loops) with practice.

Many people skip this step as they think patterns are easy and a waste of time to practice, but patterns can significantly help you think about a problem and reach the solution in less time.

Why Use Patterns?

Most of the time, patterns are not directly used while developing applications using JavaScript. Still, it is advised to practice patterns before jumping to the advanced topics of JavaScript so that the basic programmer has adequate knowledge of the flow of the programs and how loops work before jumping to higher concepts of JavaScript.

A good practice of pattern in JavaScript helps improve problem-solving skills and logical thinking.

Patterns in JavaScript

Let us look at various examples of number, star, and character patterns and understand their approach in depth.

Number Patterns

• There is an inner loop and an outer loop.
• The outer loop, in most cases, determines the number of rows.
• The inner loop forms the pattern gradually, with the use of the row number (in most cases).

Example 6 : Number Pyramid Pattern - II

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 3 rows in the example here. This forms the external loop.

2. We need to run a loop to print n numbers in each row, where n is the row number. This forms the internal loop.

3. In this example above, we have 3 rows. For 3 rows, we need an external loop that goes from n = 1 to n = 3 (i.e. no of rows). We need to print the next n numbers of the series for each row.

4. What is the series followed ? The series of first n numbers. We declare a variable in the beginning and keep on incrementing it.

5. For each row, we have 2 components :

   • The starting spaces.
   • Numbers in order.

   If n is the row number, and rows is the total number of rows, spaces : No. of spaces in each row : $(rows-n)$ Numbers : No. of numbers in each row : $(2*n-1)$

6. Example: For the 2nd row, n = 2. The internal loop goes from space = 1 to space $= 3-2 = 1$, and num = 1 to num = $2*2-1 = 3$. We need to print the next 3 numbers of the series. The last number printed in the 1st row was 1. Hence, the 5th row is : 2 3 4.

Code:

Star Patterns

When a series of stars (*) are arranged to create a pattern or a particular shape, like pyramids, triangles, etc., it forms a star pattern. You should practice star patterns to get a good hand at loops and nested loops.

We'll look at some examples to understand star patterns in depth.

Example 1 : Square Star Pattern - I

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. We need to run a loop to print 5 stars in each row. This forms the internal loop.

Code:

Example 2 : Hollow Square Star Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print starting and ending stars (only in case the row number is not 0 or the last row). This forms the internal loop.

Code:

Example 3 : Right Triangle Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.

2. In each row, we need to run a loop to print n no. of stars, where n is the row number. This forms the internal loop.

3. For each row, we have 2 components :

   • The starting spaces.
   • Stars.

   If n is the row number, and rows is the total number of rows, spaces : No. of spaces in each row : $(rows-n)$ Stars : From 1 to n

4. In this example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print spaces and stars.

5. Example : For the 3rd row, n = 3. The internal loop goes from num = 1 to num = 3. We need to print $(n-row)$ $i.e.$ $(5-3) = 2$ spaces followed by 3 stars. So, out 3rd row becomes : __***. {space is denoted by _ here}

Code:

Example 4 : Left Triangle Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print n no. of stars, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print n stars.
4. Example : For the 3rd row, n = 3. The internal loop goes from num = 1 to num = 3. We need to print 3 stars. So, our 3rd row becomes : ***.

Code:

Example 5 : Pyramid Triangle Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.

2. In each row, we need to run a loop to print n no. of stars, where n is the row number. This forms the internal loop.

3. For each row, we have 2 components :

   • The starting spaces.
   • Numbers in order.

   If n is the row number, and row is the total number of rows, spaces : No. of spaces in each row : $(row-n)$ Stars : No. of stars : $(2*n-1)$

4. In this example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print spaces and stars.

5. Example: For the 3rd row, n = 3. The internal loop goes from num = 1 to num = 3. We need to print $(n-row)$ $i.e.$ $(5-3) = 2$ spaces followed by $(2*n-1) = 6-1 = 5$ stars. So, out 3rd row becomes : __*****. {space is denoted by _ here}

Code:

Triangular Pattern (With Numbers and Stars)

Let us look at some more triangular patterns using both numbers and stars.

Example 1 : Reverse Triangle - I

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print 6-n numbers, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). We need to print n numbers for each row, starting with 5 (no of rows) and decrementing.
4. Example : For the 3rd row, n = 3. The internal loop goes from num = 5 to num = 3. We need to print n, $i.e.$, 3 numbers starting 5 and decrementing. So, our 3rd row becomes : 5 4 3.

Code:

Example 2 : Reverse Triangle - I

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the 6-n numbers, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print $6-n$ numbers in reverse order.
4. Example : For the 3rd row, n = 3. The internal loop goes from num $= 6-3 = 3$ to num = 1. We need to print $(6-n)$ $i.e.$ $(6-3)$ 3 numbers in reverse order. So, out 3rd row becomes : 3 2 1.

Code:

Example 3 : Hollow Triangle Star Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print n no. of stars, where n is the row number. This forms the internal loop.
3. In this example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print boundary stars.
4. We need to see if the current position is the boundary position for the internal loop. We need to add a star, else a space.
5. Example : For the 3rd row, n = 3. The internal loop goes from num = 1 to num = 3. We need to print boundary stars. So, our 3rd row becomes : *_*. (space is represented as _ here).

Code:

Example 4 : Downward Triangle Star Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print n no. of stars, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print 6-n stars.
4. Example : For the 3rd row, n = 5. The internal loop goes from num = 1 to num $= 6-5 = 1$. We need to print 3 stars. So, our 3rd row becomes : *.

Code:

Character Patterns

Character Patterns are the same as the patterns discussed above, except that we use characters to form patterns of different shapes instead of using stars or numbers.

Let us look at some examples to practice character patterns in javascript.

Example 1 : Triangle Pattern

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the n characters, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print characters from num = 1 to num = n.
4. Example : For the 5th row, n = 5. The internal loop goes from num = 1 to num = 5. The 5th row becomes : AAAAA.

Code:

Example 2 : Reverse Triangle

Approach :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the 6-n characters, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print $6-n$ characters.
4. Example: For the 3rd row, n = 3. The internal loop goes from num = 1 to num = 6-3 = 3. We need to print $(6-n)$ $i.e.$ $(6-3)$ 3 characters. So, out 3rd row becomes : AAA.

Code:

Example 3 : Inverse Triangle Pyramid

Approach :

Two different cases are joined together to form this pattern. Hence, we'll have to use 2 loops - one for the upper triangle and the second for the inverse triangle.

For the first triangle :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the n characters, where n is the row number. This forms the internal loop.
3. In this example above, we have 4 rows. For 4 rows, we need an external loop that goes from n = 1 to n = 4 (i.e. no of rows). For each row, we need to print characters from num = 1 to num = n.
4. Example : For the 4th row, n = 4. The internal loop goes from num = 1 to num = 4. The 4th row becomes : $$$$

For the second reverse triangle :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the 6-n characters, where n is the row number. This forms the internal loop.
3. In this example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print $6-n$ characters.
4. Example: For the 3rd row, n = 3. The internal loop goes from num = 1 to num = $6-3 = 3$. We need to print $(6-n)$ $i.e.$ $(6-3)$ 3 characters. So, out 3rd row becomes %%%.

Code:

Example : 4

Approach :

Two different cases are joined together to form this pattern. Hence, we'll have to use 2 loops : one for the upper triangle and the second for the inverse triangle.

For the first triangle :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the 6-n characters, where n is the row number. This forms the internal loop.
3. In this example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print $6-n$ characters.
4. Example : For the 3rd row, n = 3. The internal loop goes from num = 1 to num $= 6-3 = 3$. We need to print $(6-n)$ $i.e.$ $(6-3)$ 3 characters. So, out 3rd row becomes : AAA.

For the second reverse triangle :

1. We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
2. In each row, we need to run a loop to print the n characters, where n is the row number. This forms the internal loop.
3. In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows). For each row, we need to print characters from num = 1 to num = n.
4. Example : For the 4th row, n = 4. The internal loop goes from num = 1 to num = 4. The 4th row becomes : AAAA

Code: