Pattern Mastery
If you can comfortably build a hollow diamond, you have mastered loops, variables, logic, and spatial thinking. You are officially ready for complex algorithms.
Breaking Loops Early
If you find what you need early, you can use the 'break' keyword. It instantly destroys the loop and moves on, saving the computer's energy.
Debugging Infinite Loops
If you accidentally tell a loop to run until 'i < 10', but you never tell 'i' to increase, 'i' stays 0 forever. The loop never stops, and your browser crashes.
The Hourglass Pattern
An hourglass is the opposite of a diamond. It is an Inverted Pyramid on top, and a regular Pyramid on the bottom. Stack the loops accordingly.
Character Patterns (A, B, C)
JS can convert numbers into alphabet letters using String.fromCharCode(). You can loop numbers, convert them to letters, and print a triangle of alphabets.
Floyd's Triangle
A number triangle where the numbers keep counting up forever (1, then 2 3, then 4 5 6). You need an external 'counter' variable outside the loops that keeps growing.
Number Patterns
Instead of printing '*', you print the variable 'i' (the row) or 'j' (the column). This creates grids of numbers that count up or down.
Hollow Triangles
Similar to hollow squares, but the diagonal edge is moving. You print a star if it's the bottom row, the left edge, or if row == column (the diagonal line).
Finding the Edges
In a 5x5 square, the edges are when row == 1, row == 5, column == 1, or column == 5. The 'if' statement looks for these exact coordinates to draw the borders.
Hollow Patterns
Printing an empty box with a border requires 'if/else' logic. You tell the Inner loop: 'Only print a star IF you are on the very first or very last edge. Otherwise, print a space.'
The Diamond Pattern
A diamond is just a regular Pyramid and an Inverted Pyramid glued together. You simply write the code for the top half, then write the code for the bottom half below it.
The Inverted Pyramid
Just like the inverted triangle, you take your perfect pyramid code and tell the Outer loop to run backward. The math of the inner loops stays exactly the same.
Formula for Pyramid Stars
To get odd numbers for a pyramid, the formula is (2 * i - 1). If you are on row 3: 2 * 3 - 1 = 5 stars. The math dictates the shape.
The Pyramid Pattern
A full pyramid requires precise spacing. You print spaces to push the stars to the center, then you print odd numbers of stars (1, 3, 5, 7) per row.
Balancing Spaces and Stars
For a mirrored triangle of size 5: Row 1 has 4 spaces and 1 star. Row 2 has 3 spaces and 2 stars. The math of spaces + stars always equals the total size.
The Mirrored Right Triangle
To push the triangle to the right side, you need two Inner loops! The first Inner loop prints blank spaces, and the second Inner loop prints the stars.
Visualizing the Space
Empty space in a pattern is not 'nothing'. Space is a physical character (' ') that must be deliberately printed by your loops.
The Inverted Triangle
To flip the triangle upside down, we just reverse the Outer loop. We start the counter at 5, and tell it to count down to 1 using 'i--'.
The Right Triangle Pattern
Instead of the Inner loop always running 5 times, we make the Inner loop run 'i' times (the current row number). Row 1 gets 1 star. Row 2 gets 2 stars.
Resetting the Row
When printing a square, after the Inner loop finishes a row of stars, you must add '\n' in the Outer loop to reset the carriage for the next row.
Line Breaks (\n)
In the console, you can't just press 'Enter' to start a new line. You must use the invisible character '\n'. It tells the computer to drop down one row.
The Square Pattern
To print a square, the Outer loop runs 5 times (for 5 rows), and the Inner loop runs 5 times (for 5 columns of stars). The width equals the height.
How Nested Loops Execute
For every ONE step the Outer Loop takes, the Inner Loop runs completely from start to finish. If Outer is 3 and Inner is 3, the code runs 9 times total.
Nested Loops
To handle 2D shapes, we use a loop INSIDE another loop. The Outer Loop controls the Rows (going down). The Inner Loop controls the Columns (printing across).
The Concept of Rows and Columns
Pattern printing works like an Excel spreadsheet or a chessboard. You have rows (going down) and columns (going across). You must control both.
Printing a Straight Line
To print 5 stars in a row, we use a loop that runs 5 times, adding a '*' to a string variable each time, and then printing the final string.
The Iterator Variable (i)
By tradition, programmers use the letter 'i' to act as the counter inside a loop. It stands for 'iterator'. As the loop runs, 'i' goes 1, 2, 3...
The 'for' Loop Anatomy
A for loop has 3 rules: Where to start counting, when to stop counting, and how to count (by 1s, by 2s). It looks like this: for(start; stop; step).
The Concept of Loops
A loop is an instruction that says 'do this action 10 times in a row'. Instead of writing console.log 10 times, you write it once inside a loop.
Why Print Patterns?
Printing shapes with asterisks (*) seems pointless, but it is the ultimate gym workout for your brain. It forces you to master how the computer repeats tasks.
Lecture 05: Pattern Printing in Javascript(Beginner)
Total Duration: 1 hrs 28 mins 43 secs