Beginner's Guide to Star Patterns Using While Loops in JavaScript

If you're just starting out with JavaScript and want to get comfortable with loops, learning how to print star patterns is a fun and visual way to do so! In this tutorial, you'll learn how to build different triangle shapes using while loops step by step. We'll also show the output visually so it's easier to understand.

1. Upper Left Triangle

This section introduces the classic upper left triangle pattern, where each row contains an increasing number of stars, all aligned to the left margin.

Pattern Structure

• The triangle starts with a single star at the top.
• Each subsequent row adds one more star than the previous row.
• The stars remain left-aligned throughout.

Example Output

*
* *
* * *
* * * *
* * * * *
    

Logical Approach

• Initialize the row count at 1.
• For every row, increment the number of stars printed.
• Employ a nested looping structure:
  • The outer loop manages the rows.
  • The inner loop prints the appropriate number of stars for each row.

Implementation in Code (JavaScript)

let n = 5;
let i = 1; // Start from the first row

while (i <= n) {
  let j = 1;
  let row = "";

  while (j <= i) {
    row += "* "; // Add a star
    j++;
  }

  console.log(row); // Display the row
  i++;
}

 2. Upper Right Triangle

Overview

The upper right triangle star pattern is a classic programming exercise focused on right-aligned triangles. Each row contains an increasing number of stars, all aligned neatly to the right. Strategic placement of spaces ensures the correct alignment.

Pattern Structure

• Initiation:
  The pattern starts with a single star at the rightmost edge.
• Progression:
  Each subsequent row adds one star, maintaining right alignment.
• Spacing:
  Leading spaces decrease as the number of stars increases.
• Completion:
  The final row is composed entirely of stars, with no leading spaces.

Visual Example

        *
      * *
    * * *
  * * * *
* * * * *
    

Logical Approach

• Step 1:
  Begin with row count set to 1.
• Step 2:
  For each row, calculate the required number of leading spaces using:
  spaces = total_rows - current_row
• Step 3:
  Use nested loops:
  • The outer loop iterates through rows.
  • The first inner loop appends the leading spaces.
  • The second inner loop appends the stars.

Mathematical Relationship

• Row 1: 4 spaces + 1 star  (5 - 1 spaces + 1 star)
• Row 2: 3 spaces + 2 stars (5 - 2 spaces + 2 stars)
• Row 3: 2 spaces + 3 stars (5 - 3 spaces + 3 stars)
• Row 4: 1 space + 4 stars (5 - 4 spaces + 4 stars)
• Row 5: 0 spaces + 5 stars (5 - 5 spaces + 5 stars)

Implementation in JavaScript

let n = 5; // Number of rows
let i = 1;

while (i <= n) {
  let j = 1;
  let row = "";

  // Insert leading spaces for alignment
  while (j <= (n - i)) {
    row += "  ";
    j++;
  }

  // Insert stars for the current row
  j = 1;
  while (j <= i) {
    row += "* ";
    j++;
  }

  console.log(row);
  i++;
}

 3. Lower Right Triangle

Overview

The lower right triangle pattern features a sequence of stars, starting with the maximum in the top row and decreasing by one in each subsequent row. The alignment is consistently to the right, creating a visually distinctive, inverted staircase effect.

Visual Representation

* * * * *
  * * * *
    * * *
      * *
        *
    

Key Characteristics

• The top row contains the maximum number of stars.
• Each following row has one fewer star than the row above.
• Leading spaces increase as the pattern descends, ensuring right alignment.
• The final row displays a single star, positioned at the far right.

Pattern Construction

1. Row Initialization

   • Begin with the set number of rows (e.g., n = 5).
   • The outer loop controls the descending sequence of rows.

2. Leading Spaces

   • For each row, calculate the number of leading spaces as:
     spaces = total_rows - current_row
   • Leading spaces increase by one per row, enhancing right alignment.

3. Star Placement

   • After the spaces, print the required number of stars.
   • Each row displays one fewer star than the previous row.

Logical Flow

• Start with the top row (maximum stars, zero leading spaces).
• For each subsequent row:
  • Increment leading spaces by one.
  • Decrement the number of stars by one.
• Repeat until only a single star remains.

Pseudocode Illustration

let n = 5; // Total number of rows

for (let i = n; i >= 1; i--) {
  let row = "";

  // Insert leading spaces for right alignment
  for (let s = 0; s < n - i; s++) {
    row += "  ";
  }

  // Insert stars for the current row
  for (let star = 0; star < i; star++) {
    row += "* ";
  }

  console.log(row);
}

 4. Lower Left Triangle

Overview

The lower left triangle star pattern is a classic programming exercise. It begins with the maximum number of stars at the top row, with each subsequent row containing one fewer star, all aligned to the left margin. This inverted triangle is a simple yet effective way to practice nested loops and control flow in programming.

Pattern Structure

• Initial Row: Contains the maximum number of stars (e.g., 5).
• Subsequent Rows: Each new row has one fewer star than the previous row.
• Alignment: All stars are left-aligned; no additional spacing is required.
• Final Row: Consists of a single star at the bottom.

Example Output

* * * * *
* * * *
* * *
* *
*
    

Logical Approach

• Initialization: Begin with the maximum row count, such as 5.
• Looping:
  • Use an outer loop to control the number of rows, decrementing with each iteration.
  • An inner loop prints the correct number of stars per row.
• Spacing: No calculations for spacing are necessary, due to left alignment.
• Termination: Continue until only one star remains in the last row.

Mathematical Relationship

• Row 1: 5 stars (i = 5)
• Row 2: 4 stars (i = 4)
• Row 3: 3 stars (i = 3)
• Row 4: 2 stars (i = 2)
• Row 5: 1 star (i = 1)

Implementation in JavaScript

let n = 5;
let i = n;

while (i >= 1) {
  let row = "";
  let j = 1;
  while (j <= i) {
    row += "* ";
    j++;
  }
  console.log(row);
  i--;
}

Final Thoughts

You’ve just explored the creation of four fundamental triangle star patterns using while loops in JavaScript. These exercises serve to reinforce crucial programming concepts such as loop nesting, the interplay between rows and columns, and the manipulation of strings and spaces to generate specific output shapes.

For further challenge, consider integrating these patterns to construct more complex forms, such as a diamond or pyramid. This next step will deepen your understanding of control structures and output formatting in JavaScript.